6

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

sample

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 uses lmr9 (roman 9pt) for the comments. Auxiliary text such as tags, link-buttons, and page footers use lmss8 (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, using margin-left and margin-right, these characters can be tightly kerned. (letter-spacing might 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 lmtt10 font 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

sample


Originals

The original, live TeX.sx pages appear here and here for comparison.

9
  • 1
    How is this done? What are the legal, bandwidth and technical restrictions? (I suspect that the SE network has a certain brand feel for all sites, which restricts what can be changed.)
    – Joseph Wright Mod
    Jan 27, 2012 at 8:17
  • 3
    BTW, I (like some other people) feel that 'TeX', 'LaTeX', etc. should not have the letters 'moved about' in running text, only when used as logos (for example on the cover of a book). So 'auto-magic' with the text would not necessarily make everyone happy!
    – Joseph Wright Mod
    Jan 27, 2012 at 8:21
  • @JosephWright: The Latin Modern fonts are released under the GUST Font License (GFL), which is a free license, legally equivalent to the LateX Project Public Licence (LPPL), version 1.3c or later. [from www.gust.org.pl] Jan 27, 2012 at 8:23
  • Average file size for the Latin Modern text fonts is as follows: 254 KB (.ttf TrueType format), 103 KB (.otf OpenType format), 254 KB (.eot Embedded OpenType format), 111 KB (.woff Web Open Font Format), and 75 KB (.svgz Scalable Vector Graphics format, compressed). There are 365 files in all (73 fonts times 5 different formats), but a browser session only needs to fetch at most a small handful — only the one that are actually used in the page — and this only happens once at the beginning of the session, rather than for each page. So the bandwidth is actually quite good. Jan 27, 2012 at 8:30
  • 1
    Technical restrictions would be dependent on browser support for CSS's @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. Jan 27, 2012 at 8:34
  • The screenshots look really good, but since I'm forced to use IE7 at work, I can report it is very hard to read, and the TeX macros are not rendered properly. Then again, whoever uses IE7 voluntarily has a whole load of other problems, I can tell you.
    – Psirus
    Jan 27, 2012 at 8:35
  • 10
    I really like CM and LM serifs but I think they look much better on paper than screen. Therefore, I do not think this is a good idea. Implementations such as this site looks better in sans serif. Maybe it would be an idea to render it with a sans serif font that is popular with TeX and friends?
    – N.N.
    Jan 27, 2012 at 8:47
  • 1
    If you think that fish ’n’ chips is the only place where you want a word to begin with an apostrophe, you’re sorely mistaken. There are many examples: ’tis no great task to find ’em.
    – TRiG
    Dec 20, 2014 at 19:44
  • @TRiG — Yes, but ’tis and ’em are totally unambiguous — they must use an apostrophe and never an opening quote. I used fish ’n’ chips as an example of an ambiguous case, where '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)? Dec 20, 2014 at 20:25

2 Answers 2

16

I see a few issues. As has already been mentioned in a comment, CM is rather 'light' on the screen: Knuth allowed for the bleed in printing when designing the font, but that makes it a not-so-good choice on screen. More generally, I feel that sanserif fonts probably work better, particular on smaller screens. Secondly, the 'LaTeX always uses CM' approach is something of a problem: you can have too much of a good thing. Finally, to me it is immediately obvious that something is 'wrong' when using CM without using TeX to lay it out. Web browsers don't get the line greyness right, and some of the spacing therefore jars badly. That stands out more with CM than with other fonts as I'm used to CM being 'right'.

5

This is how your example site looks for me in Chrome 16 on Windows 7:

enter image description here

compared to Firefox

enter image description here

That is at 100% zoom, and it's very hard to read. I guess that getting this to work cross-browser and cross-platform is a pretty tough job.

5
  • Interesting. The fonts loaded correctly and the CSS rendered correctly, but the fonts are all fuzzy. Bizarre. How does it look on Firefox on Win7? Jan 27, 2012 at 8:40
  • 1
    @Todd My early examples had some problems, I now put a direct comparison of Chrome and Firefox in there.
    – user6222
    Jan 27, 2012 at 8:48
  • 2
    Oh gods, it looks like every mathematics course PDF I ever read on my screen, weeped, then resorted to printing out.
    – Aarthi
    Jan 27, 2012 at 16:36
  • Wow. I wonder why it looks totally fine on the Mac but not on Windows. It's not a CSS or HTML problem but a font rendering problem. Jan 27, 2012 at 17:50
  • In FF3 (pretty old, yeah) on linux, the result is quite good. But in my humble opinion: let the "(La)TeX" fonts be used for printing and "web-page" fonts be used for web pages...
    – yo'
    Jan 28, 2012 at 0:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .