Author Archives: Peter Krautzberger

It has not escaped our notice…

Just a quick post to show I’m still alive. One of the reasons why I haven’t gotten to write recently is that we moved (yet again) to the final-for-oh-I-don’t-know-who-knows-hopefully-a-few-or-more-years-that-would-be-nice-for-a-change destination.

And it seems my new neighborhood is trying to tell me something.

Street sign, Felix-Klein-Str., Göttingen

Street sign, Riemannstr., Göttingen

Street sign, Gaußstr., Göttingen

Oh well. I supposes that’s what you get for moving to the town where these folks spent very productive years.

ASCIIMathML to the rescue

Doug Schepers recently asked me for some advice for HTMLizing some mathematics. Doug is one of those exceptional people at the W3C who thrive in pushing the web and its standards forward. In this case, Doug was looking at this bit of audio engineering in the context of the Web Audio spec.

As you can see, that text file has some beautiful ascii-art mathematics. Of course, Doug wanted to code this up properly for the web which means using MathML and the question was: what’s the easiest way to do so?

It’s not hard to see why I suggested ASCIIMathML (or asciimath). Asciimath was written by Peter Jipsen with whom I happen to have two lucky personal connections — first, I luckily shared a room with Peter at BLAST 2010 (way before I got involved with MathJax, see these posts), second I was lucky enough to enjoy his hospitality a couple of times while we lived in LA, including Peter taking me surfing for the first time in my life — good times.

If I remember correctly, asciimath was born out of pure necessity — finding a way for college students to write mathematics on the web. These kids were accustomed to graphing calculator style input, and Peter, of course, believed that MathML was the right way for an output on the web — so in 2004 he started to write this beautiful JavaScript library to convert from one to the other.

Later on, David Lippman wrote a nice MathJax addon, which was ultimately re-written by David Cervone, and so nowadays you can use asciimathml in any browser by combining it with MathJax.

Why Asciimath is awesome

First off, if you know some TeX I would probably describe asciimath as “TeX without backslashes”. Because, really, why not write alpha or phi for %alpha, phi%? Similarly, why not just write sin for %sin%? (Oh, and let’s have a fun discussion about phi vs varphi, Unicode vs TeX. But not a problem, you can switch to whichever convention you like using MathJax.)

Second, if you know markdown, then I might describe asciimath as “markdown for math”. It’s not TeX in all its (infamous) glory or even MathJax’s TeX-like input with its many advantages for the web. It’s much more restricted and that’s by design — much like markdown is.

Given its target (MathML) and its general webbiness, asciimath works smoothly with Unicode, which adds to its readability and usability (and internationalization). Everyone will probably appreciate that -> and work interchangeably (both of which seem much saner to me than anything LaTeX would suggest). So f: A -> B and f: A → B produce identical MathML: %f: A -> B% and %f: A → B%.

Similarly, asciimath’s minimal approach does not need TeX’s cumbersome \begin{} \end{} environments, but many important tools are available in much simpler ascii/computing notation, e.g., ((a,b),(c,d)) for matrices: %((a,b),(c,d))%.

Making asciimath better

Personally, I think asciimath probably deserves the title “markdown for math” although I think the title will go to TeX-like input after all (but that’s another post).

What I’d really love to see is more people pushing asciimath further. The official ASCIIMathML repository is now hosted on MathJax’s GitHub account and we even grabbed a nice domain at www.asciimath.org to have an open page using Github pages for people to easily contribute enhancements to.

There’s a lot of low hanging fruit in the form of improving the quality of the MathML (e.g., a\\b should probably produce <mfrac bevelled="true"><mi>a</mi><mi>b</mi></mfrac> instead of the problematic <mi>a</mi><mo>/</mo><mi>b</mi>) and of course asciimath by design should probably not strive to be feature complete (i.e., generate any kind of MathML) which means there should be situations where asciimath will simply fail and, much like markdown with HTML, it could perhaps gracefully mix MathML and asciimath.

But in any case, it’s great to have this alternative to TeX-like inputs because TeX is ultimately holding math on the web back (but that’s another post, for another time).

Browsers should be commodities

I think there is a world market for maybe five browsers
— not Thomas J. Watson

As my one two regular readers know, I work for a project that’s all about cross-browser support. It might, therefore, not come as a surprise that I use three browsers when working. That’s mostly because I love incognito-modes; not just for the slightly increased privacy beyond ghostery/disconnect/abp but for the convenience of a clean, nowhere-logged-in browsing experience. However, a sense of realism forces me out of incognito-mode, so I spread things out.

On the desktop, I use Chrome for all Googly things (email, docs etc) and all social things (social networks, feed readers etc), Firefox (in privacy mode) for work things (Github etc) , and Chromium (in incognito mode) for other things (aka bouncing around the intertubez). I guess I also sometimes use “Web” (the Gnome browser; weird name) because it’s WebKit and every so often I spin up one of Microsoft’s testing VMs for IE. On my Android devices I use Chrome and Firefox mobile (I tried Opera and Dolphin as well but never felt like switching). “Manual” browsing I usually do in Chrome incognito tabs, links from other apps get opened in Firefox (because, trust). Maybe I should add the Wikipedia-beta app (which is so much better now) but I’m lucky to be on KitKat on all devices (no more horroribly-ancient-WebKit in apps) so browser-wise, I’m ok. And I feel the need to mention duckduckgo which is simply awesome (w00t! I just found out there’s Android app. Gotta try that.)

But then there’s an iPad in my home (where I’m only a guest). And of course, there are no choices for browsers: Safari is all you get. (In case you didn’t know it already, all browsers on iOS have to use the underlying mobile Safari as a rendering engine because Apple’s TOS forbid all browser engines in the app store). I think this needs to change.


Somebody recently pointed out to me that after the convergence following the browser wars, we seem to be in a phase of (massive) divergence. And it’s not going too well. Browser vendors are doing crazy stuff all over the place. Chrome gets a lot of heat (pulling MathML, CSS regions, threatening XSLT), though I find myself defending them more often than not because they are, at least, transparent (and they’re also doing cool stuff like the earliest web components implementation, the CSS font loading API, the (failed) WebIntents etc). IE is like Chrome, just without the positive transparency. How crazy is it to read over at Murray Sargent’s blog that IE is using a MathML-capable rendering system yet MathML is “not planned” in the IE dashboard? Then there’s Apple which does things like happily touting MathML support when a) it’s still enormously limited and b) it was all done by 3-4 volunteers (not together, mind you, all fighting by themselves, one following when the other burned out); or using the (non-standard) Pages engine in iBooks (only for iBooks Author books but still a heck of a bad practice).

Don’t get me wrong, fundamentally, I think that’s ok — divergence needs to follow convergence. But I think it might take the same level of regulation that we saw in the browser wars to ensure we’ll see convergence again. Currently, browsers are more like utilities, yet essentially unregulated. While desktop statistics are slightly better (but not actually good), mobile is an alarming monopoly. Safari on iOS, Chrome on Android; that’s it. Sure, you can get Firefox for Android etc. but those browsers are at a massive disadvantage. Back in the day, Microsoft was forced to actively help users to install non-IE browsers (well, in the EU at least). The same should be done for all OSs, including mobile, and possibly even more in terms of apps/webview etc. (Granted, for FirefoxOS, this seems impossible; but just because Mozilla is mostly a positive force doesn’t mean they can get a free pass.)

In the long run, I think, we need browsers to become commodities. For this they need to become easy to develop, to modify and recombine — and with regulations to prevent abuse like we saw on Windows and we see on iOS. We need hundreds, maybe thousands of browsers, dozens of layout engines, modular, recombinable etc. I would love to be able to “compile” my own browser — take some MathML support from one place, CSS modules from another, accessibility features from a third etc. pp. Not in the days-gone-by XML-dreams of modularization but in the “hey, code-for-kids teaches you to write an HTML9 layout engine” or in a breach-but-for-real way (i.e., not just on top of Chromium), or (let’s go crazy) write an HTML rendering engine in TeX or lolcode (what’s the difference, really?).

Really, there simply has to be room for more than 5 browsers in the world.


PS: Yes, this is mostly about “layout engines”, not “browsers”. To most people the distinction is meaningless.

MathJax best practices: avoid display:none

At MathJax we often get questions about specific examples of content / web design. Most of the time, people will show up on the MathJax User Group (the preferred choice), StackOverflow (semi-officially supported), and through our contact form on mathjax.org (not the right choice but sometimes necessary for restricted users who can’t post to either of the above).

Almost always, the problems are easy to track down (e.g., the infamous 15s delay if a custom configuration/extension/etc has an incorrect loadComplete call), sometimes they are bugs (e.g., the recent Chrome/WebKit webfont loading bug), but of course every so often they hit on the subtleties that make what MathJax does so hard (ex/em matching, webfont detection etc.).

A surprising recent example for the latter revolves around the use of display:none. It usually comes up in reports of broken layout but the other day there was an interesting performance issue. To understand the second, it helps to understand the first.

The layout trouble with display:none

The rendering issues sometimes seen for content which starts off with CSS display:none and later made visible stem from a simple problem: browser engines won’t actually layout elements with display:none. MathJax on the other hand, needs to take a few vital measurements (basically widths and heights) to produce a correct layout — and these measurements are not available when the content wasn’t laid out by the browser.

To work around this predicament, we could just leave it to the author to work as if content with display:none was dynamically loaded content — and force them to trigger a manual typeset when the content is revealed. But that’s silly because the content is there, we should damn well use it.

So to work around display:none, MathJax does something quite simple: it moves the content into an invisible element that does get laid out — using visibility:hidden with zero dimensions. Then MathJax can take the measurements, produce good rendering and put the rendered output back to the original location.

Now there’s an obvious problem with that approach: where would you move the content to do the rendering? After all, just because something is display:none doesn’t mean it has no context. It might be in a completely different CSS context (think: hints to a homework problem, sidebar content, menus), or the context might change once it becomes visible (think: popup footnotes/references, knowls). In other words, MathJax output in some other context might get screwed up when put back into the original context (e.g., matching font sizes correctly, dealing with inherited CSS). Of course, more often than not, this will work well but it is a general problem and should be avoided.

(Another way might be to use mutation observers. Besides supported being limited, I think there’s an argument to be made that layout should happen right away if possible. But it should probably become an option via an extension.)

a surprising performance issue

Recently, we saw a sample where all this magic had a very different side effect: serious performance issues. In that sample, hundreds of equations were hidden away with display:none. This meant that MathJax had to shift those around in the DOM — and especially mobile browsers did not like that at all. What made matters worse was that the MathJax status messages gave no useful indication of what was going on, instead hanging at unrelated points — because MathJax currently doesn’t have a signal to catch a delay for such a “simple” action like laying out display:none. In the end, the sample (with 2000+ equations) left the user with the impression that their mobile browsers were hanging/crashing — just because of all these necessary layout shenanigans! Darn!

the moral

The moral of the story is: use visibility:hidden, e.g., position: absolute; top: 0, left:0; width:0, height:0, overflow: hidden; visibility: hidden;), or tell MathJax to skip the content and manually queue a typesetting call when you reveal hidden content. If you want to put in some extra work, use visibility:hidden, let MathJax skip the hidden content and then queue a typesetting call for the hidden content after MathJax is loaded; that way the hidden content will be typeset only after the visible content is done (on MathJax’s initial pass).

Any which way, don’t get caught in bad layout or performance issues related to display:none!

Carnival of Mathematics 111

The math blogosphere is a friendly and relaxed placed. But there is one rule, I believe, we should all abide by: when The Aperiodical calls, you answer.

And so I’m honored to join the un-secret society of Carnival of Mathematics hosts. Indeed, the list of former and future hosts over at The Aperiodical (who took over the organizational stress two years ago, stepping into the tremendously large footsteps of Mike Croucher of Walking Randomly), this list reads like a who-is-who of true math bloggers (the kind that cares for blogging as a community and art form). If you’re not on it, do yourself a favor and volunteer right now. I’ll wait. Honestly, I will. This post will still be here when you get back; I promise.

Step closer, dear friend. Excitement awaits!

In the time-honored tradition, let us remember that 111 has many marvellous properties. However, if I were forced to name a favorite, I could not decide between the fact that the smallest magic square containing 1 and otherwise prime numbers, has a magical constant of 111, as well as the simple beauty of being a palindromic number.

  • When you enter our attractions, you are almost unnaturally drawn to an oldie-but-goldie, an attraction worth a visit every time the carnival is in town: John Baez’s Beauty of Roots. As with Vincent Pantaloni (@panlepan) put it: “The best math I stumbled upon this month is this visualisation of polynonmial roots”.

  • Then stop by Antonio Sanchez Chinchon since he shares with us his mnemoneitoR, to translate numbers into easy-to-remember phrases inspired by books to generate funny mnemonic rules.

  • But don’t stop there, wonders await as AP Goucher gives us the elliptic curve calculator, a fixed page paper slide rule using elliptic curves.

  • And while you take a break, make sure to sit down and listen in on Alexandre Borovik’s Math under the Microscope pointing us to this New York Times article on a simple one-time exercise that might prevent community college students from dropping out of math classes.

  • But throw yourself back into the crowds of the carnival because when Colin Beveridge (of Flying Colours Math) was asked why he loves math, he wrote a short and sweet post to make his answer public. As luck will have it, a student asked Stephen Cavadino of cavmaths the very same, and so we can enjoy another answer that might inspire future students to grow their own and personal passion for mathematics.

  • By now you’re hungry and rightfully so. However, if you ever wondered where to place a hot dog stand, and how to adapt when the best customer moves into a motorhome, then fear not — David Orden at Mapping Ignorance will fill your stomach with a great post, taking you from Sylvester’s original question back in 1857 all the way to today’s cutting edge research.

  • With a full belly, let’s head over to the Aperiodical, where Paul Taylor tackled the mind-bending and subtle hidden maths of the Eurovision song contest while Katie Steckles provides us with a recap of Matt Parker’s appearance on the BBC’s consumer moanfest, Watchdog, where Matt helped everyone get their percentages right.

  • And while you leave, why not trust him when the Aperiodical’s Christian Perfect points you in the direction of Nick Berry’s excellent blog DataGenetics, with a post that will introduce you to the wonders of Amidakuji, bringing together braid theory and a very old arcade game.

  • Then go on and follow Katie Steckle to visit Goading the IT geek‘s post on the deceivingly simple problem of calculating averages.

  • And if you find yourself in a part of the Carnival you have already visited, why not take a chance and run into Stephen Cavadino’s posts on mathematics on children’s playgrounds and small puzzle on the number 71?

  • Back on the main road through the carnival, you’ll see in the far end Alex’s adventures in numberland, where Alex Bellos has learned from Joseph Mazur how surprisingly new mathematical notation is.

  • And if you like to gamble, dear friend, worry not. The BBC’s Janet Ball can tell you a story that might encourage you, how the (in)famous MIT blackjack team won enormous amounts of money tackling the odds with their mathematical prowess.

  • Behold, the Mechanical Turk is nothing against our next mind-bending adventure as Andrea Hawksley takes you on a dive into Non-Euclidean Chess!

  • After his shocker, cool down a little and enjoy the talented Shecky Riemann sharing with us his interview with passionate math-ed blogger Fawn Nguyen.

  • Nest step into the ghost house at Google+, where Richard Green took everyone on a journey from simply squaring prime numbers to monsters and moonshine and some of the most complex and arduous mathematics of the 20th century.

  • In our version of the house of mirros, behold: Nim and Fractals — what could go better together? The amazing Tany Khovanova provides us with the background on her latest paper with one of her high school students in MIT’s PRIMES project

  • But you obviously cannot get enough! Well, then, we dare you to follow The Aperiodical’s Peter Rowlett into the long, long list of podcasts for university math students. Only the bravest have listened to them all!

  • As immortal challenges go, Chris Burke of (x,why?) celebrates overcoming one: the 30 posts in 30 days blogging challenge with a fine post on the struggle students face with piecewise functions.

  • For the craziest ride of this carnival, be sure to stop by Matifutbol where, just in time for the start of the World Cup 2014 in Brazil, Herminio’s post on trees and googols at the World Cup will take you on a wild trip to all possible competitions, the Wedderburn-Etherington number and the very edge of the known universe, making you appreciate how simple life will be over the next 4 weeks.

  • If this is too wild, get your dose of World Cup math blogging at Matt Scroggs‘s who will tell you how many Panini packages you really need to buy to complete that Panini book you’ve been hiding under your bed all these years.

  • The strongest man in the world cannot resist the powers of set theoretical forcing. And Asaf Karagila will make sure you won’t wrongly use the analogy of field extensions to explain forcing.

  • And as you leave this Carnival behind, excited, exhausted, and content, you might still turn back for that one last ride, that one last attraction. So head over to Patrick Honner / Mr Honner as he takes on the The Grant Wiggins Conceptual Understanding Challenge, allowing us, through his response, a peek into that insightful brain of his.

And so the Carnival comes to an end and we move on. As we must. Always.