Some MathJax character-related problems in Android webview

[pkra]

This is mostly to investigate and to check if other people have experienced similar problems.

I often have small issues with some characters not showing in Android's webview (at least on 4.1, 4.2).

For example, viewing this post in a webview (via an RSS-reading app) the $\latex$ in the OP was missing only the A.

This might be a webfont detection problem since I think (but have yet to confirm) that it's always some "special" characters (e.g., fraktur or small sizes).

[fred-wang]

In the $\latex$ command, the A is reduced by the increase of scriptlevel and positioned by mpadded. I don't think font is involved here?

[pkra]

Oh, that would be worse. Maybe Davide can clarify. I guess this brings up the problem of better testing on mobile devices. We need to improve situation. I think Selenium has an Android solution which looks like just installing an APK (we could use an Android VM like androvm?)

[fred-wang]

Installing the Selenium APK is the trivial part, I already did some experiments. But I only tried the Android emulator on a Linux virtual machine and that was very very slow... It's probably worth trying a more efficient set up.

[dpvc]

The example page loads fine for me in the Android Browser app, which (I assume) uses a webview, in Android 4.1.2. There should not be a font issue, as the same font is used for all the letters in the symbol, even though some are sized. Not sure what else to suggest.

[pkra]

I think I'm able to reproduce this. I'll send you an APK to try.

[pkra]

BTW: no webview is something different from the browser. But IIUC it's the only thing apps have access to.

[dpvc]

I didn't mean that webview was the browser, but I assumed the browser used a webview. I'll take a look at your code and see if I can get it to run to test with.

[pkra]

Ah, not sure, cf. https://developers.google.com/chrome/mobile/docs/faq. Then again from http://www.zdnet.com/blog/burnette/google-io-2012-android-fireside-chat/2637:

WebView will be converted to Chromium based code. Android and Chrome engineers are working together.

Since I only experienced this on JellyBean, maybe the actual reason is that change to WebView...

[pkra]

Hm. Who added the "cannot reproduce" label? I can reproduce this with the app I linked to.

[taninamdar]

Even I suffer from the same problem for the letter 'A' and \right) in math mode in Nexus 7. Is there any solution to this?

[bosbeles]

I have a nexus 4 with android 4.3.
Google chrome displays inconsistent font sizes in some sites like http://geomania.org/forum/1988-82/3-3158/msg11934/?topicseen#new
When i look at http://geomania.org/forum/2001-41/1-3044/ with dolphine it does not show capital A s but there is no inconsistency problems on font sizes.
The above site does not have any problem on ios safari, on android 2.x platforms. This is not the complete list.

[pkra]

Thanks. Yes, Dolphin exhibits the same webview bug because it's using webview -- that should make it easier to track this issue down.

Any Google chrome issue would be unrelated to this bug since Chrome does not use webview but we'll check it out.

[Erhannis]

It appears that arrow marks (like, over vector names) are affected, as well. Has anyone found a full workaround or fix, yet?

[pkra]

@dpvc I've added this to the milestone. Are you still unable to reproduce this?

[Erhannis]

FYI, I recently updated to Android 4.4.2, and once I did so, the problem went away, as far as I can tell.

[pkra]

@Erhannis that's expected. Android 4.4 (KitKat) finally updated webview from an ancient WebKit build to a relatively recent Blink/Chromium build (not that this didn't also break other things). So yes, this is only a problem for <4.4 (which is 90%+ of the Android market unfortunately).

[dpvc]

Are you still unable to reproduce this?

@pkra, I am not able to reproduce on a Droid Razr Maxx running 4.1.2. The site listed by bosbeles above loads fine for me in Dolphin. Pages on math.stackexchange.com that include A's in math mode load fine for me. I am not able to see any missing characters anywhere. Not sure what the conditions are that cause the problems for you all.

[pkra]

@dpvc how strange. I see this reliably on a Galaxy Nexus (4.2.2) and saw this on my Nexus 7 before the KitKat update.

But I just tried this on AndroVM -- and it doesn't show there anymore. Trying browserstack doesn't work either because all screenshots I tried timed out before the rendering is done.

Pfft. I'm out of ideas. But I'll show it to you on our next video call...

[dpvc]

I'll show it to you on our next video call...

I believe you, I just don't know how to reproduce it so that I can debug it.

[nikolajvonholck]

What is the best way to check if any other glyphs are affected? Do you have some sort of test page containing every glyph so that I can try rendering it?

Currently I know of these:

• Glyph 0029 in MathJax_Size2-Regular.otf = \right)
• Glyph 0029 in MathJax_Size3-Regular.otf = \right)
• Glyph 0029 in MathJax_Size4-Regular.otf = \right)
• Glyph 0041 in MathJax_Math-Italic.otf = A
• Glyph 0041 in MathJax_Math-BoldItalic.otf = _A_
• Glyph 20D7 in MathJax_Main-Regular.otf = \vec{} (unconfirmed)

[dpvc]

What is the best way to check if any other glyphs are affected? Do you have some sort of test page containing every glyph so that I can try rendering it?

Well, I have font tables that show all the glyphs, but they may not be in the most convenient form for this task. I've attached an archive that includes the tables (and the fonts that it calls on). It is broken down by font and Unicode character block. At the bottom are pages that include all the glyphs in each font, and at the right, all the fonts for a particular block. The bottom right corner is all glyphs from all fonts, but it would be hard to tell if one was missing there. your best bet is probably the ones at the bottom of the table. Note that the light grey boxes should contain glyphs and the dark grey indicate that that glyph is in another font.

I've attached the archive here, but it may not make it to GitHub. Not sure they will list it as an attachment somehow. [Edit: apparently they don't]

Thanks for looking into this. I look forward to hearing your results.

Davide

[nikolajvonholck]

I don't think the archive made it to GitHub. Would you please provide another way to download it or send it to my mail:

[email protected]

[pkra]

Here it is https://redbooth.com/d/03957cf9f7acf775

[nikolajvonholck]

Thank you for the neat font tables!

We have just completed a thorough check of all the glyphs in every font using the Android built-in browser.

We have found the following pattern

• It is always glyph number 3 in the font that is invisible. This can explain the invisible right parenthesis, capital A and the quotation mark (see more in the detailed results below). The reason for this is still unknown, but all glyphs at position 3 seems to show up when we tried inserting our own edited font files (reason unknown).
• All glyphs in the “combining diacritical marks” unicode blocks (0300 - 036F and 20D0 - 20FF) are rendered using some sort of Android-system-sans-serif fallback font as shown in screenshot no. 1. We suspect that the issue with over-dot (0307) and vector arrow (20D7) not rendering is caused by the Android system font not implementing those glyphs and therefore displays nothing. (we cannot currently confirm that this is in fact the case).

Do you have any idea of what is going on with WebKit and the otf-fonts and how it can be fixed?

Screenshot no 1:

Screenshot no 2:

We provide our detailed results below:

MathJax_Main (regular) Character Tables
MathJax_Main-Bold Character Tables
MathJax_Main-Italic Character Tables (notes about 20D7 and 0338 aren't relevant to this font at these glyphs aren’t part of it)
Basic Latin:

• 0022 (quotation mark) is invisible (glyph no. 3)

Combining diacritical marks:

• 0307 (over single dot) - both the letter and dot are invisible.
• 0338 (slash through) - the letter a is showing, but the slash is invisible.
• 20D7 (vector arrow {vec{}) - the letter a is showing, but the vector arrow is invisible.

Other notes:

• The letters in Combining Diacritical Marks: 0300 - 036F & 20D0 - 20FF are using some sort of fallback “android sans serif” font. Screenshot no. 1.
• Only in Main and Main-Bold: Glyph 20D7 is also affected and looks exactly like glyph 0338.
• 030B (over double quote) is showing but has been offset to the right by about half the width of the letter a. Screenshot no. 1.

MathJax_Math-Italic Character Tables
MathJax_Math-Bold-Italic Character Tables
Basic Latin:

• 0041 Capital A is invisible (glyph no. 3)

MathJax_Size1 Character Tables
MathJax_Size2 Character Tables
MathJax_Size3 Character Tables
MathJax_Size4 Character Tables
Basic Latin:

• 0029 Right parenthesis is invisible (glyph no. 3)

Combining diacritical marks:

• 0302 (over hat \hat) - the letter a is showing, but the hat is invisible.

Other notes:

• The letters in Combining Diacritical Marks: 0300 - 036F are using some sort of fallback “android sans serif” font. Screenshot no. 2.

MathJax_AMS Character Tables
Basic Latin:

• 0042 Capital B is invisible. (glyph no. 3)

Other notes:

• The letters in Combining Diacritical Marks: 0300 - 036F are using a fallback font (sans serif). Screenshot no. 2.

MathJax_Caligraphic Character Tables
MathJax_Caligraphic-Bold Character Tables
Basic Latin:

• 0031 Number 1 is invisible. (glyph no. 3)

MathJax_Fraktur Character Tables
MathJax_Fraktur-Bold Character Tables
Basic Latin:

• 0022 (quotation mark) is invisible (glyph no. 3)

MathJax_SansSerif Character Tables
MathJax_SansSerif-Bold Character Tables
MathJax_SansSerif-Italic Character Tables
Basic Latin:

• 0022 (quotation mark) is invisible (glyph no. 3)
  Combining diacritical marks:
• 0307 (over single dot) - both the letter and dot are invisible.

Other notes:

• The letters in Combining Diacritical Marks: 0300 - 036F are using some sort of fallback “android sans serif” font. Screenshot no. 1.
• 030B (over double quote) is showing, but has been offset to the right by about half the width of the letter a. Screenshot no. 1.

MathJax_Script Character Tables
Basic Latin:

• 0042 Capital B is invisible (glyph no. 3)

MathJax_Typewriter Character Tables
Basic Latin:

• 0022 (quotation mark) is invisible (glyph no. 3)

Other notes:

• The letters in Combining Diacritical Marks: 0300 - 036F are using some sort of fallback “android sans serif” font. Screenshot no. 1.

MathJax_Greek Character Tables
MathJax_Greek-Bold Character Tables
MathJax_Greek-Italic Character Tables
MathJax_Greek-Bold-Italic Character Tables

• All glyphs are invisible (the otf font files does not exist)

MathJax_WinChrome Character Tables
Basic Latin:

• 0054 greek tau is invisible (glyph no. 3)

MathJax_IE6 Character Tables
Basic Latin:

• E200 \leftarrow is invisible (glyph no. 3)

[dpvc]

Thanks for the very thorough data collection and analysis. It is very helpful to have these tests performed.

It certainly does seem that Android has a problem accessing the third glyph in the font. Very strange. That could account for the behavior you reported in issue 369 when you changed the A and the B disappeared. (The A may have been moved to the end of the list and the B became the third character, for example.)

It looks like the only other problem is with the combining characters. These are notoriously troublesome, and give problems in several browsers. I'm not sure why the letters are showing up in sans serif for these, as they are definitely requesting the MathJax fonts for the letters and accents (and in exactly the same way they are requested for all the other characters). Note that the accents are in the wrong font, as well. I'm not sure what can be done about that. Fortunately, MathJax will substitute non-combining forms for most of these. The only one that doesn't have a non-combining version is the vector arrow.

As for the Greek fonts, those are only used by IE, so you can ignore them. Same for the IE6 and WinChrome fonts.

[nikolajvonholck]

dpvc requested a similar test of the AsanaMathJax-fonts.

Summary

• With these fonts it has been a bit difficult to determine the exact glyph number of some of the glyphs. There seems to be a ".notdef" glyph in-between some of the glyphs in the font files. We provide all possible glyph numbers separated by slashes when this is relevant. Note that 3 is always a possible position which leads us to assume that we are dealing with the same problem as with the TeX-fonts.
• Same problem with "Combining Diacritical Marks: 0300 - 036F & 20D0 - 20FF", but the letter a seems to use the Asana Font while the diacritical marks are using the fallback font. This is very clear when you look at glyph 0303 in the screenshots (see below).

We provide our detailed results below:

Alphabets-Regular

• Glyph no 3/4/5 (0385) is invisible.

Arrows-Regular

• Glyph no 3/4 (219D) is invisible.

DoubleStruck-Regular

• Glyph no 3/4 (210D) is invisible.

Fraktur-Regular

• Glyph no 3/4 (2128) is invisible.

Latin-Regular

• Glyph no 3 (00A2) is invisible.

Main-Regular

• Glyph no 3 (0021) is invisible.

Main-Regular

• Glyph no 3 (0021) is invisible.
• Same problem with "Combining Diacritical Marks: 0300 - 036F & 20D0 - 20FF", but the letter a seems to use the Asana Font while the diacritical marks are using the fallback font. This is very clear when you look at glyph 0303. See screenshots below.

Marks-Regular

• Nothing seems to be invisible.
• Same problem with "Combining Diacritical Marks: 0300 - 036F & 20D0 - 20FF", but the letter a seems to use the Asana Font while the diacritical marks are using the fallback font.

Misc-Regular

• Glyph no 3/4/5 (2071) is invisible.

Monospace-Regular

• No invisible glyphs in Monospace-Regular, but you do not include what could be glyph no 3 (in this case an unassigned glyph NAME=".notdef") in the tables.

NonUnicode-Regular

• Glyph no 3/4 (E001) is invisible.

Normal-Regular

• Does not have any issues displaying glyph no 2/3 (210E), but you do not include glyph no 3/4 in the tables. This is glyph EFFD. (a double dot ..)

Operators-Regular

• Glyph no 3/4 (220A) is invisible.

SansSerif-Regular

• No invisible glyphs in SansSerif-Regular, but you do not include glyph no 2/3 (EFFD) or glyph no 3/4 (EFFE) in the tables (both glyphs depicts a double dot ..)

Script-Regular

• Glyph no 3/4 (210B) is invisible.

Shapes-Regular

• Glyph no 3/4 (2423) is invisible.

Size1-Regular
Size2-Regular
Size3-Regular

• Glyph no 3 (0029) right parenthesis is invisible.
• Same problem with diacritical marks (fallback diacritical marks, but correct Asana a-letter).

Size4-Regular
Size5-Regular

• It is unclear if glyph no 3 is an unassigned .notdef glyph or 0302, but 0302 is still affected by the issue rendering diacritical marks (fallback diacritical marks, but correct Asana a-letter).

Size6-Regular

• Glyph no 3/4 (E000) is invisible.

Symbols-Regular

• Glyph no 3/4 (2304) is invisible.

Symbols-Regular

• Glyph no 3/4 (2304) is invisible.

Variants-Regular

• Glyph no 3/4 (E201) is invisible.

[dpvc]

Thanks for going the extra mile to test these fonts out. It does look like the 3rd character issue is a general one with web fonts, as is the problem with the combining diacriticals.

I suppose it would be possible to force the third character to be something not needed, but I hate to put out a whole new set of fonts just for this bug. Only two of the combining marks are critical: U+20D7 (used by \vec) and U+0338 (used in \not). I think \not can be redefined in Android to be something like \rlap{/} to get close to the same effect. I guess the vector arrow could be replaced by U+2192 (right arrow) or maybe U+21C0 (right harpoon barb up).

I suppose an extra font (like MathJax_WinIE or MathJax_WinChrome) could be made that includes the missing 3rd characters and remap those to the new font. Kind of a pain, but at least it would not require everyone who has installed the MathJax fonts to get new copies. Perhaps that is the way to go, here.

As for the characters U+EFFD through U+EFFF, these are special characters that MathJax uses to determine the font version and its style/weight. Because they are in all the fonts and only used internally, I didn't include them in the tables.

You asked in the other thread about how the MathJax fonts where created: they come from mftrace, which is a program that turns the TeX bitmap fonts into outline fonts by tracing the outlines. The AsanaMathJax fonts were created by breaking up the actual Asana font, so the glyphs are directly from the original font. The tools used for the MathJaxTeX and AnasnaMathJax fonts were not the same, it seems to be more an Android problem than a MathJax one.

[nikolajvonholck]

Thanks for the details!

An extra font for Android sounds like the best solution available. Would it be possible to add non-combining forms of U+20D7 (\vec) and U+0338 (\not) into this font as well so that MathJax can use these on Android? Wouldn't this give the most consistent look on all platforms?

If you need any more assistance testing this issue we'll be happy to help.

[dpvc]

Yes, a non-combining form for U+20D7 could be provided. There is already a non-combing version of U+0338, but the way it is used can't really be replaced by that. Something special will have to be done for that.

Thanks for your offer to help test. I will certain trace you up on that when there is something to test.

[cben]

Don't know if still relevant for your android testing trouble but this is easily reproduced on SauceLabs's free for open source service, e.g.
https://saucelabs.com/bugs/ffebfca045d24fd19e6cd14b2a08e692

[dpvc]

Thanks for the pointer, @cben. That may be a way for me to work on it directly.

[pkra]

@dpvc check the redbooth thread on saucelabs.