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
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.
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].
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.
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/
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.
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.orghttps://github.com/ronkok/Temmlhttps://temml.org/docs/en/comparison.html )
(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:
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.
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.
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.
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.
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.
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.
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!
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'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?
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.
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 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.
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]
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/
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
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.
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.
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?
> 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].
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."
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".
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!
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