math fonts too large, chrome and firefox, Ubuntu
Dan Christensen
papers in a mathematics journal that I manage. However, in my first
test I'm finding that the output doesn't look good because the math
fonts are too large, particularly the capital letters.
I'm using the latest version (see details at end), via:
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
You can see my test page here:
http://jdc.math.uwo.ca/mathjax.html
I see the problem on all the browsers I have tried:
firefox 11.0 on Ubuntu natty 11.04
firefox 11.0 on Ubuntu maverick 10.10
chrome 17.0.963.83 on Ubuntu maverick 10.10
chrome 18.0.1025.142 on a different Ubuntu maverick 10.10 machine
For the first three, the lower case x is about the right size, but the
capitals are about 15% too large. For the last one, all of the math
fonts are too large.
I have attached screenshots of chrome 17 @ 100% (small fine, capitals
much too large), chrome 17 @ 89% (small letters still fine, capitals
still too large), and chrome 18 @ 100% (all too large).
Is this something that my users will see as well, or something odd
about the three test machines and four browsers that I used?
Is there a way for mathjax to choose the scaling for capital letters
to be different from the scaling for lower case letters?
Thanks for any help,
Dan
MathJax.js v2.0.3
MathML Input Jax v2.0
TeX Input Jax v2.0
HTML-CSS Output Jax v2.0.1
NativeMML Output Jax v2.0.1
mml Element Jax v2.0
MathEvents Extension v2.0.1
MathMenu Extension v2.0.1
MathZoom Extension v2.0
TeX/AMSmath Extension v2.0
TeX/AMSsymbols Extension v2.0
TeX/noErrors Extension v2.0
TeX/noUndefined Extension v2.0
mml2jax Extension v2.0
tex2jax Extension v2.0
Chrome v17.0.963.83 — otf fonts
Davide P. Cervone
matches that of the ex-height of the surrounding font. That is why
the lower-case letters match pretty well for you. This does mean,
however, that the upper-case letters will only match well if the ratio
of the height of the capitals to that of the lower-case letters is the
same in the page font as it is in the MathJax fonts. So how well the
MathJax fonts match the surrounding ones will depend on the font
actually in use. Some fonts work better with the MathJax fonts than
others. The page you link to does not set a page font itself, so it
is the browser's default font that will be used. that may account for
your different results on different systems.
MathJax doesn't actually have access to the font metric data, so it
has to deduce the ex-height experimentally. It does this by measuring
a box whose height is given in units of "ex". But because the box
dimensions are whole-number pixel values, the success of this method
depends on the relative size of the letters compared to the pixels on
screen, so the results are also dependent on the monitor resolution
and the default font size in the browser. When the ex-height doesn't
match a whole-number of pixels very well, this measurement can be
fairly far off, and the matching that MathJax does can be off by a bit.
So there are a number of factors that affect the MathJax font size used.
> Is this something that my users will see as well, or something odd
> about the three test machines and four browsers that I used?
Depending on their default font, their screen resolution, and the
default font size in their browsers, they may or may not have similar
results. It can help to specify page fonts that have a capital-to-
lower-case height ration closer to that of the MathJax fonts. I have
not done a thorough investigation of this, but here are some fonts on
my Mac that work well at the size that I use for my viewing:
Georgia
Time New Roman
Palatino
Didot
Century Schoolbook
Baskerville
Gill Sans
Batang
I haven't looked to see what Windows or Linux fonts work well. Of
course, there is no guarantee that your viewers will have one of these
fonts available. You could try Google Web Fonts if you really want to
enforce a match, but again, I haven't gone through the available fonts
to see which have comparable height ratios.
> Is there a way for mathjax to choose the scaling for capital letters
> to be different from the scaling for lower case letters?
Not currently, and I don't think it would be a good idea. The
characters in the font are designed to work well together, and if you
start scaling them differently, they won't look good. For example,
the height of the parentheses are set to work with the capitals as
they now stand, but if you scale the capitals, they would be the wrong
size. Many characters are neither capital nor lower-case letters, and
it is not clear how they should be scaled.
I think it is better to choose a page font that works well with the
MathJax fonts rather than forcing differential scaling on the capitals
letters in the MathJax fonts.
Of course, it would be possible to use the MathJax_Main font for your
page font if you set up the CSS correctly. That would make them match
properly. (There is also the Latin Modern fonts, which are based on
the TeX Computer Modern fonts, but with more support for European
alphabets. These are free fonts that would match the MathJax fonts
well, with good coverage for use as a text font for web pages.)
Davide
> <chromev17-100.png><chromev17-89.png><chromev18-100.png>
Dan Christensen
Davide P. Cervone
> > matches that of the ex-height of the surrounding font. ...
> > MathJax doesn't actually have access to the font metric data, so it
> > has to deduce the ex-height experimentally. It does this by
> measuring
> > a box whose height is given in units of "ex". But because the box
> > dimensions are whole-number pixel values, the success of this method
> > depends on the relative size of the letters compared to the pixels
> on
> > screen, so the results are also dependent on the monitor resolution
> > and the default font size in the browser.
>
> Can you make the box large enough that the pixel-rounding error is
> small relative to the box size?
I already use a box that is larger than 1ex in order to try to reduce
the error (it doesn't help very much). If you mean use a larger font
size, that doesn't work well either, since the fonts don't seem to
scale entirely linearly. It all is very sensitive to small changes,
and seems to work better in some browsers than others.
> > When the ex-height doesn't match a whole-number of pixels very well,
> > this measurement can be fairly far off, and the matching that
> > MathJax does can be off by a bit.
>
> In my tests, it is sometimes quite far off, such as the
> chromev18-100.png
> attachment to my first message or the first line in the attachment
> to this
> image. It seems to be much more than a pixel difference, so I
> wonder if
> there is a bug here. Also, I just upgraded chrome from v17 to v18
> on another
> machine, and now see the same discrepancy there, even at large font
> sizes:
> The math x is much larger than the non-math x.
Chrome 18 seems to have a larger number of bugs than usual, and since
your results changed when you upgraded the browser, it sounds like it
might be a browser bug. The measurements are based on the font's ex-
height, and not all fonts have that value correctly set, and not all
browser handle it correctly even when it is. For example, IE prior to
v9 (or was it 8?) always reported the ex-height as 1/2 em no matter
what the font said it was. Perhaps Chrome 18 has messed up the ex-
height values. I know that Chrome 18 on windows has some font-based
problems (like incorrectly antialiasing the fonts when certain
foreground colors are used), so there may be other problems as well.
I will check into it further.
> Are there other ways that mathjax could infer the surrounding font
> size? Is there a way for it to sample the size of more than one
> letter and average the results?
Javascript doesn't have direct access to the font metrics, and so has
to deduce the metrics from the things it does have access to. MathJax
uses a box with dimensions given in ex's to determine the pixels-per-
ex value (and it uses dimension larger than 1ex as you suggest in
order to reduce the error). It can not measure individual character
heights, because it has no access to that information (all the
characters in the font produce boxes with the same height and depth).
So your suggestion of measuring more than one character is no
possible. Note that an "ex" is a unit of measurement (like px and
pt), but this one, like em, is based on information about the font.
So when I say an ex-height, I mean this value, not the actual height
of the "x" character, which MathJax can't measure. The font is
supposed to have the ex-height set to the actual height of the "x",
but not all do.
> A separate but related point I'd like to make is that in latex, the
> math x is *smaller* than the regular upright x.
That will depend on the fonts you are using (and perhaps also on the
viewer). With the Computer Modern fonts, that isn't the case. The
attached image shows the results of your x \emph{x} $x$ for me using
the standard computer modern fonts in the amsart document class. The
x's are the same height in all three forms (actually, the italic ones
are a pixel higher at this resolution).
> This suggests to me that mathjax
> should aim to be a bit smaller than the surrounding text.
Even if that were the case with TeX (which is isn't when the CM fonts
are used), I don't think that would be a good idea for MathJax,
because at screen resolutions, this would make subscripts and
superscripts look worse.
> Strangely, if I "scale all math" to 88%, the math capitals are
> noticably smaller than the non-math capitals. But if I "scale all
> math" to 89%, the math capitals are noticably larger. Do the
> math fonts come in a few discrete sizes, or are they scalable?
> If they are scalable, why does the size jump so much?
The web fonts only come in one size, and should scale properly. The
IMAGE fonts come in different sizes, so you would see a jump using
that. Can you use the About MathJax item in the MathJax menu to
confirm that you are using the web fonts not image fonts (it will be
listed as "using web TeX fonts" or "using Image fonts" just under the
MathJax title at the top)?
I am not able to reproduce the effect.
> > It can help to specify page fonts that have a capital-to-
> > lower-case height ratio closer to that of the MathJax fonts. I have
> > not done a thorough investigation of this, but here are some fonts
> on
> > my Mac that work well at the size that I use for my viewing:
> >
> > Georgia
> > Times New Roman
> > ...
>
> I have tried both of those, and still see capitals that are too
> large at
> some font-sizes.
I said these worked for me at the sizes I use. They may not work as
well at all sizes. If I recall correctly, you are using Ubuntu linux,
while I am using a Mac, so your results may be different. Do you
actually have Georgia on your Ubuntu system? I do not know how
consistent the renderings are from one OS to another.
> > I haven't looked to see what Windows or Linux fonts work well. Of
> > course, there is no guarantee that your viewers will have one of
> these
> > fonts available.
>
> I don't know very much about how fonts work on web pages, but I need
> to choose something that will work in essentially all browsers (at
> least those that support mathjax). It would be really helpful if
> someone who knows more about this could recommend a font that looks
> good with mathjax and reliably works across multiple browsers and
> operating systems. And once a suggestion is made, that font could be
> specified in the sample-tex file linked to above.
I'm pretty sure you are going to have trouble finding a font that does
what you want for all systems at all sizes. The only thing I think
would work well in practice would be to use the MathJax web fonts
themselves as your text fonts. You could use one of the "bullet-
proof" @font-face approaches to link to the CDN copies of the
MathJax_Main fonts and use those as your main text font. But Firefox
has trouble printing web fonts, while IE and Opera have problems using
font-weight and font-style with web fonts, so this may not be as easy
as you would like. But it would be height-compatible with the math
fonts.
Davide
Dan Christensen
> Perhaps Chrome 18 has messed up the ex-
> height values. I know that Chrome 18 on windows has some font-based
> problems (like incorrectly antialiasing the fonts when certain
> foreground colors are used), so there may be other problems as well.
> I will check into it further.
Ok, thanks. This kind of thing must cause you no end of trouble.
>> A separate but related point I'd like to make is that in latex, the
>> math x is *smaller* than the regular upright x.
>
> That will depend on the fonts you are using (and perhaps also on the
> viewer). With the Computer Modern fonts, that isn't the case.
Right, I take that back. I think it was partially an illusion due
to the lines on the math-italic x being thinner, and may have also
been an artifact of acroread's rendering at a certain scaling.
>> Strangely, if I "scale all math" to 88%, the math capitals are
>> noticably smaller than the non-math capitals. But if I "scale all
>> math" to 89%, the math capitals are noticably larger. Do the
>> math fonts come in a few discrete sizes, or are they scalable?
>> If they are scalable, why does the size jump so much?
>
> The web fonts only come in one size, and should scale properly. The
> IMAGE fonts come in different sizes, so you would see a jump using
> that. Can you use the About MathJax item in the MathJax menu to
> confirm that you are using the web fonts not image fonts (it will be
> listed as "using web TeX fonts" or "using Image fonts" just under the
> MathJax title at the top)?
It says "using TeX web fonts", and later "Chrome v18.0.1025.151 — otf
fonts". The fonts definitely seem to have distinct steps when the
scaling is adjusted.
With the scaling set to 100%, I just used chrome 18 to view my test
page, and used the Inspect Element tool to look at the document tree.
Around the math "x" is the span:
<span style="display: inline-block; position: relative; height: 0px;
font-size: 116%; width: 0.593em; ">
Note the font-size 116%. If I manually override that to anything
from 104% to 115%, the lower case math x looks just right (and
doesn't change for any of those values). The capital X also has
a scaling of 116%, and looks right for scalings in the range
91% to 103% (with a slight narrowing at the lower end). The
ranges don't overlap, unfortunately.
Ah, I see that the Inspect Element tool shows me the computed font-size
in px, and that goes in integer steps. For example, when the percentage
above is 103%, the font-size is 16px, but when the percentage is 104%,
the font-size is 17px.
I also tried using "font-size: 16.5px", and it rounds to the nearest
integer. So I think this explains the discrete jumps that I am seeing.
Is it correct browser behaviour?
It doesn't explain why 116% is chosen, when anything from 91% to 115%
is better. If it is correct that the font-size must be set in integer
pixel values, I wonder if mathjax could get a better match by setting
the px value directly rather than indirectly via a percentage?
>>> Georgia
>>> Times New Roman
>>
>> I have tried both of those, and still see capitals that are too large
>> at some font-sizes.
>
> I said these worked for me at the sizes I use. They may not work as
> well at all sizes. If I recall correctly, you are using Ubuntu linux,
> while I am using a Mac, so your results may be different. Do you
> actually have Georgia on your Ubuntu system?
I don't know how to find out what font is actually being used. I
do know that when I specify Georgia, the font changes, but it might
be some other font being used.
> I'm pretty sure you are going to have trouble finding a font that does
> what you want for all systems at all sizes. The only thing I think
> would work well in practice would be to use the MathJax web fonts
> themselves as your text fonts. You could use one of the "bullet-
> proof" @font-face approaches to link to the CDN copies of the
> MathJax_Main fonts and use those as your main text font.
Can you link to an explanation of how to do this?
> But Firefox has trouble printing web fonts, while IE and Opera have
> problems using font-weight and font-style with web fonts, so this may
> not be as easy as you would like.
Hmm, life is never easy... But it might be useful to try the
MathJax_Main font, just as a test.
Dan