10 ms·

Problems with math rendering on the web (2020)

135 points by uuuuuuuuuuuu 5y ago

lupire 5y ago
Eh. Every client already renders all the HTML into visual format. I don't see what's wrong with rendering the LaTeX too. Sure it would be nice of browsers could render the LaTeX natively instead of using JS.
- IIAOPSW 5y ago
  given the origin of the web at cern, it's actually surprising that it didn't include LaTeX from day 1.
  - Spivak 5y ago
    The web would be so pretty if “HTML” was actually hyperlinked TeX.
    - SiempreViernes 5y ago
      I'm not sure banner ads would be much better if aligned using TeX.
      - BeFlatXIII 5y ago
        Then every web page would have dynamically-inserted underfull hboxen with a badness of 10,000
        IIAOPSW 5y ago
        roses are red violets are blue underfull hbox on line 192
    - akdor1154 5y ago
      I dunno about that.. imagine npm, but with millions of one line TeX packages.
vortico 5y ago
KaTeX supports server-side Node rendering pretty easily. https://katex.org/docs/node.html https://katex.org/docs/node.html Maybe MathJax does too, but I haven't checked. I use this on https://vcvrack.com/manual/DSP https://vcvrack.com/manual/DSP to parse $inline$ and $$block$$ TeX into MathML with a couple lines of server-side code (simplified for readability): html = require('markdown-it')({html: true, linkify: true, typographer: true}) .use(require('markdown-it-texmath'), {engine: 'katex', delimiters: 'dollars'}) .render(body)
kisonecat 5y ago
I implemented a TeX engine in WebAssembly so you really can run TeX in the browser. You can see a demo of this at https://tex.rossprogram.org/ https://tex.rossprogram.org/ and at https://github.com/kisonecat/web2js https://github.com/kisonecat/web2js you can find a Pascal compiler that targets WebAssembly which can compile Knuth's TeX. Interesting primitives like \directjs are also implemented, so you can execute javascript from inside TeX. The rendering is handled with https://github.com/kisonecat/dvi2html https://github.com/kisonecat/dvi2html for which I finally fixed some font problems. To make it relatively fast, the TeX engine gets snapshotted and shipped to the browser with much of TeXlive already loaded. So even things like TikZ work reasonably well. There is of course a lot more to do! The plan is to convert ximera.osu.edu to this new backend by the fall.
- tomrod 5y ago
  This is wonderful! I'm a wasm neophyte -- even the set up seems complex to me. Do you have any recommendations for where to dive in?
  - kisonecat 5y ago
    I started by playing with emscripten which manages some of the initial complexity.
- inamiyar 5y ago
  Hello! I'm an osu student that has taken the calc sequence and very much appreciates the effort. I'll be watching the repo for sure
- mwcampbell 5y ago
  > The plan is to convert ximera.osu.edu to this new backend by the fall. Have you verified that this will not be an accessibility regression for blind users?
  - kisonecat 5y ago
    Unfortunately, the current platform we're using isn't very accessible: the \answer{...} blanks aren't converted to speech and don't navigate correctly. The new backend parses some TeX anyway to an AST, and the idea is that we could use that to produce alt text for the math. There's certainly a lot to do.
smoldesu 5y ago
Ha! I used to get pretty pissed-off when I was doing my online math homework, only to find that you couldn't copy/paste the equations into Google. I always thought it was a prevention mechanism, but I guess it was a matter of the technology not being ready yet.
- SilverRed 5y ago
  Unicode doesn't have many math symbols so you can't copy and paste them like text because they aren't just text. There are textural representations though which can be copied. They just look ugly.
  - jimhefferon 5y ago
    ?Barbara Beeton and others have put a good deal of effort into making Unicode and math work together. http://www.unicode.org/reports/tr25/tr25-15.pdf http://www.unicode.org/reports/tr25/tr25-15.pdf
- zsmi 5y ago
  > copy/paste the equations into Google. Just out of curiosity, why would you want to copy/paste an equation into the Google search bar? Can it solve it?
  - zsmi 5y ago
    So I tried it and it seems Google knows the quadratic equation, but it didn't know how to integrate. i.e. this worked in the Google search bar "solve 1x^2 - 2x - 3 = 0" this didn't "Integrate e^x from 0 to 1" Wolfram Alpha did a pretty decent job with the same text string. https://www.wolframalpha.com/input/?i=Integrate+e%5Ex+from+0+to+1 https://www.wolframalpha.com/input/?i=Integrate+e%5Ex+from+0... Looks like you have to go Pro to see the steps though, which is fair enough.
crazygringo 5y ago
> ...they use client-side rendering for static content. In my opinion, this is absurd. Rendering equations client-side doesn't seem absurd to me. All of HTML and CSS and SVG is rendered client-side, why shouldn't equations be too? I'm completely unclear why the author thinks equations specifically should be rendered server-side. Do they think HTML pages should be delivered as prerendered images or SVG's too...? Because it seems like the philosophy would apply the same way.
- pavon 5y ago
  Yeah that is my take as well, and I'm rather perplexed at what the author would like server-side rendering to output given they don't like PNG and SVG either. HTML and CSS weren't designed with math in mind, and while you can force them to do the job (like KaTeX), the result is sub-optimal. It looks fine, but it requires you to transmit orders of magnitude more data, which isn't very suitable to accessibility software (well the HTML/CSS part that is - it also includes a MathML representation which is more screen-reader friendly). I definitely agree that is crummy for pages to display the markup first, then swap it out with rendered content later. Does anyone know why common libraries do it this way? Web development isn't my strong point, but I thought it was pretty easy to make the browser run some javascript before it renders the page.
  - Evidlo 5y ago
    Its not good for users to be stuck on a blank screen while waiting for everything to load.
- chrismorgan 5y ago
  You’re misunderstanding what “client-side rendering” means. It’s not about rendering to images, it’s about rendering to HTML/CSS/SVG/whatever. “Client-side rendering” means that what is served contains something not in the eventual form you desire to present it, and that it depends on some client-side scripting to convert it into the desired form. When the page loads, it will first show perhaps nothing or perhaps something like $e^{-\frac{x}{2}}$, and then the scripting will kick in and replace that with the proper HTML/CSS/SVG/whatever markup for the equation that the browser knows how to display. “Server-side rendering” means that you do this translation from $e^{-\frac{x}{2}}$ to the desired HTML/CSS/SVG/whatever that the browser knows how to display, on the server, so that the browser can immediately display what it receives. Ideally this translation is also only done once, rather than on every request.
neolog 5y ago
The next generation is MathML. It's already implemented in Firefox, Chrome support is coming. https://www.w3.org/Math/ https://www.w3.org/Math/
- thayne 5y ago
  Firefox has supported MathML for a very long time. And I think chrome had an experimental version it for a while then removed it. I wouldn't hold my breath waiting for universal browser support.
  - zamadatix 5y ago
    Igalia picked up the Chromium development, they actually have it in an amazingly good state at this point. This image compares rendering from Chromium with their patches, Safari, and Firefox (in that order) https://mathml.igalia.com/img/mathml-example-gamma.png https://mathml.igalia.com/img/mathml-example-gamma.png That being said I wouldn't hold my breath it'll ship this year either since there is still some work in LayoutNG to be completed at minimum but maybe 2022 we'll all be amazed it finally happened.
moonchild 5y ago
See: mathml.
prezjordan 5y ago
I apologize if this is pedantic but you can absolutely "render" KaTeX server-side: https://github.com/jdan/thatjdanisso.cool/blob/902f1c421b02b9de419f85aeecee94ef1fe781b1/load-article.js#L26-L30 https://github.com/jdan/thatjdanisso.cool/blob/902f1c421b02b... MathJax does not support this because, IIRC, it runs layout calculations in the browser whereas KaTeX passes it off to CSS. If your argument is then that layout calculations should _also_ happen on the server then... I'm not sold and that would be a critique of web browsers and not math rendering.
- Waterluvian 5y ago
  It sounds like they want PDF. It’s rendered, not some image. But it’s also consistently laid out. I think that’s a neat idea in general. When I make little toy games for the web the part I hate the most is the boilerplate for ensuring every browser, mobile and desktop, gets a viewport of the same ratio. Would be neat to be able to say “give me a 16x9 viewport, and scale everything inside of it depending on how large that ends up actually being on the screen so that the same amount of content is seen by every user.”
  - SilverRed 5y ago
    You could create a canvas for your game and everything will be in your control.
  - daave 5y ago
    You could achieve this with CSS by using “vw” units for everything, including font sizes
daymi 5y ago
This article is kinda weird--it mentions MathML in passing and then spends a large amount of time on MathJax etc. The correct fix is to have MathML natively on all browsers (no JS)--and Igalia is working on that: https://mathml.igalia.com/faq/ https://mathml.igalia.com/faq/
- jfim 5y ago
  The worst part about the MathML debacle is that it actually used to work in Chrome a decade ago or so, but then it got removed because there was no real support for maintaining it within the Chrome team.
  - bariumbitmap 5y ago
    Yes, it's been almost eight years since Chrome removed their MathML support. The rationale at the time was unspecified security and performance problems: https://www.cnet.com/news/google-subtracts-mathml-from-chrome-and-anger-multiplies/ https://www.cnet.com/news/google-subtracts-mathml-from-chrom... A developer who worked on it, David Barton, had this to say in 2015: > I volunteered for a year and got MathML working in Chrome 24, but Google turned it off in Chrome 25 because I couldn't afford to keep maintaining it for free. (Yes, grumble. Donate your nickels to Google.) There was a security bug, but Google had a fix, which has since been landed in WebKit and the Safari browser, for instance. No one on the Chrome/Blink team cared about MathML, so they preferred removing it to maintaining it. They tell people that a library like MathJax is good enough, but it isn't without native browser support for MathML - it's too slow for many use cases, it doesn't integrate well enough with CSS, etc. (the MathJax team agrees with all this). Presumably as digital textbooks gain in popularity, Google will rethink their position, or schools will have to use a different browser than Chrome (Firefox and Safari would both work). In the meantime, Google has no one working on MathML in Chrome at all, even part-time. Go figure. (And no, I would not work on it again.) https://www.quora.com/Why-did-Chrome-drop-MathML-support?share=1 https://www.quora.com/Why-did-Chrome-drop-MathML-support?sha... There's also a chromium bug report from 2009: https://bugs.chromium.org/p/chromium/issues/detail?id=6606 https://bugs.chromium.org/p/chromium/issues/detail?id=6606 and a WebKit bug from 2005: https://bugs.webkit.org/show_bug.cgi?id=3251 https://bugs.webkit.org/show_bug.cgi?id=3251
daymi 5y ago
This article is kinda weird--it mentions MathML in passing and then spends a large amount of time on MathJax. I'm not sure what the point is. The correct fix is to implement MathML natively in all browsers (no JS)--and, indeed, someone is working on that: https://mathml.igalia.com/faq/ https://mathml.igalia.com/faq/ section "Which browsers support MathML?".
juped 5y ago
What I actually want isn't to run some more d----d javascript "server side", but to process latex to html in e.g. a hugo build.
lmm 5y ago
I still render Markdown on the client. My blog is probably "slow" by 2000s standards, but it's far faster and more lightweight than a typical news website in 2020. Every page involves the browser doing rendering work. HTML is neither fish nor fowl; it's not particularly easy to write by hand, but it's not particularly easy for the browser to parse either. I'm not convinced there are any good use cases for it, and certainly not for CSS. If partial prerendering on the server-side meaningfully speeds up your site for end users then by all means do it. But I would follow "make it work, then make it work right, then make it work fast". Dropping in a single tag to do client-side rendering is more than enough for the 90% case.
- chrismorgan 5y ago
  Wow, your page goes through about five rendering forms on first load. First it appears in plain monospaced text, then it gets rendered to unstyled HTML, then one stylesheet loads that mostly just makes the text bigger (strapdown.min.css), and then another stylesheet loads that handles the rest of the layout and vanishes the header (readable.min.css), and then finally the header appears again as the Raleway font loads. That’s pretty major content- and layout-shifting, and not at all pleasant to behold. And all subsequent pages go through at least two forms (plain monospaced text, then fully rendered). > Every page involves the browser doing rendering work. Well yeah, but HTML, CSS and JavaScript are different beasts. The browser can optimise HTML and CSS in various fascinating ways to provide a smooth experience and cope with loading problems in generally-useful ways; your site, if the JavaScript execution was effectively done in advance, would load faster, and skip at least the first three forms, going straight to fully-rendered-except-for-the-header or fully-rendered, depending on how quickly Raleway arrives. Subsequent page loads would go straight to the correct rendering. JavaScript, on the other hand, is the most likely to not work, perhaps because it was disabled (including most spiders—client-side rendering is still decidedly bad for SEO, even if Google specifically has mitigated most of that for Google search inclusion), perhaps because it failed to load due to network conditions, perhaps because the browser is old or some such thing. Depending on JavaScript does make a site much less reliable. Sometimes that’s warranted, but I don’t think it is on regular content websites, ever. By using JavaScript in the way you have done, you’ve guaranteed that it will render badly to begin with, that stylesheet loading will not be done smoothly, and that the site is less reliable and accessible. It’s… probably not a big deal, I begrudgingly acknowledge, but it does matter. It may still be faster than most news sites, but you hardly set a high bar there.
joppy 5y ago
The "server-side rendering" aspect of KaTeX is (and always has been, as far as I'm aware) front-and-centre on their landing page [1]. It allows you to input LaTeX and output HTML ready for inclusion server-side - the only thing this HTML needs to support it is the KaTeX CSS. This is very easy to do if your web server or static site generator is running on Node, and only a bit more difficult if it's running on something else (and therefore needs to shell out to Node). So if the author wants a good solution to server-side rendering, just look a little more at KaTeX. On the flip side, I have reverted some of my server-side rendering of mathematics back to client-side rendering, because of considerations like webpage size. On mathematics-heavy pages, I found that pages that would otherwise be about 50KB in size got inflated up to about 1MB after server-side rendering all of the mathematics. After compression the difference was more like 70K, but this difference is the entire size of the (compressed) KaTeX library. I think it is completely reasonable to only transmit LaTeX markup over the wire, and have a client-side library take care of the presentation (as we do for HTML, SVG, ...). I've also investigated MathML, but cross-browser support is terrible and has been for years. You also still get the size explosion problem, because LaTeX markup is just so much more compact than whatever MathML soup is equivalent. [1]: https://katex.org/ https://katex.org/
- akdor1154 5y ago
  MathJax can also (apparently) render MathML on Chrome. Maybe the answer is: Write maths notation on your site with MathML. (You'd probably want to preprocess LaTeX notation into MathML some way, because MathML isn't fun to write by hand in the same way that septic tanks aren't fun to unblock by hand.) This will be displayed natively in Safari/Firefox, and be accessible to screen readers (apparently.. I don't use one so don't know what it's like in practice). Serve MathJax to Chrome users so they can see your maths. ?
- BlackFly 5y ago
  Well I hope that you took efforts to avoid the other nasty side effect of client side rendering at least: page content jumping all over the place when the page reloads and the scrollbar not initializing at the right location (so cross page anchors are useless). I personally solved that problem by stuffing the equation into a separate vue component and putting the katex compilation into the render function. Indeed, a dedicated equation HTML tag supporting latex (with what packages though?) would be nice. Getting the equation numbering to work nicely in an automatic fashion was a bit annoying though. I appreciate your comment on the page size, since I was considering moving to server side rendering via nuxt and hadn't made this consideration.
mdoms 5y ago
The author treats SVG as equivalent to PNG and complains that > Images are impossible to use with copy/paste You can select and copy text in an SVG[0] > Images are not nearly as responsive, and are difficult to style. Line breaking, fonts, and even colors are difficult to change when using images This is partially true, but it's not difficult to inherit your page's text colour for SVGs. > Images are completely opaque to users in need of screen readers Not true of SVG's with text - and in fact SVGs can have alt text which could in some cases by much more accessible to screen reader users that the raw equations[1]. [0] https://www.w3.org/TR/SVG/text.html https://www.w3.org/TR/SVG/text.html [1] https://css-tricks.com/accessible-svgs/ https://css-tricks.com/accessible-svgs/
dhosek 5y ago
I've had a similar argument for years. Before there was CSS to do rounded corners on boxes, it was typical to do a hack with JS building up the rounded corners pixel by pixel. On the project I was working on, since all the rounded boxes were generated by the same component, I eliminated the client-side JS for a statically-generated set of output that did the same thing. It rendered noticeably faster. And I was overridden by the other team members who apparently felt it was better to manage this through having every single client render the rounded corners on their underpowered computers (this was for a company intranet and from the discussions about system requirements, most of the machines were running old versions of Windows on old PCs) instead of doing it once and for all on the server.
alahijani 5y ago
A translating reverse proxy could do the server-side rendering, and also cache the TeX snippets for faster response time.
nichos 5y ago
I thought adding LaTeX (or similar) to the Gemini protocol was a huge missed opportunity. It could be the standard for research and universities.
- JustFinishedBSG 5y ago
  Yes, the absence of inline images (and therefore SVGs) really make Gemini completely useless for many many things, including maths.
chaoticsystem 5y ago
I have use MathML with Latex2mathml python library https://github.com/roniemartinez/latex2mathml https://github.com/roniemartinez/latex2mathml. And is great, the fact that you can render math without a single line of java script. But at the end, only Firefox fully supports MathML, without Chrome support is kind of useless.
jwilber 5y ago
This wasn’t very in-depth at all if I’m being honest. I recently used KaTeX for server-side equation rendering with node. I think people tend to just use mathjax because it’s the more popular solution for web-based equations, but after spending a week trying to render server-side with mathjax and failing, I used KaTeX and haven’t looked back.
foxes 5y ago
Why do we except a server to render maths for us? The client renders HTML/SVG. Maths is text, we should take the same approach. There just needs to be a compact markdown for maths notation. MathML is an awful mess.
kebman 5y ago
Ah, math rendering. The last bastion of HTML.
TheRealPomax 5y ago
The state of maths on the web, as someone who uses a lot of maths on their website[1] is to recognise that loading times on the web shouldn't exist, and you should just turn your formulae into images that you load using `loading="lazy"`. And of course, to make sure they fit any resolution: generate SVG images. And no, MathML is irrelevant: you don't care about MathML, and your users don't care about MathML: all you care about is that users can read your formulae, and all your users care about is that they see decent-looking maths. As much as I like the idea of MathML, there is simply no reason to ever use it. Nothing is mining the web for maths, and semantic markup for maths buys you nothing. You have a build system (because your content is generated from markdown or the like. No one who wants to deploy a real site writes pure HTML in 2021), make that generate SVG images by literally just running LaTeX during your build, to replace all your maths with SVG <img> code instead. Because why would you even bother with MathJax or KaTeX, they put the burden on your users, which is ridiculous: you're building your content already, just build static content for your formulae) And sure, does your site have maybe 10 formulae? By all means, use MathJax or KaTeX. But if it relies on maths, generate your graphics offline using actual LaTeX (and this is trivial using github actions[3]) and use <img> elements that point to those SVG images. (I run my maths through xelatex, then losslessly convert the resulting PDF to SVG by first cropping the PDF, then running pdf2svg[2]. Is that a lot of work? No, it is not. It's a one-time setup and it simply runs whenever content gets updated. It's about as no-effort as it gets) [1] https://pomax.github.io/bezierinfo https://pomax.github.io/bezierinfo [2] https://github.com/Pomax/BezierInfo-2/blob/master/src/build/markdown/processors/latex/latex-to-svg.js https://github.com/Pomax/BezierInfo-2/blob/master/src/build/... [3] https://github.com/Pomax/BezierInfo-2/blob/master/.github/workflows/post-merge.yml https://github.com/Pomax/BezierInfo-2/blob/master/.github/wo...
- rhdunn 5y ago
  Accessibility? Being able to copy/paste the formulae into formula editor or solver? Being able to easily style the formula (including for dark themes)? ...
  - TheRealPomax 5y ago
    When was the last time you actually wanted to do that, rather than just wanting to hypothetically raise that possibility for the sake of an argument about web technology? Because in reality, based on my experience at least, no one actually needs that. Folks can copy a formula that they got from an image into wolfram alpha just fine. And the folks who can't don't actually benefit from MathML: they benefit from the JS Selection and Range functions, when site owners take the time to make sure that text-selection of a formula image leads to a LaTeX formula being put in the clipboard, instead. "That's way more work" but since we're all using build systems anyway: no it's not. Write once, thousands if not hundreds of thousands of users benefit. The end.
activatedgeek 5y ago
This article is odd. I use pre-rendered KaTeX with remark [1], plus their stylesheet on the client side. All of the article seems more specific to MathJax than the title seems to convey. [1]: https://remark.js.org https://remark.js.org
helsinkiandrew 5y ago
> they use client-side rendering for static content. In my opinion, this is absurd I'm not a mathematician but what's the problem with client side rendering - I just about only write equations in jupyter notebooks, the syntax isn't great but it seems to work perfectly and scales to the resolution required. Math rendering is far from the most complex thing being rendered on the front end. https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/Typesetting%20Equations.html https://jupyter-notebook.readthedocs.io/en/stable/examples/N...
- Evidlo 5y ago
  It tends to mess with anchor links, as the browser will scroll to the appropriate heading which gets pushed down as rendered content takes up vertical space.
qubyte 5y ago
I use server rendered SVG with mathjax as part of my static site generator. To try to make it as accessible as possible I add a title element with an ID to each SVG and use an aria-labelledby attribute to connect the two [1] (a sample for the interested, scroll about half way down [2]). The title content is the unrendered LaTeX source. I'm very interested in the notion of using HTML and CSS rendering though! Many thanks to the author for pointing out this functionality. [1]: https://github.com/qubyte/qubyte-codes/blob/main/lib/render.js#L20-L42 https://github.com/qubyte/qubyte-codes/blob/main/lib/render.... [2]: https://qubyte.codes/blog/advent-of-code-2017-day-20-task-2 https://qubyte.codes/blog/advent-of-code-2017-day-20-task-2
amelius 5y ago
> they use client-side rendering for static content. In my opinion, this is absurd. Uhh, this happens for anything your browser displays, so why should math be the exception?
sharikous 5y ago
We already have two standardized ways to write math equations: MathML and TeX-like notation. The former is the formal standard, the second is what is overwhelmingly used. It would be great if we could have both natively in the browser, and maybe support for math equations as a system level feature of editors everywhere. But the vomiting-green face-woman emoji gets more money than math equations these days

135 points by uuuuuuuuuuuu 5y ago

Eh. Every client already renders all the HTML into visual format. I don't see what's wrong with rendering the LaTeX too. Sure it would be nice of browsers could render the LaTeX natively instead of using JS.

IIAOPSW 5y ago
given the origin of the web at cern, it's actually surprising that it didn't include LaTeX from day 1.
- Spivak 5y ago
  The web would be so pretty if “HTML” was actually hyperlinked TeX.
  - SiempreViernes 5y ago
    I'm not sure banner ads would be much better if aligned using TeX.
    - BeFlatXIII 5y ago
      Then every web page would have dynamically-inserted underfull hboxen with a badness of 10,000
      - IIAOPSW 5y ago
        roses are red violets are blue underfull hbox on line 192
  - akdor1154 5y ago
    I dunno about that.. imagine npm, but with millions of one line TeX packages.

vortico 5y ago

KaTeX supports server-side Node rendering pretty easily. https://katex.org/docs/node.html https://katex.org/docs/node.html Maybe MathJax does too, but I haven't checked. I use this on https://vcvrack.com/manual/DSP https://vcvrack.com/manual/DSP to parse $inline$ and $$block$$ TeX into MathML with a couple lines of server-side code (simplified for readability): html = require('markdown-it')({html: true, linkify: true, typographer: true}) .use(require('markdown-it-texmath'), {engine: 'katex', delimiters: 'dollars'}) .render(body)

kisonecat 5y ago

I implemented a TeX engine in WebAssembly so you really can run TeX in the browser. You can see a demo of this at https://tex.rossprogram.org/ https://tex.rossprogram.org/ and at https://github.com/kisonecat/web2js https://github.com/kisonecat/web2js you can find a Pascal compiler that targets WebAssembly which can compile Knuth's TeX. Interesting primitives like \directjs are also implemented, so you can execute javascript from inside TeX. The rendering is handled with https://github.com/kisonecat/dvi2html https://github.com/kisonecat/dvi2html for which I finally fixed some font problems. To make it relatively fast, the TeX engine gets snapshotted and shipped to the browser with much of TeXlive already loaded. So even things like TikZ work reasonably well. There is of course a lot more to do! The plan is to convert ximera.osu.edu to this new backend by the fall.

tomrod 5y ago
This is wonderful! I'm a wasm neophyte -- even the set up seems complex to me. Do you have any recommendations for where to dive in?
- kisonecat 5y ago
  I started by playing with emscripten which manages some of the initial complexity.
inamiyar 5y ago
Hello! I'm an osu student that has taken the calc sequence and very much appreciates the effort. I'll be watching the repo for sure
mwcampbell 5y ago
> The plan is to convert ximera.osu.edu to this new backend by the fall. Have you verified that this will not be an accessibility regression for blind users?
- kisonecat 5y ago
  Unfortunately, the current platform we're using isn't very accessible: the \answer{...} blanks aren't converted to speech and don't navigate correctly. The new backend parses some TeX anyway to an AST, and the idea is that we could use that to produce alt text for the math. There's certainly a lot to do.

smoldesu 5y ago

Ha! I used to get pretty pissed-off when I was doing my online math homework, only to find that you couldn't copy/paste the equations into Google. I always thought it was a prevention mechanism, but I guess it was a matter of the technology not being ready yet.

SilverRed 5y ago
Unicode doesn't have many math symbols so you can't copy and paste them like text because they aren't just text. There are textural representations though which can be copied. They just look ugly.
- jimhefferon 5y ago
  ?Barbara Beeton and others have put a good deal of effort into making Unicode and math work together. http://www.unicode.org/reports/tr25/tr25-15.pdf http://www.unicode.org/reports/tr25/tr25-15.pdf
zsmi 5y ago
> copy/paste the equations into Google. Just out of curiosity, why would you want to copy/paste an equation into the Google search bar? Can it solve it?
- zsmi 5y ago
  So I tried it and it seems Google knows the quadratic equation, but it didn't know how to integrate. i.e. this worked in the Google search bar "solve 1x^2 - 2x - 3 = 0" this didn't "Integrate e^x from 0 to 1" Wolfram Alpha did a pretty decent job with the same text string. https://www.wolframalpha.com/input/?i=Integrate+e%5Ex+from+0+to+1 https://www.wolframalpha.com/input/?i=Integrate+e%5Ex+from+0... Looks like you have to go Pro to see the steps though, which is fair enough.

crazygringo 5y ago

> ...they use client-side rendering for static content. In my opinion, this is absurd. Rendering equations client-side doesn't seem absurd to me. All of HTML and CSS and SVG is rendered client-side, why shouldn't equations be too? I'm completely unclear why the author thinks equations specifically should be rendered server-side. Do they think HTML pages should be delivered as prerendered images or SVG's too...? Because it seems like the philosophy would apply the same way.

pavon 5y ago
Yeah that is my take as well, and I'm rather perplexed at what the author would like server-side rendering to output given they don't like PNG and SVG either. HTML and CSS weren't designed with math in mind, and while you can force them to do the job (like KaTeX), the result is sub-optimal. It looks fine, but it requires you to transmit orders of magnitude more data, which isn't very suitable to accessibility software (well the HTML/CSS part that is - it also includes a MathML representation which is more screen-reader friendly). I definitely agree that is crummy for pages to display the markup first, then swap it out with rendered content later. Does anyone know why common libraries do it this way? Web development isn't my strong point, but I thought it was pretty easy to make the browser run some javascript before it renders the page.
- Evidlo 5y ago
  Its not good for users to be stuck on a blank screen while waiting for everything to load.
chrismorgan 5y ago
You’re misunderstanding what “client-side rendering” means. It’s not about rendering to images, it’s about rendering to HTML/CSS/SVG/whatever. “Client-side rendering” means that what is served contains something not in the eventual form you desire to present it, and that it depends on some client-side scripting to convert it into the desired form. When the page loads, it will first show perhaps nothing or perhaps something like $e^{-\frac{x}{2}}$, and then the scripting will kick in and replace that with the proper HTML/CSS/SVG/whatever markup for the equation that the browser knows how to display. “Server-side rendering” means that you do this translation from $e^{-\frac{x}{2}}$ to the desired HTML/CSS/SVG/whatever that the browser knows how to display, on the server, so that the browser can immediately display what it receives. Ideally this translation is also only done once, rather than on every request.

neolog 5y ago

The next generation is MathML. It's already implemented in Firefox, Chrome support is coming. https://www.w3.org/Math/ https://www.w3.org/Math/

thayne 5y ago
Firefox has supported MathML for a very long time. And I think chrome had an experimental version it for a while then removed it. I wouldn't hold my breath waiting for universal browser support.
- zamadatix 5y ago
  Igalia picked up the Chromium development, they actually have it in an amazingly good state at this point. This image compares rendering from Chromium with their patches, Safari, and Firefox (in that order) https://mathml.igalia.com/img/mathml-example-gamma.png https://mathml.igalia.com/img/mathml-example-gamma.png That being said I wouldn't hold my breath it'll ship this year either since there is still some work in LayoutNG to be completed at minimum but maybe 2022 we'll all be amazed it finally happened.

moonchild 5y ago

See: mathml.

prezjordan 5y ago

I apologize if this is pedantic but you can absolutely "render" KaTeX server-side: https://github.com/jdan/thatjdanisso.cool/blob/902f1c421b02b9de419f85aeecee94ef1fe781b1/load-article.js#L26-L30 https://github.com/jdan/thatjdanisso.cool/blob/902f1c421b02b... MathJax does not support this because, IIRC, it runs layout calculations in the browser whereas KaTeX passes it off to CSS. If your argument is then that layout calculations should _also_ happen on the server then... I'm not sold and that would be a critique of web browsers and not math rendering.

Waterluvian 5y ago
It sounds like they want PDF. It’s rendered, not some image. But it’s also consistently laid out. I think that’s a neat idea in general. When I make little toy games for the web the part I hate the most is the boilerplate for ensuring every browser, mobile and desktop, gets a viewport of the same ratio. Would be neat to be able to say “give me a 16x9 viewport, and scale everything inside of it depending on how large that ends up actually being on the screen so that the same amount of content is seen by every user.”
- SilverRed 5y ago
  You could create a canvas for your game and everything will be in your control.
- daave 5y ago
  You could achieve this with CSS by using “vw” units for everything, including font sizes

daymi 5y ago

This article is kinda weird--it mentions MathML in passing and then spends a large amount of time on MathJax etc. The correct fix is to have MathML natively on all browsers (no JS)--and Igalia is working on that: https://mathml.igalia.com/faq/ https://mathml.igalia.com/faq/

jfim 5y ago
The worst part about the MathML debacle is that it actually used to work in Chrome a decade ago or so, but then it got removed because there was no real support for maintaining it within the Chrome team.
- bariumbitmap 5y ago
  Yes, it's been almost eight years since Chrome removed their MathML support. The rationale at the time was unspecified security and performance problems: https://www.cnet.com/news/google-subtracts-mathml-from-chrome-and-anger-multiplies/ https://www.cnet.com/news/google-subtracts-mathml-from-chrom... A developer who worked on it, David Barton, had this to say in 2015: > I volunteered for a year and got MathML working in Chrome 24, but Google turned it off in Chrome 25 because I couldn't afford to keep maintaining it for free. (Yes, grumble. Donate your nickels to Google.) There was a security bug, but Google had a fix, which has since been landed in WebKit and the Safari browser, for instance. No one on the Chrome/Blink team cared about MathML, so they preferred removing it to maintaining it. They tell people that a library like MathJax is good enough, but it isn't without native browser support for MathML - it's too slow for many use cases, it doesn't integrate well enough with CSS, etc. (the MathJax team agrees with all this). Presumably as digital textbooks gain in popularity, Google will rethink their position, or schools will have to use a different browser than Chrome (Firefox and Safari would both work). In the meantime, Google has no one working on MathML in Chrome at all, even part-time. Go figure. (And no, I would not work on it again.) https://www.quora.com/Why-did-Chrome-drop-MathML-support?share=1 https://www.quora.com/Why-did-Chrome-drop-MathML-support?sha... There's also a chromium bug report from 2009: https://bugs.chromium.org/p/chromium/issues/detail?id=6606 https://bugs.chromium.org/p/chromium/issues/detail?id=6606 and a WebKit bug from 2005: https://bugs.webkit.org/show_bug.cgi?id=3251 https://bugs.webkit.org/show_bug.cgi?id=3251

daymi 5y ago

This article is kinda weird--it mentions MathML in passing and then spends a large amount of time on MathJax. I'm not sure what the point is. The correct fix is to implement MathML natively in all browsers (no JS)--and, indeed, someone is working on that: https://mathml.igalia.com/faq/ https://mathml.igalia.com/faq/ section "Which browsers support MathML?".

juped 5y ago

What I actually want isn't to run some more d----d javascript "server side", but to process latex to html in e.g. a hugo build.

lmm 5y ago

I still render Markdown on the client. My blog is probably "slow" by 2000s standards, but it's far faster and more lightweight than a typical news website in 2020. Every page involves the browser doing rendering work. HTML is neither fish nor fowl; it's not particularly easy to write by hand, but it's not particularly easy for the browser to parse either. I'm not convinced there are any good use cases for it, and certainly not for CSS. If partial prerendering on the server-side meaningfully speeds up your site for end users then by all means do it. But I would follow "make it work, then make it work right, then make it work fast". Dropping in a single tag to do client-side rendering is more than enough for the 90% case.

chrismorgan 5y ago
Wow, your page goes through about five rendering forms on first load. First it appears in plain monospaced text, then it gets rendered to unstyled HTML, then one stylesheet loads that mostly just makes the text bigger (strapdown.min.css), and then another stylesheet loads that handles the rest of the layout and vanishes the header (readable.min.css), and then finally the header appears again as the Raleway font loads. That’s pretty major content- and layout-shifting, and not at all pleasant to behold. And all subsequent pages go through at least two forms (plain monospaced text, then fully rendered). > Every page involves the browser doing rendering work. Well yeah, but HTML, CSS and JavaScript are different beasts. The browser can optimise HTML and CSS in various fascinating ways to provide a smooth experience and cope with loading problems in generally-useful ways; your site, if the JavaScript execution was effectively done in advance, would load faster, and skip at least the first three forms, going straight to fully-rendered-except-for-the-header or fully-rendered, depending on how quickly Raleway arrives. Subsequent page loads would go straight to the correct rendering. JavaScript, on the other hand, is the most likely to not work, perhaps because it was disabled (including most spiders—client-side rendering is still decidedly bad for SEO, even if Google specifically has mitigated most of that for Google search inclusion), perhaps because it failed to load due to network conditions, perhaps because the browser is old or some such thing. Depending on JavaScript does make a site much less reliable. Sometimes that’s warranted, but I don’t think it is on regular content websites, ever. By using JavaScript in the way you have done, you’ve guaranteed that it will render badly to begin with, that stylesheet loading will not be done smoothly, and that the site is less reliable and accessible. It’s… probably not a big deal, I begrudgingly acknowledge, but it does matter. It may still be faster than most news sites, but you hardly set a high bar there.

joppy 5y ago

The "server-side rendering" aspect of KaTeX is (and always has been, as far as I'm aware) front-and-centre on their landing page [1]. It allows you to input LaTeX and output HTML ready for inclusion server-side - the only thing this HTML needs to support it is the KaTeX CSS. This is very easy to do if your web server or static site generator is running on Node, and only a bit more difficult if it's running on something else (and therefore needs to shell out to Node). So if the author wants a good solution to server-side rendering, just look a little more at KaTeX. On the flip side, I have reverted some of my server-side rendering of mathematics back to client-side rendering, because of considerations like webpage size. On mathematics-heavy pages, I found that pages that would otherwise be about 50KB in size got inflated up to about 1MB after server-side rendering all of the mathematics. After compression the difference was more like 70K, but this difference is the entire size of the (compressed) KaTeX library. I think it is completely reasonable to only transmit LaTeX markup over the wire, and have a client-side library take care of the presentation (as we do for HTML, SVG, ...). I've also investigated MathML, but cross-browser support is terrible and has been for years. You also still get the size explosion problem, because LaTeX markup is just so much more compact than whatever MathML soup is equivalent. [1]: https://katex.org/ https://katex.org/

akdor1154 5y ago
MathJax can also (apparently) render MathML on Chrome. Maybe the answer is: Write maths notation on your site with MathML. (You'd probably want to preprocess LaTeX notation into MathML some way, because MathML isn't fun to write by hand in the same way that septic tanks aren't fun to unblock by hand.) This will be displayed natively in Safari/Firefox, and be accessible to screen readers (apparently.. I don't use one so don't know what it's like in practice). Serve MathJax to Chrome users so they can see your maths. ?
BlackFly 5y ago
Well I hope that you took efforts to avoid the other nasty side effect of client side rendering at least: page content jumping all over the place when the page reloads and the scrollbar not initializing at the right location (so cross page anchors are useless). I personally solved that problem by stuffing the equation into a separate vue component and putting the katex compilation into the render function. Indeed, a dedicated equation HTML tag supporting latex (with what packages though?) would be nice. Getting the equation numbering to work nicely in an automatic fashion was a bit annoying though. I appreciate your comment on the page size, since I was considering moving to server side rendering via nuxt and hadn't made this consideration.

mdoms 5y ago

The author treats SVG as equivalent to PNG and complains that > Images are impossible to use with copy/paste You can select and copy text in an SVG[0] > Images are not nearly as responsive, and are difficult to style. Line breaking, fonts, and even colors are difficult to change when using images This is partially true, but it's not difficult to inherit your page's text colour for SVGs. > Images are completely opaque to users in need of screen readers Not true of SVG's with text - and in fact SVGs can have alt text which could in some cases by much more accessible to screen reader users that the raw equations[1]. [0] https://www.w3.org/TR/SVG/text.html https://www.w3.org/TR/SVG/text.html [1] https://css-tricks.com/accessible-svgs/ https://css-tricks.com/accessible-svgs/

dhosek 5y ago

I've had a similar argument for years. Before there was CSS to do rounded corners on boxes, it was typical to do a hack with JS building up the rounded corners pixel by pixel. On the project I was working on, since all the rounded boxes were generated by the same component, I eliminated the client-side JS for a statically-generated set of output that did the same thing. It rendered noticeably faster. And I was overridden by the other team members who apparently felt it was better to manage this through having every single client render the rounded corners on their underpowered computers (this was for a company intranet and from the discussions about system requirements, most of the machines were running old versions of Windows on old PCs) instead of doing it once and for all on the server.

alahijani 5y ago

A translating reverse proxy could do the server-side rendering, and also cache the TeX snippets for faster response time.

nichos 5y ago

I thought adding LaTeX (or similar) to the Gemini protocol was a huge missed opportunity. It could be the standard for research and universities.

JustFinishedBSG 5y ago
Yes, the absence of inline images (and therefore SVGs) really make Gemini completely useless for many many things, including maths.

chaoticsystem 5y ago

I have use MathML with Latex2mathml python library https://github.com/roniemartinez/latex2mathml https://github.com/roniemartinez/latex2mathml. And is great, the fact that you can render math without a single line of java script. But at the end, only Firefox fully supports MathML, without Chrome support is kind of useless.

jwilber 5y ago

This wasn’t very in-depth at all if I’m being honest. I recently used KaTeX for server-side equation rendering with node. I think people tend to just use mathjax because it’s the more popular solution for web-based equations, but after spending a week trying to render server-side with mathjax and failing, I used KaTeX and haven’t looked back.

foxes 5y ago

Why do we except a server to render maths for us? The client renders HTML/SVG. Maths is text, we should take the same approach. There just needs to be a compact markdown for maths notation. MathML is an awful mess.

kebman 5y ago

Ah, math rendering. The last bastion of HTML.

TheRealPomax 5y ago

The state of maths on the web, as someone who uses a lot of maths on their website[1] is to recognise that loading times on the web shouldn't exist, and you should just turn your formulae into images that you load using `loading="lazy"`. And of course, to make sure they fit any resolution: generate SVG images. And no, MathML is irrelevant: you don't care about MathML, and your users don't care about MathML: all you care about is that users can read your formulae, and all your users care about is that they see decent-looking maths. As much as I like the idea of MathML, there is simply no reason to ever use it. Nothing is mining the web for maths, and semantic markup for maths buys you nothing. You have a build system (because your content is generated from markdown or the like. No one who wants to deploy a real site writes pure HTML in 2021), make that generate SVG images by literally just running LaTeX during your build, to replace all your maths with SVG <img> code instead. Because why would you even bother with MathJax or KaTeX, they put the burden on your users, which is ridiculous: you're building your content already, just build static content for your formulae) And sure, does your site have maybe 10 formulae? By all means, use MathJax or KaTeX. But if it relies on maths, generate your graphics offline using actual LaTeX (and this is trivial using github actions[3]) and use <img> elements that point to those SVG images. (I run my maths through xelatex, then losslessly convert the resulting PDF to SVG by first cropping the PDF, then running pdf2svg[2]. Is that a lot of work? No, it is not. It's a one-time setup and it simply runs whenever content gets updated. It's about as no-effort as it gets) [1] https://pomax.github.io/bezierinfo https://pomax.github.io/bezierinfo [2] https://github.com/Pomax/BezierInfo-2/blob/master/src/build/markdown/processors/latex/latex-to-svg.js https://github.com/Pomax/BezierInfo-2/blob/master/src/build/... [3] https://github.com/Pomax/BezierInfo-2/blob/master/.github/workflows/post-merge.yml https://github.com/Pomax/BezierInfo-2/blob/master/.github/wo...

rhdunn 5y ago
Accessibility? Being able to copy/paste the formulae into formula editor or solver? Being able to easily style the formula (including for dark themes)? ...
- TheRealPomax 5y ago
  When was the last time you actually wanted to do that, rather than just wanting to hypothetically raise that possibility for the sake of an argument about web technology? Because in reality, based on my experience at least, no one actually needs that. Folks can copy a formula that they got from an image into wolfram alpha just fine. And the folks who can't don't actually benefit from MathML: they benefit from the JS Selection and Range functions, when site owners take the time to make sure that text-selection of a formula image leads to a LaTeX formula being put in the clipboard, instead. "That's way more work" but since we're all using build systems anyway: no it's not. Write once, thousands if not hundreds of thousands of users benefit. The end.

activatedgeek 5y ago

This article is odd. I use pre-rendered KaTeX with remark [1], plus their stylesheet on the client side. All of the article seems more specific to MathJax than the title seems to convey. [1]: https://remark.js.org https://remark.js.org

helsinkiandrew 5y ago

> they use client-side rendering for static content. In my opinion, this is absurd I'm not a mathematician but what's the problem with client side rendering - I just about only write equations in jupyter notebooks, the syntax isn't great but it seems to work perfectly and scales to the resolution required. Math rendering is far from the most complex thing being rendered on the front end. https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/Typesetting%20Equations.html https://jupyter-notebook.readthedocs.io/en/stable/examples/N...

Evidlo 5y ago
It tends to mess with anchor links, as the browser will scroll to the appropriate heading which gets pushed down as rendered content takes up vertical space.

qubyte 5y ago

I use server rendered SVG with mathjax as part of my static site generator. To try to make it as accessible as possible I add a title element with an ID to each SVG and use an aria-labelledby attribute to connect the two [1] (a sample for the interested, scroll about half way down [2]). The title content is the unrendered LaTeX source. I'm very interested in the notion of using HTML and CSS rendering though! Many thanks to the author for pointing out this functionality. [1]: https://github.com/qubyte/qubyte-codes/blob/main/lib/render.js#L20-L42 https://github.com/qubyte/qubyte-codes/blob/main/lib/render.... [2]: https://qubyte.codes/blog/advent-of-code-2017-day-20-task-2 https://qubyte.codes/blog/advent-of-code-2017-day-20-task-2

amelius 5y ago

> they use client-side rendering for static content. In my opinion, this is absurd. Uhh, this happens for anything your browser displays, so why should math be the exception?

sharikous 5y ago

We already have two standardized ways to write math equations: MathML and TeX-like notation. The former is the formal standard, the second is what is overwhelmingly used. It would be great if we could have both natively in the browser, and maybe support for math equations as a system level feature of editors everywhere. But the vomiting-green face-woman emoji gets more money than math equations these days