Every day, I make my rounds through several of the SX sites, and I continue to be impressed by how beautiful TeX.sx looks compared to the others I visit. I've always wondered, though, why a site devoted to TeX doesn't use TeX fonts. I feel like it ought to, if possible.
I've been working a lot lately with the Latin Modern collection (derived from Donald Knuth’s Computer Modern font collection) and have had great success getting them to work in HTML via CSS. The results are so close to actual TeX, in fact—right down to the ligatures and the TeX, LaTeX, and XeTeX logos—that I can’t tell the difference anymore without scrupulous examination.
Below is a sample page showing what TeX.sx could look like using TeX fonts. The image is actually a hyperlink which brings you to a web page that displays the content shown in the image. The image is not faked; it’s an actual browser screenshot.
I want to be careful not to step on any toes here, but I also want to demonstrate what is possible with modern HTML+CSS and suggest that a reskinning of TeX.sx might be something worth considering.
The web page shown here renders identially in Safari, Firefox, and Chrome on Mac OS X, and even displays properly on the iPhone and iPad. It also should work the same on Linux and Windows as well, although I haven’t a way to test those.
Sample 1
Typographical notes:
This has available to it the full range of Latin Modern fonts in all their optical sizes. This sample uses
lmr10(roman 10pt) for the questions and answers, and useslmr9(roman 9pt) for the comments. Auxiliary text such as tags, link-buttons, and page footers uselmss8(sans-serif 8pt).The Latin Modern Roman family provides ff, fi, fl, ffi, and ffl ligatures as standard Unicode characters U+FB00 through U+FB04, respectively. I encoded these by hand in this sample, but it is not difficult to translate these on-the-fly when generating a web page.
The Latin Modern Roman family also provides proper opening and closing single- and double-quotation marks. I converted
'and"here by hand in this sample, but again it is not difficult to translate these on the fly, given a few simple rules of engagement and a well-tested algorithm. (I only know of one ambiguous case:'n'can mean ’n’ as in “fish ’n’ chips” and it can also mean ‘n’ as in “the letter ‘n’ is the 14th letter of the alphabet.”)Using CSS properties like
vertical-align, it is trivial to lower the E in the TeX logo and raise the A in the LaTeX logo. Similarly, usingmargin-leftandmargin-right, these characters can be tightly kerned. (letter-spacingmight be another option for kerning.) Here, the<sub>and<sup>tags were subclassed, allowing graceful degradation on extremely old browsers. Latin Modern Roman even has the backwards E in XeTeX.Justified paragraphs seem to render acceptably. Hyphenation in HTML obviously isn't up to TeX standards, nor is paragraph line-fitting, but it certainly doesn’t look terrible.
The
lmtt10font is much more TeX-like than the current Consolas and is quite readable on the screen. Here is a second sample focusing more on code snippets:
Sample 2
Originals
The original, live TeX.sx pages appear here and here for comparison.
@font-face(which has gotten very good in the past couple of years) and on any restrictions that may be inherent in the StackExchange framework. For example, it may be difficult to modify the StackExchange codebase to support ligatures or smart-quotes. Everything else, however, is just simple modifications to the existing CSS framework. Inside of a couple hours, I was able to de-obfuscate TeX.sx’s CSS templates and modify them to work with the Latin Modern fonts.'n'could be rendered either ‘n’ or ’n’ depending on context. In “fish ’n’ chips” it's clear to a human that it should be ’n’ (and in and), but how does an automated processing tool know that it shouldn't be ‘n’ (as in the letter n)?