logoalt Hacker News

sathomasgalast Monday at 2:10 PM7 repliesview on HN

Same use case (math-heavy, no-javascript blog), but I ended up with a _slightly_ different approach: instead of converting to SVG, convert to MathML. Browser support is pretty robust, and the output is much nicer (e.g. preserves fonts).

https://sathomas.me/blog/site/


Replies

icpmoleslast Monday at 4:12 PM

In my experience the MathML support is still mediocre, especially on Chrome.

https://fred-wang.github.io/MathFonts/mozilla_mathml_test/

show 2 replies
bArraylast Monday at 2:57 PM

Same here [1], I chose MathML as it worked out of the box in some browsers at the time. For browsers not supporting MathML I also have this ~80kB (~12kB compressed) library for converting it [2]. I tested your equation:

    \def\d{\mathrm{d}}
    
    \oint_C \vec{B}\circ \d\vec{l} = \mu_0
    \left(
      I_{\text{enc}} +
        \varepsilon_0
        \frac{\d}{\d t}
        \int_S {\vec{E} \circ \hat{n}}\; \d a
    \right)
It could not do the definition, so it ended up being:

    $$\oint_C \vec{B}\circ \mathrm{d}\vec{l} = \mu_0
    \left(
      I_{\text{enc}} +
        \varepsilon_0
        \frac{\mathrm{d}}{\mathrm{d} t}
        \int_S {\vec{E} \circ \hat{n}}\; \mathrm{d} a
    \right)$$
I did previously also load the LaTeX equation font, but I decided it used a lot of resource for little gain in the end.

I was also looking at your recent blog [3], and one thing that I like about mine is that the code you see is what is run to produce the output [4]. I am in the middle of making the code interactive too, so that you can re-compile it within the web page and run different parameters to produce different outputs.

[1] https://coffeespace.org.uk/projects/mathml-render.html

[2] https://github.com/pshihn/math-ml

[3] https://sathomas.me/blog/robuststats/

[4] https://coffeespace.org.uk/projects/wavefront-algorithm.html

bobbylarrybobbylast Monday at 5:43 PM

What does it mean that it preserves fonts? Presumably the body font on my website won't also support math typesetting, right? Or at least, not in a way that's as nice looking as the tex default?

__rito__yesterday at 6:28 AM

The equation number is overlapped with the equation. Tested with Cromite, Firefox on Android.

[0]: https://postimg.cc/G8NHRT3w

randomtoastlast Monday at 2:54 PM

MathML is part of HTML5 and standardised by ISO/IEC since 2015. It is supported by all major browsers and supports voicing as well as braille output.

This is the way to go.

ttdlast Monday at 5:34 PM

I still haven't found a way to coax MathML into looking the way I want it... Even using the same fonts (like Computer Modern or its descendants) there's still something not quite the same as LaTeX-drawn math. It's a nitpick but noticeable for me.

JadeNBlast Monday at 2:26 PM

Also preserves more semantic information!