Elm Mathjax Rendering Problem

James Carlson

unread,

Sep 19, 2017, 6:50:32 PM9/19/17

to MathJax Users

I apologize for the multiple posts and also the length of this one.

This post supersedes the other two posts of today, which are best ignored.

I've made some progress in diagnosing the problem, maybe to the point where an expert can help.

The setup is this. I have an Elm app under development. See http://www.knode.io for the app and http://www.knode.io/#@public/421

for the example relevant to this discussion. It is instructive to look at the Javascript console.

Elm is pure (very pure ha ha!) functional language, so to render MathJax, it has to send a string with LaTeX markup through a "port" where it is rendered by Asciidoc.js, then stored in a DOM node, then rendered by MathJax, and finally sent back to Elm. Thus the code in index.js and and index.html act as a rendering server for the Elm app. The function which renders the LaTeX and sends it back to Elm land is this:

```

function typesetNow(){

console.log("** typesetNow: I am calling MathJax.Hub.Queue in index.js ... ")

MathJax.Hub.Queue([

"Typeset",

MathJax.Hub,

// function(){app.ports.getRenderedText.send(document.getElementById('rendered_text2').innerHTML)}]);

function(){

var rendered_text = document.getElementById('rendered_text2').innerHTML

console.log("::RENDERED TEXT::" + rendered_text + "::END::")

app.ports.getRenderedText.send(rendered_text)

}]);

}
```

Note the inserted debugging code which will report on the string to be sent back to Elm world. I tested the setup on a document with the text

```

\[

\int_0^1 x^n dx = \frac{1}{n+1}

\]
```
for which the Asciidoc rendering essentially trivial. The result of MathJax rendering is listed below, and I've also appended a screenshot of the visual outtput. Note that it is a preview, not the real thing, which explains its bad appearance..

What is also strange is that I haven't changed the code here, except to insert logging. For a period of several months while developing the app, I got the "good" output.

So the question is, finally, how do I change things so as to get the full rendering, not the preview?

<msubsup><mo>&#x222B;</mo><mn>0</mn><mn>1</mn></msubsup><msup><mi>x</mi><mi>n</mi></msup><mi>d</mi><mi>x</mi><mo>=</mo><mfrac><mn>1</mn><mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow></mfrac></math>" role="presentation" style="font-size: 101%; text-align: center; position: relative;">∫10xndx=1n+1<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><msubsup><mo>∫</mo><mn>0</mn><mn>1</mn></msubsup><msup><mi>x</mi><mi>n</mi></msup><mi>d</mi><mi>x</mi><mo>=</mo><mfrac><mn>1</mn><mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow></mfrac></math><script type="math/tex; mode=display" id="MathJax-Element-1">

\int_0^1 x^n dx = \frac{1}{n+1}

</script>

</div>

Davide Cervone

unread,

Sep 19, 2017, 7:17:56 PM9/19/17

to mathja...@googlegroups.com

Your style

.style-elements span {

font: inherit;

}

is overriding MathJax's font settings, so you are forcing the font to be the wrong one. Did you add that style recently?

It might be that if you move the <style> element from the body to the document <head> (where it should be anyway), then MathJax's stylesheets will follow it, and that might be enough to reverse the order of which takes precedence. Otherwise, you may need to remove that style setting, or handle it in another way.

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.

James Carlson

unread,

Sep 19, 2017, 8:10:50 PM9/19/17

to mathja...@googlegroups.com

This makes sense, and explains the unexplained change in behavior—

I am using a fabulous css replacement called Style-Elements,

but it is in a rapid state of change.

This gives a lot to go on.

Thank you very much!

Jim

James Carlson

unread,

Sep 20, 2017, 10:28:44 AM9/20/17

to mathja...@googlegroups.com

Davide,

I am working with the developer of style-elements to get this resolved. We have

verified that it is a css/font reset problem with that package — something

broke in the 3.3.0 => 3.4.0 transition.

I wanted to check on one thing that may help with an interim solution. My Hub

Configuration is

MathJax.Hub.Config({tex2jax: {

inlineMath: [['$','$'], ['\$','\$']],

processSectionDelay: 5,

"HTML-CSS": {

preferredFont: "STIX",

webFont: "STIX-Web",

minScaleAdjust: 50,

noReflows: true

}

}});

In the app, would I name the fonts like the below?

Font.typeface [ "STIX", "STIX-Web" ]

Thanks so much,

Jim

On Sep 19, 2017, at 7:17 PM, Davide Cervone <dpv...@gmail.com> wrote:

Davide Cervone

unread,

Sep 20, 2017, 11:41:04 AM9/20/17

to mathja...@googlegroups.com

I'm not sure I understand the question. Or rather, I'm not sure what Font.typeface is supposed to provide for your app. Is it suppose to give the names of all the fonts that could be used in your app, and if so, does it give the CSS font families, or what? In particular, for web-based fonts, which are loaded via URLs not font names, what does it require.

Note that the STIX and STIX-Web fonts are really more than one font file (STIX is 29 as I recall, and STIX-Web is over 50, if I remember correctly).

So I'm not sure how to answer your question.

Davide

James Carlson

unread,

Sep 20, 2017, 12:35:00 PM9/20/17

to mathja...@googlegroups.com

I see that it was a bad question .. The developer is working

on a real fix, and I’ve gone back to a previous version of his package that works in the sense

that the fonts displayed are correct.

However, there is a new problem that has manifested itself. I am getting doubled output,

like the below. Any idea of what causes this?

What is frustrating is that I can have everything working, then this sort of thing happens … I go back

to a previous commit, and the pathology persists. Very odd. The state of the program should be

the commit plus the versions of the packages used.

I really appreciate your help and patience :-)

—Jim

James Carlson

unread,

Sep 20, 2017, 12:56:23 PM9/20/17

to mathja...@googlegroups.com

One addendum. To view this pathology directly, go to

(1) http://www.knode.io/#@public/378

Also this:

(2) http://www.knode.io/#@public/403

(2) uses a different technology and at _this_ moment does not

give doubled output. (Can there be a timing issue??)

—Jim

PS. I just found that (3) http://www.knode.io/#@public/137 displays

properly using the technology of (1) — Asciidoctor + MathJax.

I don’t get it!!

---------------------------------

Technology note for (2):

I parse a LaTeX document, formatting it

Into HTML paragraphs, passing on verbatim $ … $, $$ … $$ and anything that

MathJax can handle like (\begin{equation} … \end{equation}), then parsing

constructs like \begin{theorem} … \end{theorem} and transforming them

into suitable HTML with embedded $ … $, $$ … $$ as needed.

Right now this is just an experiment, and I have only implemented a few constructs

To test the concept. The idea is to be able to write straight LaTeX (well probably

a useful subset of it) and have it rendered directly in the browser, adding to what

MathJax already does. Such documents can then be directly processed by LaTeX

If needed.

Elm has a quite nice parser combinator package which I am gradually learning to use.

On Sep 20, 2017, at 12:34 PM, James Carlson <jxxca...@gmail.com> wrote:

I see that it was a bad question .. The developer is working
on a real fix, and I’ve gone back to a previous version of his package that works in the sense
that the fonts displayed are correct.

However, there is a new problem that has manifested itself. I am getting doubled output,
like the below. Any idea of what causes this?

What is frustrating is that I can have everything working, then this sort of thing happens … I go back
to a previous commit, and the pathology persists. Very odd. The state of the program should be
the commit plus the versions of the packages used.

I really appreciate your help and patience :-)

—Jim

<doubled_output.png>

Reply all

Reply to author

Forward