Page MenuHomePhabricator

Font size problems in MathML with SVG or PNG fallback mode
Closed, ResolvedPublic

Description

Looking at https://en.wikipedia.org/wiki/Squared_triangular_number using chrome on a Mac the font size used in the linline equations seems to be too big. Ideally the font size would match the surrounding text. Another user mentioned the maths appears too bold, which might be a font size issue.
https://en.wikipedia.org/w/index.php?title=Wikipedia_talk:WikiProject_Mathematics&diff=631269666&oldid=631253822


Version: unspecified
Severity: normal
OS: Mac OS X 10.9
Platform: Macintosh
See Also:
T73958: Try to adjust the blacker parameter for the SVG image

Details

Reference
bz72553

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 3:52 AM
bzimport added a project: Math.
bzimport set Reference to bz72553.
bzimport added a subscriber: Unknown Object (MLST).

I see something similar on linux. For SVGs, MathJax emits sizes and offsets in ex, which is the x-height of the CSS font. This ensures that the math scales relative to the CSS font. However, exactly matching the size of the text might not be desirable, as small parts like indices might get hard to read.

There are some parameters we can tweak: http://docs.mathjax.org/en/latest/options/SVG.html

It is possible that the increased size is caused by minScaleAdjust, which aims to ensure that small indices remain legible. Another setting to look into is matchFontHeight. We'll have to experiment a bit.

Pkra added a comment.Oct 28 2014, 7:19 AM

@GABRIEL in case it's not clear, those options refer to MathJax not MathJax-node. To make these work in MathJax-node you'd have to load a richer page template and use not just a DOM simulator like jsdom but a full HTML/CSS engine.

Long story short, you can specify ex height in MathJax-node https://github.com/mathjax/MathJax-node/blob/master/lib/mj-single.js#L42

However, assuming Wikipedia's CSS has several font options, there's a good chance somebody will always see sub-optimal results. No way around this with static images.

@Pkra this basically means that it can't be fixed?

Physikerwelt moved this task from Incoming to future on the Math board.Dec 9 2014, 3:47 AM
Pkra added a comment.Dec 9 2014, 1:50 PM

@Physikerwelt I don't have enough information.

BTW the "boldness" in the OP is due to the fact that SVGs don't get subpixel rendering. There's a "blacker" configuration option to control stroke width but SVG browser implementations vary quite a bit. This effect is less prominent if the surrounding font size is larger.

GWicke added a comment.EditedDec 9 2014, 4:22 PM
In T74553#762349, @Pkra wrote:

However, assuming Wikipedia's CSS has several font options, there's a good chance somebody will always see sub-optimal results. No way around this with static images.

@Pkra, if all measurements are relative to ex (and afaik currently only the margins remain px-based?), shouldn't at least the size scale well relative to whatever the CSS fonts specify?

https://en.wikipedia.org/wiki/X-height#Use_in_web_design might also be relevant:

The use of ex in dimensioning objects, however, is less stable than use of the em across browsers. Internet Explorer, for example, dimensions ex at exactly one half of em, whereas Mozilla Firefox dimensions ex closer to the actual x-height of the font, rounded relative to the font's current pixel height. Thus, the exact ratio of ex to em can also vary by font size within a browser if the determined values are rounded to the nearest whole unit. For example, a browser calculating an x-height of 45% on a font 10 pixels tall may round ex to either 4 pixels or 5 pixels or leave it at 4.5 pixels.

Pkra added a comment.Dec 12 2014, 10:41 AM

shouldn't at least the size scale well relative to whatever the CSS fonts specify?

My comment was referring to a situation where mathoid overrides this.

Jdforrester-WMF moved this task from future to Next-up on the Math board.Dec 17 2014, 3:29 AM
Pkra added a comment.Jan 9 2015, 10:46 AM

@GWicke Just FYI. I've recently looked into "boldness" problem of the SVG output. It seems cross-browser/platform problems with blacker have resolved and blacker: 1 now yields consistent results that are closer to font rendering. We'll be looking into this in more detail after v2.5 is out of beta.

Physikerwelt moved this task from Next-up to Incoming on the Math board.Apr 28 2016, 2:36 AM
Mdann52 added a subscriber: Mdann52.May 1 2017, 9:37 PM

Any progress on this? Just had another report on this issue (OTRS ticket 2017030910017821). Screenshot attached.

Liuxinyu970226 added a subscriber: Liuxinyu970226.
Pkra closed this task as Resolved.EditedDec 7 2018, 8:05 AM
Pkra claimed this task.

I believe this was fixed a while ago. If it's still an issue, please re-open.