TeX and LaTeX logo POSHlets
Don Knuth’s TeX is a computer typesetting system frequently used, loved, and cursed by mathematicians, computer scientists, and other academics. LaTeX is a document preparation system built on top of TeX — it’s actually the way most people who use TeX use it. I thought it’d be fun to write up how to mark up and style the TeX and LaTeX logos in plain old semantic HTML and CSS. I think my solution looks nice, is semantic, and degrades gracefully.
When writing TeX and LaTeX 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 LaTeX 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 TeX and
LaTeX. 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:
LATEX. Not bad, but not great
either. Let’s try to get the kerning right. The TeXbook 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 TeX 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: LaTeX. 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 TeX and LaTeX 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.