How to Code Math in HTML / CSS

A Labor of Love

Seeing HTML was developed by some nerds at CERN, it’s kinda weird that there’s no obvious and simple way to make pretty math with it, right? In developing math learning games for our project Study Putty (“Where the Cool Kids Go to Scrape by on Tests”), I found myself face-to-face with this issue: just how does one code complex math in html?

Math in HTML--Test shot at Study Putty

First, a little background. For those who don’t know, HTML stands for “hat and taco markup language,” because of all the ‘<‘ and ‘>’ you need to use, being that they look like pointy hats or taco shells getting folded. Hence the technical name for this language.

While many fine publishers of Internet content opt to use images to represent expressions, it was my belief that with a little creative HTMLing/CSSing, I could do it in less time than if I had produced static images of the math formulas I needed. Plus, this way the formulas would be guaranteed to match the font and general styling of the page in which they would be displayed, even if that styling should subsequently change. But what about LaTeX, you say? MathJax? Man, ain’t nobody got time to learn that. I’m a web designer, not some nerd or something. Oh, wait. Wait. Yes, I am being informed being a web designer qualifies me.

And also that it is highly suspicious that I know to pronounce LaTeX like LAY-TECH.

The Distance Formula: A Square Root in HTML

My first specific problem was how to draw a radical in HTML, especially one where the bar would cover several terms. Getting the root of the radical (translate that into Latin for linguistic recursion fun, Mr. Chomsky!) is easy: the HTML character entity reference &radic; will do the trick.

&radic;

Simple enough. But the bar? I Googled “radical html.” If you are thinking that’s silly–all html is totally radical, right you are. But it led me to this guy who had a startlingly simple answer to get me on my way.

(Δx)2+(Δy)2
<span style="text-decoration: overline">

After assuring myself “Well, duh I knew that” a couple of times, I moved on. The next problem is that if you just use <sup> for the exponents with the overline, the overline gets broken up. You’ll probably see it below with Chrome or Safari, but maybe not Firefox. Apparently some browswers’ <sup>s are more suped-up than others.

(Δx)2+(Δy)2

But then to fix this you can do the following in lieu of <soup> tags:

<span style="font-size: 12px;vertical-align:25%;">

The best size and alignment will vary by font and the CSS for the page where you’re going to implement your math. So trial and error, my friend; there is no golden number in math.

Oh, wait, I’m being told there is.

φ

&phi;

But I digress.

In addition to manually styling the exponents, I used the same vertical-align attribute to nudge “the hook” of the radical up 10% of a line. (I’m sorry if you can’t follow my technical lingo here–“the hook” is what mathematicians call it, I believe.) You can probably see the slight difference between the first and second version of the expression above. Again, the contrast may be more…radical…in different browsers.

The Midpoint Formula: Fracking Fractions and Parentheses

So what I learned here is that I should think of math in html like painting. For each element you need to place in your mathematical expression, you should think, where do I want to paint this character, and how big? Look at the example below. This philosophy is why there is a <span> for almost every character. The giant parentheses perhaps illustrate the idea best. If you think of each character as its own, moveable element, and you know a little HTML/CSS, you can solve all sorts of problems.

You can create all sorts too, but I’m trying to be an optimist here.

(x1+x2y1+y2)
     2        2
<span style="font-size:1.25em;">
    <span style="font-size: 1.5em; position:relative; bottom:-0.4em;">
    (
    </span>
    <span style="text-decoration: underline">
    x
        <span style="font-size: 9px;">
        1
        </span>
    +x
       <span style="font-size: 9px;">
       2
       </span>
    </span>
    ,&nbsp;
    <span style="text-decoration: underline">
    y
        <span style="font-size: 9px;">
        1
        </span>
    +y
        <span style="font-size: 9px;">
        2
        </span>
    </span>
    <span style="font-size: 1.5em; position:relative; bottom:-0.4em;">
    )
    </span>
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2
</span>

The lim of Love

lim ƒ(love) love→exasperation

If you haven’t left off reading in favor of Googling MathJax instead, you may be thinking “Boy, that looks laborious.” Well, maybe. Maybe it’s a labor of love, but if you have the blood of a layout designer in you, your whole work is a labor of love, and unlike specialized math markup systems, with html, you can control every aspect of the appearance, and if you’re into visual layouts as I am, I know there is one thing you like and that is minute control over EVERYTHING.

The main limitation here is browser-dependency. Even with a specific font embedded and specific styling attributes for my text, I find Chrome tends to display my vertically-aligned characters a little differently than Firefox and Safari. I also find that “the browser that shall not be named” (hiss!) displays the legend of the limit above indented a bit. But so far I’m finding the appearances are close enough not to trouble me too badly.

The second limitation is–I’ll admit it–efficiency. I had a set of <20 basic geometry formulas to render in html. If I were writing an academic paper that was ~50% mathematical proofs, I’d still be rolling the stone on that Sisyphean task. But if you’re just looking for a way to post some maths on a website, math in html is not too tricky and may be preferable to learning a new markup language or doing a ton of image work just to get the job done.

 

Leave a Reply

Your email address will not be published. Required fields are marked *