search

readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
555 stars 185 forks source link

MathML rendering issues in Firefox #396

Open becka11y opened 9 years ago

becka11y commented 9 years ago

There are layout issues when rendering some pages containing MathML in Firefox. This seems to be related to tables but that is just a guess.

Open the Linear Algebra Book and select table of contents item Section SS Spanning Sets in Chapter 2. Advance one or two pages - note the tables often overlap in Firefox. Tested with Firefox 40.0.3 on OS X 10.10.5. Also happens with Firefox in Windows 7 Version info:
readium-js-viewer@8cc0a88c93d666b2d879095f4f09041168b3e189 readium-js@b50a498f270d58613d20ffe0de294d1ad8cfc405 readium-shared-js@8e0c0593d88a831f8a3418e1c631f76e9e75ec97 readium-cfi-js@c8a528d4858944878c1d47e0570f4ef2a547985d

Here is what it looks like for me after advancing two "pages" in from the mentioned ToC entry:

ff_badmath
becka11y commented 9 years ago

The width of the table is wider than that of the enclosing div. Not sure where/how all that is calculated, though. Seems to be an issue with the left hand side "page". Changing from display format and scroll mode both auto to display format single page still causes clipping of the page. Changing to display format auto and scroll mode document seems to work best.

pkra commented 9 years ago

MathJax has to create (un-line-breakable) tables from the underlying mtable elements. In this case, these tables are pretty huge. So I would consider this is a case of poor authoring; table layout is common in math layout, unfortunately, especially in content coming from LaTeX sources such as this epub file).

Then again, the obvious authoring solution is to use overflow=scroll on the <math> element -- and admittedly MathJax does not yet support this, or its fancier overflow=scale out of the box.

Readium could try to set some CSS overflow on MathJax's container elements. eLife Lens has some code that implements scaling via CSS transforms if that's interesting. For some ongoing research on truly responsive equations see https://github.com/mathjax/MathJax-RespEq.

danielweck commented 8 years ago

@becka11y could you please test with the latest build from develop (MathJax 2.6):

https://readium.firebaseapp.com

Direct link to EPUB-Testsuite MathML chapter:

https://readium.firebaseapp.com/?epub=https%3A%2F%2Fcdn.rawgit.com%2FIDPF%2Fepub-testsuite%2Fmaster%2Fcontent%2F30%2Fepub30-test-0100&goto=%7B%22idref%22%3A%22xhtml-mathml-001%22%7D

pkra commented 8 years ago

FWIW I wouldn't expect 2.6 to cause any change here. It is not a MathJax bug as far as I can tell.

danielweck commented 8 years ago

Thanks for the clarification @pkra :)

pkra commented 8 years ago

FWIW, on the current alpha, I don't see this issue anymore.

I do see one kind of behavior that might be a glitch (or something very smart that I don't understand);it seems to affect both math and non-math but I only saw it for fragments with math so there might be a connection: sometimes, fragments shrink see below.

readium

pkra commented 8 years ago

Argh. Looking at the wrong browser -- I still see this on FF

Sorry for causing confusion :frowning: