search

thomaspark / pubcss

Format academic publications in HTML & CSS
http://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/
MIT License
794 stars 80 forks source link

Equations don't render in Chrome on Windows or Android #7

Open JoeUX opened 8 years ago

JoeUX commented 8 years ago

Hi Thomas – The equations in section 2.2 don't render properly in Chrome 50 (64-bit) on Windows 10 (64-bit). They flash into existence for a second or less, then disappear. MathJax should work fine with Chrome, so I'm stumped by this one.

Section 2.6 is similarly broken in Chrome, except that part of Definition 1 displays. The e term is gone, so it just displays "log = z".

I just checked on my phone, and it's the same behavior. Chrome 50 on Android 6.01 briefly displays the equations, but once I scrolled past them and then back up to them, they were gone.

thomaspark commented 8 years ago

Thanks, I updated the config option for using MathJax CDN and that cleared up the problem for me. Can you confirm equations are working for you?

http://thomaspark.co/project/pubcss/demo/acm-sig-sample-web.html http://thomaspark.co/project/pubcss/demo/acm-sig-sample-web-theme.html

JoeUX commented 8 years ago

Hi Thomas – Yeah, equations are rendering now in Chrome on Windows 10 and Android 6. The fourth equation in 2.6 (the long one) runs off the page in Android Chrome 50, but not in Firefox 46 for Android – it's nice and centered in Firefox, even on mobile.

Something else I noticed is that the vertical space around the equations is inconsistent across browsers. I see two distinct patterns:

  1. The space is too cramped in the Windows desktop versions of: Chrome 51, MS Edge 13, Opera 37, and Brave 0.10.0. (Opera and Brave are using Chrome's HTML engine, Blink, so their similar behavior makes sense. Edge is independent.)
  2. The space is not cramped, and looks pretty close to optimal, in: Firefox 46 for both desktop and Android, and in Chrome 50 on Android.

Which MathJax output are you using? I wonder if there are any differences between their outputs that would matter here. You might also be able to eliminate any outside server or CDN dependency by just capturing the MathJax HTML and CSS output and inserting it into the HTML file, making it static and standalone like any other document. They have a setting for that now, but I haven't dug into it. KaTex from Khan Academy also offers a static, "server-side" output feature, but I haven't played with that either. I'm amazed that either of them are able to get good equation rendering just with HTML and CSS, but that's apparently what they're doing most of the time, for newer browsers.

By the way, in this post: http://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/, your two document previews or embeds show as broken image links in Chrome 50 on Android. These are the ones after the "web version" and "interactive web paper" links in your text. (By the way, I can't see any difference between those two documents. I'm not sure what's interactive about the second one.)

Cheers,

Joe

thomaspark commented 8 years ago

Thanks for the follow-up. The equations are written in MathML, which is supported in Prince and Firefox, but not Chrome. I prefer to use MathML, and fall back to MathJax on unsupported browsers.

I'm guessing this is the cause for the inconsistent spacing you point out between Firefox and Chrome/Edge. With some additional styles applied to the MathJax generated markup, I'm sure the spacing could be made more consistent.

The images are working for me. Not sure why they would be broken in Chrome on Android. To answer your question about the difference between the base web and interactive web papers, the base is only applying an additional "screen" stylesheet to the print version to tweak the layout. The interactive also includes JavaScript to provide features like citation tooltips and image lightboxes.

7fe commented 6 years ago

This issue seems to have resolved itself at least for me.