Birbla

Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

Sign in
  • Hacker News
  • 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/

    by sathomasga
  • 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.
    by ttd
  • Also preserves more semantic information!
    by JadeNB
  • The equation number is overlapped with the equation. Tested with Cromite, Firefox on Android.

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

    by __rito__
  • 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.

    by randomtoast
  • 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?
    by bobbylarrybobby
  • 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

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

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

    by icpmoles