math/tex script not rendering

[rohitvishwakarma-sf]

Bug Report

What happened?

Some text/formula in epub are not rendering in readium

On inspecting the content it was found that the element that are some scripts like

• 1

<script type="math/tex; mode=display">% <![CDATA[
\begin{align*} \text{CAGR} = g~(\text{in %}) &= \bigg[\Big( \frac{\text{GDP}_{\text{2011}}}{\text{GDP}_{\text{1950}}}\Big)^{\frac{1}{61}} - 1\bigg] \times 100\% \\ &= \bigg[\Big( \frac{42,300}{12,800}\Big)^{\frac{1}{61}} - 1\bigg] \times 100\% \\ &= 2.0\% \end{align*} %]]></script>

• 2

<script type="math/tex; mode=display">% <![CDATA[
\begin{align*} g~(\text{in %}) &= \frac{1}{61}\big(\frac{\text{GDP}_{\text{2011}}-\text{GDP}_{\text{1950}}}{\text{GDP}_{\text{1950}}}\big) \times 100\% \\ &= \frac{1}{61}\big(\frac{42,300-12,800}{12,800}\big) \times 100\% \\ &= 3.8\% \end{align*} %]]></script>

these scripts create svg element on like

<div xmlns="http://www.w3.org/1999/xhtml" class="MathJax_SVG_Display" style="text-align: center;"><span class="MathJax_SVG" id="MathJax-Element-4-Frame" tabindex="0" style="font-size: 85%; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50.419ex" height="15.561ex" viewBox="0 -3599.7 21708.2 6699.7" role="img" focusable="false" style="vertical-align: -7.2ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g transform="translate(167,0)"><g transform="translate(-16,0)"><g transform="translate(0,2013)"><use xmlns:ns1="http://www.w3.org/1999/xlink" ns1:href="#GYREPAGELLAMAIN-43"/><use xmlns:ns2="http://www.w3.org/1999/xlink" ns2:href="#GYREPAGELLAMAIN-41" x="709" y="0"/><use xmlns:ns3="http://www.w3.org/1999/xlink" ns3:href="#GYREPAGELLAMAIN-47" x="1487" y="0"/><use xmlns:ns4="http://www.w3.org/1999/xlink" ns4:href="#GYREPAGELLAMAIN-52" x="2250" y="0"/><use xmlns:ns5="http://www.w3.org/1999/xlink" ns5:href="#GYREPAGELLAMAIN-3D" x="3195" y="0"/><use xmlns:ns6="http://www.w3.org/1999/xlink" ns6:href="#GYREPAGELLANORMAL-1D454" x="4233" y="0"/><use xmlns:ns7="http://www.w3.org/1999/xlink" ns7:href="#GYREPAGELLAMAIN-28" x="4983" y="0"/><g transform="translate(5407,0)"><use xmlns:ns8="http://www.w3.org/1999/xlink" ns8:href="#GYREPAGELLAMAIN-69"/><use xmlns:ns9="http://www.w3.org/1999/xlink" ns9:href="#GYREPAGELLAMAIN-6E" x="291" y="0"/><use xmlns:ns10="http://www.w3.org/1999/xlink" ns10:href="#GYREPAGELLAMAIN-25" x="1123" y="0"/></g><use xmlns:ns11="http://www.w3.org/1999/xlink" ns11:href="#GYREPAGELLAMAIN-29" x="7370" y="0"/></g></g><g transform="translate(7779,0)"><g transform="translate(0,2013)"><use xmlns:ns12="http://www.w3.org/1999/xlink" ns12:href="#GYREPAGELLAMAIN-3D" x="277" y="0"/><use xmlns:ns13="http://www.w3.org/1999/xlink" ns13:href="#GYREPAGELLASIZE6-5B" x="1315" y="0"/><use xmlns:ns14="http://www.w3.org/1999/xlink" ns14:href="#GYREPAGELLASIZE4-28" x="1836" y="0"/><g transform="translate(2409,0)"><g transform="translate(120,0)"><rect stroke="none" width="3775" height="60" x="0" y="220"/><g transform="translate(60,676)"><use xmlns:ns15="http://www.w3.org/1999/xlink" ns15:href="#GYREPAGELLAMAIN-47"/><use xmlns:ns16="http://www.w3.org/1999/xlink" ns16:href="#GYREPAGELLAMAIN-44" x="763" y="0"/><use xmlns:ns17="http://www.w3.org/1999/xlink" ns17:href="#GYREPAGELLAMAIN-50" x="1537" y="0"/><g transform="translate(2141,-150)"><use transform="scale(0.707)" xmlns:ns18="http://www.w3.org/1999/xlink" ns18:href="#GYREPAGELLAMAIN-32"/><use transform="scale(0.707)" xmlns:ns19="http://www.w3.org/1999/xlink" ns19:href="#GYREPAGELLAMAIN-30" x="500" y="0"/><use transform="scale(0.707)" xmlns:ns20="http://www.w3.org/1999/xlink" ns20:href="#GYREPAGELLAMAIN-31" x="1000" y="0"/><use transform="scale(0.707)" xmlns:ns21="http://www.w3.org/1999/xlink" ns21:href="#GYREPAGELLAMAIN-31" x="1499" y="0"/></g></g><g transform="translate(60,-686)"><use xmlns:ns22="http://www.w3.org/1999/xlink" ns22:href="#GYREPAGELLAMAIN-47"/><use xmlns:ns23="http://www.w3.org/1999/xlink" ns23:href="#GYREPAGELLAMAIN-44" x="763" y="0"/><use xmlns:ns24="http://www.w3.org/1999/xlink" ns24:href="#GYREPAGELLAMAIN-50" x="1537" y="0"/><g transform="translate(2141,-150)"><use transform="scale(0.707)" xmlns:ns25="http://www.w3.org/1999/xlink" ns25:href="#GYREPAGELLAMAIN-31"/><use transform="scale(0.707)" xmlns:ns26="http://www.w3.org/1999/xlink" ns26:href="#GYREPAGELLAMAIN-39" x="500" y="0"/><use transform="scale(0.707)" xmlns:ns27="http://www.w3.org/1999/xlink" ns27:href="#GYREPAGELLAMAIN-35" x="1000" y="0"/><use transform="scale(0.707)" xmlns:ns28="http://www.w3.org/1999/xlink" ns28:href="#GYREPAGELLAMAIN-30" x="1499" y="0"/></g></g></g></g><g transform="translate(6424,0)"><use xmlns:ns29="http://www.w3.org/1999/xlink" ns29:href="#GYREPAGELLASIZE4-29" x="0" y="0"/><g transform="translate(573,819)"><g transform="translate(120,0)"><rect stroke="none" width="620" height="60" x="0" y="146"/><use transform="scale(0.5)" xmlns:ns30="http://www.w3.org/1999/xlink" ns30:href="#GYREPAGELLAMAIN-31" x="370" y="663"/><g transform="translate(60,-324)"><use transform="scale(0.5)" xmlns:ns31="http://www.w3.org/1999/xlink" ns31:href="#GYREPAGELLAMAIN-36"/><use transform="scale(0.5)" xmlns:ns32="http://www.w3.org/1999/xlink" ns32:href="#GYREPAGELLAMAIN-31" x="500" y="0"/></g></g></g></g><use xmlns:ns33="http://www.w3.org/1999/xlink" ns33:href="#GYREPAGELLAMAIN-2212" x="8179" y="0"/><use xmlns:ns34="http://www.w3.org/1999/xlink" ns34:href="#GYREPAGELLAMAIN-31" x="9162" y="0"/><use xmlns:ns35="http://www.w3.org/1999/xlink" ns35:href="#GYREPAGELLASIZE6-5D" x="9662" y="0"/><use xmlns:ns36="http://www.w3.org/1999/xlink" ns36:href="#GYREPAGELLAMAIN-D7" x="10405" y="0"/><g transform="translate(11254,0)"><use xmlns:ns37="http://www.w3.org/1999/xlink" ns37:href="#GYREPAGELLAMAIN-31"/><use xmlns:ns38="http://www.w3.org/1999/xlink" ns38:href="#GYREPAGELLAMAIN-30" x="500" y="0"/><use xmlns:ns39="http://www.w3.org/1999/xlink" ns39:href="#GYREPAGELLAMAIN-30" x="1000" y="0"/></g><use xmlns:ns40="http://www.w3.org/1999/xlink" ns40:href="#GYREPAGELLAMAIN-25" x="12754" y="0"/></g><g transform="translate(0,-749)"><use xmlns:ns41="http://www.w3.org/1999/xlink" ns41:href="#GYREPAGELLAMAIN-3D" x="277" y="0"/><use xmlns:ns42="http://www.w3.org/1999/xlink" ns42:href="#GYREPAGELLASIZE6-5B" x="1315" y="0"/><use xmlns:ns43="http://www.w3.org/1999/xlink" ns43:href="#GYREPAGELLASIZE4-28" x="1836" y="0"/><g transform="translate(2409,0)"><g transform="translate(120,0)"><rect stroke="none" width="3036" height="60" x="0" y="220"/><g transform="translate(60,676)"><use xmlns:ns44="http://www.w3.org/1999/xlink" ns44:href="#GYREPAGELLAMAIN-34"/><use xmlns:ns45="http://www.w3.org/1999/xlink" ns45:href="#GYREPAGELLAMAIN-32" x="500" y="0"/><use xmlns:ns46="http://www.w3.org/1999/xlink" ns46:href="#GYREPAGELLAMAIN-2C" x="1000" y="0"/><g transform="translate(1416,0)"><use xmlns:ns47="http://www.w3.org/1999/xlink" ns47:href="#GYREPAGELLAMAIN-33"/><use xmlns:ns48="http://www.w3.org/1999/xlink" ns48:href="#GYREPAGELLAMAIN-30" x="500" y="0"/><use xmlns:ns49="http://www.w3.org/1999/xlink" ns49:href="#GYREPAGELLAMAIN-30" x="1000" y="0"/></g></g><g transform="translate(60,-686)"><use xmlns:ns50="http://www.w3.org/1999/xlink" ns50:href="#GYREPAGELLAMAIN-31"/><use xmlns:ns51="http://www.w3.org/1999/xlink" ns51:href="#GYREPAGELLAMAIN-32" x="500" y="0"/><use xmlns:ns52="http://www.w3.org/1999/xlink" ns52:href="#GYREPAGELLAMAIN-2C" x="1000" y="0"/><g transform="translate(1416,0)"><use xmlns:ns53="http://www.w3.org/1999/xlink" ns53:href="#GYREPAGELLAMAIN-38"/><use xmlns:ns54="http://www.w3.org/1999/xlink" ns54:href="#GYREPAGELLAMAIN-30" x="500" y="0"/><use xmlns:ns55="http://www.w3.org/1999/xlink" ns55:href="#GYREPAGELLAMAIN-30" x="1000" y="0"/></g></g></g></g><g transform="translate(5686,0)"><use xmlns:ns56="http://www.w3.org/1999/xlink" ns56:href="#GYREPAGELLASIZE4-29" x="0" y="0"/><g transform="translate(573,819)"><g transform="translate(120,0)"><rect stroke="none" width="620" height="60" x="0" y="146"/><use transform="scale(0.5)" xmlns:ns57="http://www.w3.org/1999/xlink" ns57:href="#GYREPAGELLAMAIN-31" x="370" y="663"/><g transform="translate(60,-324)"><use transform="scale(0.5)" xmlns:ns58="http://www.w3.org/1999/xlink" ns58:href="#GYREPAGELLAMAIN-36"/><use transform="scale(0.5)" xmlns:ns59="http://www.w3.org/1999/xlink" ns59:href="#GYREPAGELLAMAIN-31" x="500" y="0"/></g></g></g></g><use xmlns:ns60="http://www.w3.org/1999/xlink" ns60:href="#GYREPAGELLAMAIN-2212" x="7441" y="0"/><use xmlns:ns61="http://www.w3.org/1999/xlink" ns61:href="#GYREPAGELLAMAIN-31" x="8423" y="0"/><use xmlns:ns62="http://www.w3.org/1999/xlink" ns62:href="#GYREPAGELLASIZE6-5D" x="8923" y="0"/><use xmlns:ns63="http://www.w3.org/1999/xlink" ns63:href="#GYREPAGELLAMAIN-D7" x="9666" y="0"/><g transform="translate(10516,0)"><use xmlns:ns64="http://www.w3.org/1999/xlink" ns64:href="#GYREPAGELLAMAIN-31"/><use xmlns:ns65="http://www.w3.org/1999/xlink" ns65:href="#GYREPAGELLAMAIN-30" x="500" y="0"/><use xmlns:ns66="http://www.w3.org/1999/xlink" ns66:href="#GYREPAGELLAMAIN-30" x="1000" y="0"/></g><use xmlns:ns67="http://www.w3.org/1999/xlink" ns67:href="#GYREPAGELLAMAIN-25" x="12016" y="0"/></g><g transform="translate(0,-2813)"><use xmlns:ns68="http://www.w3.org/1999/xlink" ns68:href="#GYREPAGELLAMAIN-3D" x="277" y="0"/><g transform="translate(1315,0)"><use xmlns:ns69="http://www.w3.org/1999/xlink" ns69:href="#GYREPAGELLAMAIN-32"/><use xmlns:ns70="http://www.w3.org/1999/xlink" ns70:href="#GYREPAGELLAMAIN-2E" x="500" y="0"/><use xmlns:ns71="http://www.w3.org/1999/xlink" ns71:href="#GYREPAGELLAMAIN-30" x="750" y="0"/></g><use xmlns:ns72="http://www.w3.org/1999/xlink" ns72:href="#GYREPAGELLAMAIN-25" x="2565" y="0"/></g></g></g></g></svg></span></div>

In chrome/browser the svg are created but on readium these svgs are not created hence not rendered.

Expected behavior

How to reproduce?

1. Open attached epub in TestApp
2. Go to chapter 1.4
3. scroll to position as shown in the screenshot
   Left side epub is rendered in TestApp, Right side epub/html is rendered in chrome

Environment

iOS13, maccatalyst

• Readium version:

Testing device

• iOS version: 13
• Model (e.g. iPhone 11 Pro Max):
• Is it an emulator? Yes

Additional context

• Are you willing to fix the problem and contribute a pull request? Yes or No
  I also tried to open the GCDWebserver url on chrome and there also I'm getting same result. So my opinion is that those scripts are not running fine in GCDWebserver.

Attachments:

1. Epub
2. screenshot
   Left side TestApp __________ Right side Chrome

[mickael-menu]

Hi, did you try opening the chapter from Safari Mobile to see if it's supported? We use the native WKWebView and should support as much as Safari on iOS.

[rohitvishwakarma-sf]

@mickael-menu, I tried opening in ebook in iPhone and its working fine there(attached screenshot).
iOS : 15.5

.
.
.

[mickael-menu]

I see that the book embeds MathJax so it should work indeed. I'll take a look when I have time, probably next Friday.

I did a quick investigation and I think that the issue is caused by a query parameter added to the loaded scripts, for example:

http://localhost:51495/122D9AA2-5846-40B0-A5D2-4A5F2977C274/mathjax/extensions/MathEvents.js?V=2.7.3

This is something that should be supported in Readium.

[rohitvishwakarma-sf]

@mickael-menu

How is that query parameter added , by Readium ?
Pls take a look into this ASAP if possible, as it is also affecting the highlighting feature.

[mickael-menu]

Probably by MathJax.js itself, which seems to inject its own extension scripts.

If you're in a hurry of having this fixed, please consider contributing back a pull request for this issue.

[mickael-menu]

Fixed in PRs linked above.

[rohitvishwakarma1819]

Hey @mickael-menu ,
Sorry, just saw your PR after raising mine.
And thanks for your effort.

[mickael-menu]

Ha, bad timing 😄