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. Continue Reading →

Clean HTML from Word: a Hack

We’ve been exploring ebook production here at Sherprog, and it seems like the best way to produce a high-quality EPUB or MOBI ebook using consumer tools involves starting from HTML. I’ve written about the inadequacies of InDesign’s export to HTML and EPUB, which is a problem many small publishers undoubtedly face. But individuals who publish or self publish ebooks are probably working from Microsoft Word or another common word processor. Unfortunately, Word also tends to produce messy HTML via its native save-as HTML function. So how do you get clean HTML from Word? I would like to present a life hack.

The Problem

Not very clean HTML from Word

Classes and spans and styles oh MY

When you export HTML from Microsoft Word, what you tend to get is a class and a span with styling info for every paragraph. This is highly unnecessary, and frustrating if you are trying to control your text’s formatting for web or ebook publication. In order to clean up this HTML to any web developer’s reasonable standards, you would have to remove all these tiresome span tags and CSS declarations just so you could do the same work with a handful of human-designed CSS declarations for paragraph style. I have done this before, and manually. It took several hours to work through a novel-sized manuscript using search and replace to knock out these span tags one related group at a time in a text/code editor.

Necessity is the mother of hack.

That is when I noticed that I routinely pasted Microsoft Word content into WordPress and could hit publish and magically get a reasonable webpage every time. I went to a blog post and used my browser’s “view source” option to take a look at exactly what was happening and, bingo-automattico, there was beautiful, simple HTML with every paragraph in a nice <p> tag and not a lot else going on! Continue Reading →