MathJax: Beautiful and accessible math in all browsers | Hacker News Reader

MathJax: Beautiful and accessible math in all browsers

mathjax.org

My blog (eg https://daniel.lawrence.lu/blog/y2021m09d08/ ) uses MathJax on the serverside (via mathjax-node-cli) which gets rendered into SVG images. I find that this is nice because it's faster and the page doesn't jump around all the time while the equations are rendering. Equations can be cached. I can add alt text for accessibility.

Common mistakes that other people make when using an image-based approach include:

* failing to apply the proper sizing and offset for the baseline * using a raster PNG format which is bigger and looks fuzzy

> I can add alt text for accessibility

Math ML is much more than alt text. It presents mathematical expressions in a hierarchical, tree-like way, letting you explore parts of the expression in detail. Depending on the implementation, you may also be able to adjust the verbosity or render the expression in Braille using one of a few different math codes.

If you want accessible math, just alt text is not enough.

True. The alt text in my case contains the LaTeX which contains all the information to define the equation. But you're right that a standard like MathML would allow for other surfaces like Braille.

MathJax can generate MathML from Latex and all modern browsers render MathML now.

Woah! Chrome finally added support for MathML! I had no idea, apparently it landed in January of this year.

The way I have it set up in my use case is that if you click on the equation it switches to a brief description of what the equation is doing. Pretty useful for quickly parsing it for someone unfamiliar.

Check out Pretext, it's write once, read anywhere software package that supports cross platform publication output including Braille [1],[2].

It's a very powerful authoring and publication system, for example if you're writing an interactive Math book, you could use <sage/> blocks to specify language e.g. Python, write around code blocks, providing references to equations, etc [3].

Fun facts, PreTeXt was originally called MathBook XML thus it has robust support for mathematical formulas [4],[5].

Last but not least, don't let XML being used in Pretext scared you off since XML is great for markup language and anything todo with publication online, printed, Braille, etc [6].

[1] PreTeXt Write Once, Read Anywhere:

https://pretextbook.org/

[2] PreTeXt: Write Once Read Anywhere Authoring and Publishing System:

https://news.ycombinator.com/item?id=37231025

[3] The PreTeXt Guide: 3.17 Sage:

https://pretextbook.org/doc/guide/html/overview-sage.html

[4] The PreTeXt Guide: 4.9 Mathematics:

https://pretextbook.org/doc/guide/html/topic-mathematics.htm...

[5] The PreTeXt Guide: Chapter 13 Mathematics

https://pretextbook.org/doc/guide/html/basics-ch-math.html

[6] XML is better than YAML – Hear me out:

https://news.ycombinator.com/item?id=37586580

How do you feel about the tradeoff of losing copy-and-paste functionality? I'm not implying it's a bad decision - there are tradeoffs in every option - but I'm wondering what you thought about it.

With the alt text, copying and pasting actually works as you expect.

Ohhh I didn't know that. For others trying it:

* Right-click > copy copies the image itself

* Highlight the image, then Right-click > copy gives you the alt text

Huh, that's surprising. I've never actually checked but always considered that they'd give the same result. Somewhat cumbersome, if one considers how few people know of this functionality though.

If you're going to send out math as SVGs anyway, you can also just use your normal latex to PDF renderer (e.g. pdflatex) on each formula, and then convert the output PDFs to SVGs. That way, you get the same output you'd get with latex, and you can also use latex packages that aren't supported by MathJax (e.g. tikz-cd). I've prototyped a latex to html converter [1] based on that approach, but it's probably not ready for serious use. Here's an example: https://www.mbid.me/lcc-model/

[1] https://github.com/mbid/latex-to-html

There's no question that MathJax is a great project. But... pretty much all the major browsers have native support for MathML now, so hopefully we can start seeing most (most?) math on the Web in that format. This should bring advantages for folks who rely on additional technology for accessibility purposes, and for search.

MathML is technically human read/write-able, but not efficiently. Something like Mathjax (which targets mathml) is also necessary, to allow humans to read/write raw math expressions in a simpler format.

A heavy, slow client-side script like MathJax seems like an unpleasant way to target MathML—why not precompile offline from something like AsciiMath?

MathJax can be used on the server / wherever you generate HTML, too.

To make it interactive for example.

Mathjax can output MathML, actually. It's as easy as linking to tex-mml.js

MathML is as human readable and writable as SVG, and that is by design. Now that all browsers support MathML natively we no longer need MathJaX to read it (the browser does a much better job) however we still need to be able to write it. MathJaX can certainly help there, though I would argue there are better libraries then MathJaX for that purpose.

MathJaX had a good run, they did a good job, I would say their job is done however.

The point of MathJax is so that users can type math the way they are used to—typically TeX syntax, though MathJax also supports AsciiMath and MathML itself—and get nicely typeset output (MathJax has three output formats: MathML, SVG, and HTML+CSS). At most you could say that MathJax's MathML input and HTML+CSS output are no longer needed, but that's not the bulk of the need that MathJax serves. Also:

1. [Input] Even if only targeting MathML output, you still need some way to take the user's TeX input and generate MathML, which is what MathJax provides here. What are the alternatives to MathJax that you have in mind? The closest competitor I'm aware of is KaTeX, and while it is fast when it works, there are still some holes in its support (relative to MathJax). (Another comment in this discussion points out Temml, which indeed looks good: https://temml.org https://github.com/ronkok/Temml https://temml.org/docs/en/comparison.html )

2. [Output] The MathML output rendering in browsers is not yet 100% identical to TeX's typesetting (they're certainly aware of it / thinking of the right things, looking at the mentions of [TEXBOOK] at https://w3c.github.io/mathml-core ), and this may even be intentional. In particular, looking at various MathML demo pages I found online (http://eyeasme.com/Joe/MathML/MathML_browser_test.html https://fred-wang.github.io/MathFonts/mozilla_mathml_test https://www-archive.mozilla.org/projects/mathml/demo/texvsmm... and Temml's useful demo pages: https://temml.org/tests/wiki-tests https://temml.org/tests/latexml-tests https://temml.org/tests/mozilla-tests) it appears that in all three of Chrome/Firefox/Safari the rendering of nested square roots is a bit suboptimal, while Safari has some more serious issues (example 9 of the Mozilla MathML Test looks poor in Safari). But clearly the Igalia (for Chrome) and Mozilla folks have done great work, and it's pretty close, but in the meantime I imagine at least some authors would prefer the more deterministic (across browsers) output of SVG or HTML+CSS.

(Also, on a lot of these MathML demo pages, selecting and copy-pasting the math produces junk, while with MathJax there's a right-click menu providing the TeX source and also some accessibility options… it seems that accessibility is actually higher with MathJax under certain circumstances at least.)

My main beef with MathJax is how it searches for equation on the entire page and renders it in place instead of using something like a custom element. E.g. in TeXZilla you can write something like:

    <la-tex>x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}</la-tex>

In my own mathup library I have a similar functionality:

    <math-up>x = -b+-sqrt(b^2 - 4ac) / 2a</math-up>

For MathJax to continue staying relevant it should probably do something similar (note that it is not that hard [1]).

As for the output. This is in large part due to the font being used. The default math font for me using firefox on ubuntu is indeed rather ugly. If you want something similar to the TeX output you can simply use the TeX-Gyre font face. In my documentation for mathup[2] I use Libertinus Math, which pairs very nicely with the other font faces on the page (Libertinus and Libertinus Mono). Aside: here is another example of why MathML is a superior target output then HTML+CSS as you actually have control over the font face.

And finally, as for the copy-pasting. You can download numerous browser add-ons that make copy-pasting formulas as easy as MathJax’s. I will admit this is a handy feature of MathJax, and if you want user to be able to copy-paste your expressions while not assuming they will download an add-on to do so, then MathJax is probably your number 1 choice.

1: https://github.com/mathjax/MathJax/issues/2292#issuecomment-...

2: https://runarberg.github.io/mathup/ - Note, I haven’t updated the software to target the newer MathML Core, so many expressions will not work in Chrome. You should definitely use MathJax over my library.

Thanks for these helpful links. Looking at the Mozilla examples in mobile Safari just now and the MathML rendering is pretty dreadful for almost all of them. It looks like there is still a long way to go.

> MathML is as human readable and writable as SVG, and that is by design.

From what you're writing I'm not entirely sure you think MathML has good or bad readability then ;)

But in case you don't find MathML's presentational syntax convincing for authoring, you can pickup SGML shortref syntax (a technique even older than MathML itself [1]) for at least eg. a highscool math subset in order to cut down on excessive <mo>, <mi> tags.

[1]: https://www.w3.org/MarkUp/html3/maths.html

MathML was designed to be an easy target for other authoring tools. This includes graphical editor (just like inkscape is for SVG) or libraries (just like D3 is to SVG).

I actually don’t like writing MathML, and I actually wrote a library my self that targets MathML.

Isn't it like saying that now when all browsers can natively render SVG, the job of Inkscape is done forever?

I'd say the opposite: now we can safely use MathJAX to translate TeX syntax to an efficient rendering representation.

Inkscape is purely an SVG editor, yes you can also view SVG images using inkscape but that is not its primary function. MathJaX’s primary function on the other hand is to find mathexpressions on a web page and then use javascript to turn them into HTML+CSS rendered equation.

If you want to write LaTeX and include the equivalent MathML in your webpage, then something like Temml is a lot better choice, as that is it’s primary function.

https://temml.org/

For those as confused as me, Chrome finally supports MathML as of January 2023.

(insert starcraft "about time" meme)

To be precise, they support MathML Core, which is a subset of MathML 4. Your expressions that you wrote for MathML 3 and worked in Firefox may not (and probably will not) work in Chrome. I actually wrote a library a little while ago which doesn’t work in Chrome because of this.

That said, I think MathML Core is an excellent standard, and Chrome made the right choice to support it (or rather to allow Igalia to develop it for them). Going forward I’m certainly going to update my library to target MathML Core only.

People would much rather write LaTeX than MathML.

Use Temml to convert LaTeX to MathML: http://temml.org/

I don't doubt that, and thankfully there are tools to convert LaTeX to MathML. So one can continue to write in LaTeX if that's what they're comfortable with, and still publish to the Web in MathML as desired.

> thankfully there are tools to convert LaTeX to MathML

For example MathJax!

Igalia, a 3rd party browser developer who ships code to multiple browser engines, has been working on native MathML support for Chromium and has shipped earlier this year!

https://mathml.igalia.com

When I worked at Medium, I pushed to get the team to natively support math markup. That never happened. It kind of killed my initial excitement for the company. Not only on Medium, but on the connected hope of a low-to-zero ad platform for everyone to write on, which is a bigger vision than any one company.

I've run into it being used in https://webassembly.github.io/spec/core/syntax/instructions.... It's slow, and you can't highlight the text. This also means that searching on the page is broken, since it can't be highlighted. Not a great experience.

MathJax v3.2.0 - https://news.ycombinator.com/item?id=28155836 - Aug 2021 (1 comment)

MathJax - https://news.ycombinator.com/item?id=24741077 - Oct 2020 (42 comments)

MathJax: Beautiful Math in All Browsers - https://news.ycombinator.com/item?id=23286761 - May 2020 (2 comments)

MathJax Turns 3.0 - https://news.ycombinator.com/item?id=22582343 - March 2020 (34 comments)

MathJax CDN shutting down on April 30, 2017 - https://news.ycombinator.com/item?id=14074689 - April 2017 (75 comments)

MathJax 2.0, probably the nicest way for showing/writing math on the Web - https://news.ycombinator.com/item?id=3720516 - March 2012 (4 comments)

MathJax: Math just works on the web now - https://news.ycombinator.com/item?id=2455698 - April 2011 (4 comments)

MathJax, beautiful math in all browsers - https://news.ycombinator.com/item?id=1974646 - Dec 2010 (36 comments)

MathJax: convert LaTeX to HTML on the client - https://news.ycombinator.com/item?id=1034480 - Jan 2010 (3 comments)

Mathjax - https://news.ycombinator.com/item?id=997096 - Dec 2009 (34 comments)

https://www.mathjax.org/#demo

https://www.w3.org/Math/

https://en.wikipedia.org/wiki/MathML

I'm curious - is there any mathjax/mathml/latex/whatever equivalent to Markdown?

Because every math extension seems to fail the one great feature of markdown: that when I view Markdown as plain text, it's still really legible and the amount of noise added by the markup is minimal, especially if you use the "underline with hyphens" syntax for headings.

Like, every time I see backslashes they're just distracting if I'm trying to read it raw.

Like is there any math format where the Quadratic Formula is just

         -b ± √(b² - 4ac)
    x =  ----------------
                2a

Obviously I'd expect something like this to be the output after running the text file through a formatter, just like how in Markdown it's common to reformat things as you go because they're hard to type manually.

Like with Markdown Tables.

Tables are extremely difficult to type in MD, and should never be done manually, right?

Basically, here's how you do tables in markdown:

First, you do them the wrong way, half-assed.

    | Header1 |Header2 |Header3 |
    |-|-|-|
    | BodyRow1 Cell1 | Cell2 |Cell3|
    | BodyRow2 Cell1 | Foo |Bar|

which looks like crap, right?

then you run them through a formatter and you get

    | Header1        | Header2 | Header3 |
    | -------------- | ------- | ------- |
    | BodyRow1 Cell1 | Cell2   | Cell3   |
    | BodyRow2 Cell1 | Foo     | Bar     |

which looks nice, right?

And then it becomes a real table when you convert your Markdown into Html/Pdf/Docx/whatever.

That's what I was wondering if there's anything similar for math.

Like, the way I'd type the Quadratic Formula would be

    x = -b +- sqrt(-b-4ac)) over 2a

but when I run it through the code formatter, I'd expect to get cleaned up the same way my table did.

         -b ± √̅(b² - 4ac)
    x =  ————————————————
               2a

I wonder if that would limit you to the very simplest of math.

LaTeX notation lets you type math without the ambiguity of parsing text. And you can render a lot of it in Unicode (See Unicodeit.net).

I would not want to type math in markdown notation due to loss of fidelity. Also LaTeX is like SQL: it’s there, everybody knows it, and it works. Any effort to displace it will end up reinventing it badly imho.

I think you could say literally all the exact same things about Markdown and HTML.

> I wonder if that would limit you to the very simplest of ~~math~~markup.

> ~~LaTeX~~HTML notation lets you type ~~math~~markup without the ambiguity of parsing text.

> I would not want to type ~~math~~markup in markdown notation due to loss of fidelity. Also ~~LaTeX~~HTML is like SQL: it’s there, everybody knows it, and it works. Any effort to displace it will end up reinventing it badly imho.

I mean the lack of Unicode support for superscripts would basically make this futile, but then you could say the same about the extreme limitations of Markdown tables.

edit: I forgot that HN doesn't support markdown strikethroughs. You get the idea.

Shameless plug. I wrote a library called MathUp with the purpose of having an quick to write and easy to read syntax and compiles to MathML. It is whitespace aware (unlike asciimath) so you can group sub-expressions together in a really readable way.

    x = -b +- sqrt(-b-4ac) / 2a

would actually put the -b ± part in front of the fraction:

    x = -b+-sqrt(-b-4ac) / 2a

works as intended, as does:

    x = (-b +- sqrt(-b-4ac)) / 2a

I haven’t touched it for a minute and it is does not fully support MathML 4, meaning there are expressions which cannot be read properly by chrome. I was always going to revist this at some point but time is hard to find.

https://runarberg.github.io/mathup/

I'm a Typst fan, although I don't use it much, and I don't really use it for math.

If you're not much of a Unicode person, you can write this:

$ x = (-b plus.minus sqrt(b^2 - 4 a c))/(2a) $

If you're more of a Unicode person, you can write this, and it means the same thing AFAICT:

$ x = (-b ± √(b^2 - 4 a c))/(2a) $

You can also put newlines in this, and it works just fine:

    $ x =
            (-b ± √(b² - 4 a c))
            /
            (2a)
    $

Both ± and √ have been on Mac keyboards, if you hold down the Option key, since probably 1984. Using ² instead of ^2 doesn't give me the same output, though.

A Typst Unicoderator could make this transformation for you, but I don't think one's been written yet. An automatic linebreaker à la Prettier sounds like an even more difficult challenge.

There's UnicodeMath, defined at <https://www.unicode.org/notes/tn28/UTN28-PlainTextMath-v3.2....> and <https://unicodemath.org> says there's a UnicodeMath to MathML converter at <https://github.com/MurrayIII/UnicodeMathML/tree/main>. All UnicodeMath seems to get you over Typst in this instance is superscript support.

There is http://asciimath.org/ .

There are latex to unicode convertors [1], that understandably only convert a very limited subset of latex to unicode. They are not very clever at the moment, and I imagine could be improved to actually process \frac in your way.

[1] https://www.unicodeit.net/

That would be awesome. It's not quite what you're looking for but typst is in a similar category. (No affiliation)

For generating ASCII/Unicode tables I recommend https://ozh.github.io/ascii-tables/ , especially the Unicode (single line) style.

    ┌──────┬───────────────┬───────────┐
    │ It's │  occasionally │   useful  │
    ├──────┼───────────────┼───────────┤
    │ for  │  HackerNews   │  comments │
    └──────┴───────────────┴───────────┘

This looks like garbage on narrow screens (mobile).

Yes, and if you're able to use HTML tables then you should. HackerNews implements a particularly spartan flavour of MarkDown, so the 'ASCII art' approach is the only one available here.

This is similar to how pre-wrapped text often looks terrible on mobile. This is an issue with plaintext email, for instance. [0]

[0] https://lists.sr.ht/~sircmpwn/public-inbox/%3C87wo85l3c5.fsf...

It doesn't fulfill the pretty-formatting part, but I created Heine with the purpose of being more writable and readable than LaTeX: https://xigoi.srht.site/heine/

Kudos for perfectly aligning those hyphens.

The trick is that HN turns into monospace when you indent.

So this is not monospaced,

    but this text that is indented with 4 spaces is monospaced
    so  I    can  easily  align    words.

  Two spaces is all you need

But they should have been Unicode MINUS SIGNs '−'!

Anyway, if you like the idea of using way too much Unicode, I've been working on an esoteric document format proposal, 'Utext', for using exclusively Unicode in text files for complicated typography. Seems like Unicode is so enormous these days that you can do quite a lot: https://gwern.net/utext

I haven't done any big investigations on this in quite awhile; how does MathJax compare to something like KaTeX nowadays?

KeTeX is faster, but supports a limited subset of LaTeX. MathJax supports essentially everything.

For most mathuses in blog posts KaTeX is going to provide a bettter user experience, but if you want to put a math paper on a webpageMathJax is the way to go.

I think MathJax has really caught up in speed in the past few (5) years with MathJax 3. I would pick MathJax today for compatibility reasons.

Interesting; does MathJax support the AMS extensions? That was my issue with KaTeX in the past.

Yes, it does. Supported extensions here [1]. Two more notable ones are mathtools and physics, both of which make writing latex on the web much more pleasant.

[1] https://docs.mathjax.org/en/latest/input/tex/extensions/inde...

I haven't used MathJax simply because KaTeX is far easier to use than MathJax.

KaTeX is so plug-and-play for simple LaTeX in web pages that I never bothered thinking about anything else

There's also Temml (a lightweight fork of KaTex).

https://github.com/ronkok/Temml

I looked into MathJax for my blog, and it's pretty slow and renders math as images. KaTeX is hands down a better option, IMO. The math comes in as text, and its UX is essentially the same.

That's odd, MathJax does not render the math as images (unless you configure the output format to be SVG, but even that is not the default). Do you have a memory of (or can retrace) how you ended up with that unusual configuration?

(MathJax's output formats, namely HTML+CSS, SVG, MathML — see https://mathjax.github.io/MathJax-demos-web or https://docs.mathjax.org/en/latest/output/ — are strictly a superset of KaTeX's output formats, namely HTML+CSS and MathML: https://katex.org/docs/options.html )

I was using KaTeX for a while on DataCrayon (e.g. https://datacrayon.com/practical-evolutionary-algorithms/pop...), but recently switched to server-side rendering with MathJax.

I'm happy with the way it looks. I'd used KaTeX over MathJax previously because I found it rendered pages faster.

> using KaTeX [...] switched to server-side rendering with MathJax

I've been meaning to look into KaTex. Could you elaborate on why you switched away from it? KaTeX appears to support server-side rendering already, in the sense that it generates plain HTML.

> Could you elaborate on why you switched away from it?

I started using KaTeX sometime after 2015 because it promised to be fast (the fastest! [1]). I had to change the representation of a bunch of expressions because KaTeX didn't support some environments, whilst MathJax did. It was a trade-off I was willing to accept at the time.

Many years later, I started writing a personal static-site generator. I wanted comparatively lightweight pages, so rendering server-side was an option. I re-evaluated MathJax vs KaTeX again and this time I leaned towards MathJax, as speed was no longer an issue for me. It looks like KaTeX has broader support now [2].

[1] https://katex.org

[2] https://katex.org/docs/support_table.html

MathJax has better MathML support.

Mathstodon ( https://mathstodon.xyz/about ) integrates this library. It forks/extends Mastodon to support inline LaTeX in Mastodon posts and equations, which get rendered by MathJax on the client side.

- "This is important, since several math-based instances exist (such as https://mathstodon.xyz ,https://types.pl) and produce math-based posts. However, when these posts federate to other instances they cannot be rendered, since other instances do not have MathJAX installed. Thus, a more portable version based on open standards is necessary."

https://github.com/mastodon/mastodon/issues/19806

I am wondering if there's any performance comparison between js based approach like mathjax and katex with the built-in mathml rendering? Given that the the browser needs to parse and render the generated html and css for the js approach, it seems that mathml should be faster. But is it the case for real performance?

I've done math sites with MathML in Firefox and MathJax as fallback for other browsers. The difference is huge. MathML rendering is immediate while MathJax comes limping along after an annoying delay. Even when bundling the MathJax library.

Edit: Don't want to send negative vibes toward MathJax. They do great work. Just think it would have been better if google didn't decide "no, the web shall not have native math rendering".

Edit2: Didn't know chrome supported MathML now.

Fun fact: you can tell ChatGPT to output all math in MathJax syntax and then inject MathJax as a browser script on that domain.

It doesn't help with ChatGPT hallucinating and generally being poor about math/stats related queries, but it does make things a good bit more readable!

What I want is something like this, but in my code editor, so I can make code look more like the math it is based on.

"accessible" ... can't select the sample

Can i display 2D geometry using MathML ?

You can display 2D geometry using SVG, and presumably nothing stops you from using MathML inside that :)

Correct, SVG has <foreignObject> for that purpose. I don’t think there is an equivalent MathML element though.

Needs JS? Does not seem to work without it. So Eww (emacs browser) won't render it.

Reply on news.ycombinator.com