Don Knuth’s T_eX is a computer typesetting system frequently used, loved, and cursed by mathematicians, computer scientists, and other academics. L^aT_eX is a document preparation system built on top of T_eX — it’s actually the way most people who use T_eX use it. I thought it’d be fun to write up how to mark up and style the T_eX and L^aT_eX logos in plain old semantic HTML and CSS. I think my solution looks nice, is semantic, and degrades gracefully.

When writing T_eX and L^aT_eX in plain text, people traditionally write TeX and LaTeX. So that’s where we’ll start things out, by simply writing TeX and LaTeX in our HTML. It’s nice to keep this as the textContent of the markup, so that text-mode browsers get something appropriate and idiomatic.

We’ll need elements for the ‘a’ in L^aT_eX and for the ‘e’ in both. While sub and sup immediately come to mind, given the (very) rough semantic match and their default rendering, I don’t think the decision to go with them is clear-cut. If you think using them in this case is semantically abusive, go ahead and substitute spans in for them. You’ll need to adjust some of my CSS selectors as well.

T<sub>e</sub>X
L<sup>a</sup>T<sub>e</sub>X

Now we have T_eX and L^aT_eX. I’d like to make the A and E uppercase, by using a text-transform CSS rule, but I don’t want to apply such a style willy-nilly to sub and sub elements. Looks like we need some kind of wrapper element.

.tex sub, .latex sub, .latex sup {
  text-transform: uppercase;
}
…
<span class="tex">T<sub>e</sub>X</span>
<span class="latex">T<L<sup>a</sup>T<sub>e</sub>X</span>

That produces something along these lines: L^AT_EX. Not bad, but not great either. Let’s try to get the kerning right. The T_eXbook defines the \TeX macro like so:

\def\TeX{T\kern-.1667em\lower.5ex\hbox{E}\kern-.125emX}

This translates into CSS easily; the units are exactly the same.

.tex sub, .latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

There’s a catch, though: the \TeX macro presumes that the E is the same size as the T—but by default, browsers reduce the font size of sub. So let’s squash any strange font sizing (while still respecting the surrounding page’s type choices):

.tex, .latex, .tex sub, .latex sub {
  font-size: 1em;
}

We’re done with the E, and can now write T_eX with abandon. Let’s move on to \LaTeX’s A. I found the definition of \LaTeX in an essay by David Walden:

\def\LaTeX{%
  L\kern-.36em
  {\setbox0=\hbox{T}%
    \vbox to \ht0{\hbox{\the\scriptfont0 A}\vss}}%
  \kern-.15em
  \TeX
}

Take another look at its output: L^aT_eX. The A is reduced in size, but moved up so that the top of the A is on the same line as the top of the adjacent T. We can emulate this in CSS by doing two things: first, reducing the sup’s font size to some portion of 1 em, and then increasing its vertical-align by the difference, so that font-size and vertical-align add up to 1 em, the height of the T. We can handle the kerning just like before.

Here’s what I ended up with:

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}

And there you have it. Markup for the T_eX and L^aT_eX logos which look nice, are independent of typeface and other page styles, and degrade reasonably well.

If you found the above at all interesting, you should definitely check out The Elements of Typographic Style Applied to the Web: A practical guide to web typography.