Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical alignment in chrome on mac #295

Closed
RichardMorris opened this issue Aug 22, 2012 · 12 comments

Comments

Projects
None yet
3 participants
@RichardMorris
Copy link

commented Aug 22, 2012

I'm seeing a lot of vertical alignment problems using mathjax with Chrome 21.0.1180.82 on a MacBook pro.

The following code gives a page which has two alignment issues, the letters with hats are raised slightly compared to the unhatted letters, also the whole equation is slightly raised compared to the surrounding text.

I don't get the same issue with Safari or Firefox.

<html>

<head>
<title>Jep: Creating mathml from expressions</title>

<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/javascript">
    MathJax.Hub.Config({
      jax: ["input/TeX","output/HTML-CSS"],
      extensions: ["tex2jax.js"],
      "HTML-CSS": {
      scale: 150
   },
   tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
 }); 
</script>
</head>
<body>
<p>
  foo $\mathbf{I} = \mathbf{a}\hat{\mathbf{a}} + \mathbf{b}\hat{\mathbf{b}} + \mathbf{c}\hat{\mathbf{c}}</math>$ bar</p>
</body>
</html>
@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2012

I also found many 1px vertical shifts in Chrome in the test suite.

MathMLToDisplay/Presentation/GeneralLayout/menclose/menclose-1i.html

(Issue 158) is one of them, but I can also mention

MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-1.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-2.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-3.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-4.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-5.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-6.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-7.html

MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-1.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-2.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-3.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-5.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-1-2.html

MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded1.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-3.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-4.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-5.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-6a.html

MathMLToDisplay/Presentation/TokenElements/mspace/mspace-3.html

MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-1.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-2.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-3.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-4.html

and probably more.

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 22, 2012

Yes, we've seen similar issues (as Fred points out). It looks like Chrome has gotten more touchy about this. I am looking into it, and will see what can be done about it.

@ghost ghost assigned dpvc Aug 22, 2012

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 22, 2012

Davide P. Cervone
Make Chrome use px rather than em for better vertical alignment, and …
…force placeBox to round to nearest pixel for baseline alignment spans. Also check that the height matches what we actually specified (but this means a page reflow, which will cost some performance in Chrome). Resolves issue mathjax#295.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 22, 2012

Davide P. Cervone
Make Chrome handle horiztonal stretchy characters better so that the …
…ends don't misalign with the middle. This was affecting the overline in the square root, for example. Resolves a second part of issue mathjax#295
@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 22, 2012

The issue295 branch of my fork of MathJax should take care of this, and the related problem with elongated fraction bars and overlines in square roots that was reported on StackExchange, on the MathJax user's forum, and in issue #276.

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 22, 2012

It turns out that there is some variation in the heights of elements even when they are given explicitly in the CSS for the element. I have seen an element with style="height:38px" have an offsetHeight of 39px. It is these extra pixels that are shifting the characters around. The solution includes several features to help minimize the occurrence of this, including a dynamic check that compares the actual height to the specified height, but there are still some situations where it can still occur. For me, they all require zooming in or out, but there may still be some combinations of scaling that produce the error. It should be vastly less likely, however.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Aug 23, 2012

The issue295 gives much better results in Chrome, especially with all these MathMLToDisplay/Presentation/CSS/* tests in HTML-CSS, which failed by a small vertical shift. Seems to have fixed most of the failures mentioned above too. There are still some small positioning/sizing errors, but these happen with other browsers too.

One problem: the changes break numalign/denumalign in mfrac in HTML-CSS. See

MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-2.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-3.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-5.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-6.html

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 23, 2012

OK, I've looked into this, and it turns out that switching from the relative measure (em) to an absolute one (px) does introduce some complications that I will need to address. So this branch isn't ready yet.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 24, 2012

Davide P. Cervone
Don't make mspace use handleSize, since it doesn't need to have font-…
…size set. This was causing problems with the change to px from em's in Chrome. Should resolve problems Fred found with issue mathjax#295.
@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 24, 2012

I think I have taken care of the issues in the mfrac examples (and I don't think I've introduced any new issues, at least I hope so). So I think we can try it again.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2012

Results on Chrome look good... still waiting Opera and Firefox results.

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 28, 2012

Issues #299 and #303 are being handled by this fix, so I've marked them as duplicates of this one.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2012

I just published the results and they look good.

=> Ready for release

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2012

Davide, I think you can merge this branch into develop

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 28, 2012

Thanks, I will on my next round of merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.