Long lines of MathML are not always broken correctly

[rkwright]

A user on the forum has complained that long lines of MathML (i.e. very long equations) are not broken properly and, in effect, run off the page.
Forum topic is here
I have requested more info but have not yet heard back.
Peter Krautzberger commented:
"Inline line breaking is difficult and MathJax doesn't support as much as we'd like. But it sounds like something MathJax does support, namely line-breaking an equation that's longer than the entire line it's on.
I thought Readium is configured to use MathJax's automatic line-breaking but maybe I'm wrong. Or it's a bug in which case a sample would be good."

[pkra]

=> subscribed.

Let me know if there's a sample. @danielweck I can never find the configuration of MathJax within Readium. Could you point me to it once again? (To see how line-breaks are configured.)

[danielweck]

Readium offline Chrome extension:
https://github.com/readium/readium-shared-js/blob/develop/js/views/iframe_loader.js#L95

Readium online cloud reader:
https://github.com/readium/readium-js/blob/develop/js/epub-fetch/iframe_zip_loader.js#L209

Same config code for both:

mathJax.Hub.Config({showMathMenu:false, messageStyle: "none", showProcessingMessages: true, SVG:{useFontCache:IS_INTERNET_EXPLORER}});

Full code snippet:

            var mathJax = iframe.contentWindow.MathJax;
            if (mathJax) {

                console.log("MathJax VERSION: " + mathJax.cdnVersion + " // " + mathJax.fileversion + " // " + mathJax.version);

                var useFontCache = true; // default in MathJax

                // Firefox fails to render SVG otherwise
                if (mathJax.Hub.Browser.isFirefox) {
                    useFontCache = false;
                }

                // Chrome 49+ fails to render SVG otherwise
                // https://github.com/readium/readium-js/issues/138
                if (mathJax.Hub.Browser.isChrome) {
                    useFontCache = false;
                }

                // Edge fails to render SVG otherwise
                // https://github.com/readium/readium-js-viewer/issues/394#issuecomment-185382196
                if (window.navigator.userAgent.indexOf("Edge") > 0) {
                    useFontCache = false;
                }

                mathJax.Hub.Config({showMathMenu:false, messageStyle: "none", showProcessingMessages: true, SVG:{useFontCache:useFontCache}});

                // If MathJax is being used, delay the callback until it has completed rendering
                var mathJaxCallback = _.once(callback);
                try {
                    mathJax.Hub.Queue(mathJaxCallback);
                } catch (err) {
                    console.error("MathJax fail!");
                    callback();
                }
                // Or at an 8 second timeout, which ever comes first
                //window.setTimeout(mathJaxCallback, 8000);
            } else {
                callback();
            }

[pkra]

Thanks, @danielweck. So it looks like Readium does not activate MathJax's automatic line-breaking feature. I'd say it's a useful feature (possibly user-configurable); it does have a performance penalty (since it has to lay things out, check if things are too wide, if too wide: find breakpoints, lay things out again).

See also http://docs.mathjax.org/en/latest/output.html#automatic-line-breaking.