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

When writing T_{e}X and L^{a}T_{e}X 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^{a}T_{e}X 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 `span`

s 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_{e}X and
L^{a}T_{e}X. 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^{A}T_{E}X. Not bad, but not great
either. Let’s try to get the kerning right. The T_{e}Xbook 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_{e}X 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^{a}T_{e}X. 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_{e}X and L^{a}T_{e}X 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.

## Comments

— erpcrm, 18 December 2008

— Yogsototh, 26 October 2010