MathJax: getting well-rendered mathematical equations requires MathJax or a similar heavyweight JavaScript library; worse, even after disabling features, the load & render time is extremely high—a page like the embryo selection page which is both large & has a lot of equations can visibly take >5s (as a progress bar that helpfully pops up informs the reader).
The solution here is to prerender MathJax locally after Hakyll compilation, using the local tool mathjax-node-page to load the final HTML files, parse the page to find all the math, compile the expressions, define the necessary CSS, and write the HTML back out. Pages still need to download the fonts but the overall speed goes from >5s to <0.5s, and JavaScript is not necessary at all.
The complexity has been quite minimal. You npm install one executable, which you run on a HTML file in place, and it’s done. After the npm install, it’s fairly hassle-free after that; you don’t even need to host the webfonts if you don’t want to. We chose to for some additional speed. (It’s not the size, but the latency: an equation here or there will pull in a few fonts which aren’t that big, but the loading of a new domain and reflow take time.) IIRC, over the, I dunno, 6 years that I’ve been using it, there has only been 1 actual bug due to mathjax-node-page: it broke a link in the navbox at the end of pages because the link had no anchor text (AFAICT), which I solved by just sticking in a ZERO WIDTH SPACE. All my other work related to it has been minor optimizations like rehosting the fonts, stripping a bit of unnecessary CSS, adding an optimization setting, etc. Considering how complicated this feature is, that’s quite impressive reliability. Many much simpler features, which deliver far less value, screw up far more regularly than the static MathJax compilation feature does.
Yes, I don’t use any webfonts. I’m happy with the default fonts across platforms, don’t care whether my site looks consistent across platforms, and don’t want the performance penalty of requiring each visitor to load a new font to view my page.
Also, jefftk said “requiring”. Sure, he could have a site that uses Inter, either loaded from his own site or from a CDN like Google Fonts, but if Inter doesn’t load (mostly likely because of user preference), then everything will be fine.
If TeX fonts don’t load…then what happens? Does the user see raw TeX, or nothing at all, or…?
Daring Fireball is a site one has primarily heard of for being an Apple/Mac shill, so perhaps not the best example of a website relying on OS-supplied fonts...
And that is what happens when you don’t use webfonts.
If TeX fonts don’t load…then what happens? Does the user see raw TeX, or nothing at all, or…?
The user sees the rendered equations, set in whatever font is inherited by the equation element (most likely, the font of the surrounding text block). This might be fine:
I have no trouble believing it, but that speaks more about Linux’s generally sloppy and incompetent approach to typography than it does about whether leaving your website to the whims of OS-provided fonts has good results or not…
I don’t know—when I used Linux on my main machine I was happy with how things looked and generally preferred sites and programs that fit in with the rest of the environment. And Linux users are disproportionately the kind of people who, if they don’t like their system’s default font, will pick something they prefer.
Have you heard the good news about server-side MathJax rendering?
Quoting gwern on the subject:
That’s a lot more complexity than I want to be maintaining in my publishing pipeline.
I’m also not excited about requiring external fonts.
The complexity has been quite minimal. You npm install one executable, which you run on a HTML file in place, and it’s done. After the npm install, it’s fairly hassle-free after that; you don’t even need to host the webfonts if you don’t want to. We chose to for some additional speed. (It’s not the size, but the latency: an equation here or there will pull in a few fonts which aren’t that big, but the loading of a new domain and reflow take time.) IIRC, over the, I dunno, 6 years that I’ve been using it, there has only been 1 actual bug due to mathjax-node-page: it broke a link in the navbox at the end of pages because the link had no anchor text (AFAICT), which I solved by just sticking in a ZERO WIDTH SPACE. All my other work related to it has been minor optimizations like rehosting the fonts, stripping a bit of unnecessary CSS, adding an optimization setting, etc. Considering how complicated this feature is, that’s quite impressive reliability. Many much simpler features, which deliver far less value, screw up far more regularly than the static MathJax compilation feature does.
What do you mean by “external” fonts? Are you referring to webfonts, in general?
If you don’t use webfonts at all, your website is very unlikely to ever look particularly good (much less to look good consistently across platforms)…
Yes, I don’t use any webfonts. I’m happy with the default fonts across platforms, don’t care whether my site looks consistent across platforms, and don’t want the performance penalty of requiring each visitor to load a new font to view my page.
Daring Fireball, a site you’ve probably heard of, seems to do OK with only browser-supplied fonts:
Also, jefftk said “requiring”. Sure, he could have a site that uses Inter, either loaded from his own site or from a CDN like Google Fonts, but if Inter doesn’t load (mostly likely because of user preference), then everything will be fine.
If TeX fonts don’t load…then what happens? Does the user see raw TeX, or nothing at all, or…?
Daring Fireball is a site one has primarily heard of for being an Apple/Mac shill, so perhaps not the best example of a website relying on OS-supplied fonts...
Daring Fireball also uses:
"Gill Sans MT", "Gill Sans", "Gill Sans Std", Georgia, serifBecause of this, and what you quoted, a page that, on a Mac, looks like this:
Daring Fireball page, as seen on a Mac
on a Linux, looks like this:
Daring Fireball page, as seen on a Linux
i.e., it looks bad.
And that is what happens when you don’t use webfonts.
The user sees the rendered equations, set in whatever font is inherited by the equation element (most likely, the font of the surrounding text block). This might be fine:
(Or, it could be very bad. You never know!)
For what it’s worth I think the Linux screenshot is fine—that’s the default font on that system.
I have no trouble believing it, but that speaks more about Linux’s generally sloppy and incompetent approach to typography than it does about whether leaving your website to the whims of OS-provided fonts has good results or not…
I don’t know—when I used Linux on my main machine I was happy with how things looked and generally preferred sites and programs that fit in with the rest of the environment. And Linux users are disproportionately the kind of people who, if they don’t like their system’s default font, will pick something they prefer.