mathjax: display web page on android tablet

[chumak...@gmail.com]

Hi everyone!
I found this example on the web:
https://www.tuhh.de/MathJax/test/sample-tex.html
Downloaded it as html.
Then tuned it a little by changing the 2nd tex-notation and cdn-route (I attached resulting html to this post).
Opened it on desktop browser (looks fine):
https://gyazo.com/7ea0dcc144108a8a86129682d0d7d6e9

And then opened the same html on android chrome browser:
https://gyazo.com/15938f0d4b11463e5dac4984cd39064a

You may notice, that on the last screenshot "MN" which is part of tex-notation is larger than "MN" which is part of text. Symbols, which belong to formulas, are rendered larger. What are your guesses why it happens? And how to tune mathjax to render properly-sized symbols on android?

[Peter Krautzberger]

Hi,

Please post a link to a live example exhibiting the problem. 

Random guess is that the page is missing the meta tags for viewports, cf. http://docs.mathjax.org/en/latest/output.html?highlight=viewport#viewport-meta-tag.

Regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[William F Hammond]

I'm seeing this in Firefox 56 running under Ubuntu 16.04 on a desktop.
http://www.albany.edu/~hammond/demos/chumakzhenya.html

--

William F Hammond
Email: gel...@gmail.com
https://www.facebook.com/william.f.hammond
http://www.albany.edu/~hammond/

[Peter Krautzberger]

Thanks, Bill. I had not seen the attachement.

As guessed, this is due to missing meta tags for mobile.

Peter.

[William F Hammond]

Thanks Peter,

Do you intend the viewport <meta> for all platforms?

It does not seem to work on my Ubuntu 16.04 desktop under either

Firefox or Chrome.  See:

http://www.albany.edu/~hammond/demos/chum2c.html

[Davide Cervone]

I don't think the issue is the missing <meta> tag (though it would be good to use it anyway) because both your images show the correct output for their respective situations.  The issue is not cause by a wrong scaling being used by MathJax, but by the fact that the font used for the surrounding text is different in the two browsers.  Here's why that matters:

MathJax tries to match the size of the surrounding font by scaling its own fonts so that the ex-height matches that of the surround font. That means that lower-case letters should be approximately equal in height between the math and the surrounding text. This is true in both your examples (note that the "a" in "a ≠ 0" matches the height of the preceding "n" in both cases), so MathJax is correctly determining the ex-height of the surrounding font and is matching that.

The reason the capitals don't match is that different fonts have different ratios between the heights of their upper- and lower-case letters. In your case, with the desktop browser, the font in use has an ex-height that is roughly half the height of the capitals (the "o" is just over half the height of the following "M"), while in the android browser, the "o" is around 80% of the height of the "M".  That means the capitals in the text surrounding the math on the android are much smaller compared to the lower case letters than on the desktop browser.

Because the MathJax fonts have ex-height about half the size of their capitals, on the desktop, matching the ex-height of the surrounding font also means the capitals will match as well, because they have the same relative ex-height.  But for the android browser, matching the ex-height will mean the capitals in the math will be larger than the capitals in the surrounding font.  That is, if you get the lowercase letters to match, the uppercase ones will not (and vice versa). With fonts that have a different uppercase-to-lowercase height ratio than the MathJax fonts, you won't be able to get both to match the surrounding font at the same time. That is inherent in the design of the two fonts.

The only other possibility would be to scale the uppercase letters differently from the lowercase ones, but that would mean the weights of the characters would not match properly, and the quality of the math layout would suffer.

In order to void this, you could specify the font used for the surroundings, and make sure it is one that has ex-height of 50% to 60% of its capital letters.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

<tex_example.html>

[chumak...@gmail.com]

I will add the tags, thank you.

четверг, 2 ноября 2017 г., 1:31:56 UTC+3 пользователь Peter Krautzberger написал:

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

William F Hammond
Email: gel...@gmail.com
https://www.facebook.com/william.f.hammond
http://www.albany.edu/~hammond/

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

[chumak...@gmail.com]

I got your point that proportion:
uppercase letter size / lowercase letter size

differs for different fonts.
In my case I want to make surrounding text be exactly same size as Mathjax symbols (both uppercase and lowercase).
I understand that Mathjax supports fixed set of fonts which are listed in Mathjax docs (http://docs.mathjax.org/en/latest/font-support.html). So I have to specify one of these fonts for surrounding text.
For example, I want to use TeX font and configure Mathjax as follows:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: ["TeX"],
    preferredFonts: "TeX",
    webFont: "TeX",
    imageFont:"",
    noReflows: false
  }
});
</script>

and wrap all surrounding text into spans (I attached new version of html file).

For such configuration, which font family to specify for surrounding text?
As far as I understand, I should download "TeX" font from Mathjax repository:
https://github.com/mathjax/MathJax/tree/master/fonts/HTML-CSS/TeX/woff

define it in css via font-face declaration like that:

@font-face {
    font-family: "MathjaxTex";
    src: url('filename.woff');
}

However, the repository contains about 20 font files. Which one should I reference to make surrounding text's letters be the same height with ones in formulas?

четверг, 2 ноября 2017 г., 5:28:52 UTC+3 пользователь Davide Cervone написал: