\Editorial

Category Archives: Editorial

Typesetting Math for the Web

Typography mat­ters. Bad typog­ra­phy can be as much of a bar­ri­er to the read­er as bad writ­ing. Conversely, good typog­ra­phy can sim­pli­fy the pre­sen­ta­tion of com­plex con­tent. This is espe­cial­ly true of math­e­mat­i­cal formulae.

Unfortunately, there does­n’t seem to be a stan­dard way to decent­ly ren­der for­mu­lae for the web — and basic HTML sim­ply isn’t expres­sive enough. MathML seems to be a fair attempt at a stan­dard, but like any XML lan­guage, it is over­ly ver­bose and hard to read. Also — not an entire­ly fair mea­sure of qual­i­ty, but nev­er­the­less of prac­ti­cal con­cern — there does­n’t seem to be MathML sup­port in WordPress, nor any easy way to enable it.

Instead, devel­op­ers seem to have ral­lied around the idea of ren­der­ing LaTeX to an image that can then be includ­ed. This at least allows the for­mu­lae to be view­able with prac­ti­cal­ly any device — but if you care even the slight­est about typog­ra­phy, you will lie awake at night because of the align­ment, spac­ing, type­face, and scal­ing issues that come from try­ing to make an image, not look like an image.

These issues are not inher­ent to the ren­der­ing, but rather a con­se­quence of the way images and text inter­act in HTML. Indeed, the ren­der­ing has its own align­ment and spac­ing issues, that varies between ren­der­ing ser­vices. To my eye, the best ser­vice is the Google Visualization API, which has LaTeX ren­der­ing as an undoc­u­ment­ed fea­ture. That’s not to say that Google’s ren­der­ing is with­out issues — it has a ten­den­cy to place sym­bols too close togeth­er, and has no appar­ent way to influ­ence even basic formatting.

An alter­na­tive to this is MathJax, which uses a com­bi­na­tion of HTML, CSS and Web fonts to ren­der for­mu­lae as text. In the­o­ry, this should alle­vi­ate many of the issues from image-based approach. In prac­tice, the typog­ra­phy is hor­ren­dous — most notably, near­ly every char­ac­ter, num­ber and sym­bol is ital­i­cized. Bad!

As a com­pro­mise, I have set­tled for using basic HTML for­mat­ting when pos­si­ble (e.g. for sub­script) — this makes inline for­mu­lae appear fair­ly coher­ent with their sur­round­ings — and a LaTeX plu­g­in for WordPress. This seems a fair com­pro­mise between con­ve­nience and qual­i­ty, but a com­pro­mise nonetheless.