Many Bible readers are introduced to interlinear displays through a New Testament that shows the correspondance between English and Greek terms. Lots of other language-related phenomenon can also be aptly visualized using interlinear displays. For example, the ESV English-Greek Reverse Interlinear New Testament (which i’ve recently begun using through Logos Bible Software) stacks up five levels of information:

  • the English text
  • the Greek terms (re-arranged to match the English order: that’s the “reverse” part)
  • the Greek lemma
  • the Greek part of speech and morphological analysis
  • the Strong’s number (which is really just a notational variant of the lemma)

Interlinears are good for other things too: today i was working to an interlinear display to show the alignment of speech recognizer output (which makes lots of mistakes) with the correct transcript: that’s one way to make it easier to compare and analyze the kinds of mistakes it makes. Most any kind of information that can be defined to correspond to lexical items can be usefully displayed this way.

So i figured it was worth a little effort to try to figure out a principled way to organize and display this kind of information in a browser. I had to dig deep in to the CSS Guide, but eventually discovered the display: inline-block; property.

It works like this for my speech recognition example: there’s a div whose class is utterance, and which contains a span for each aligned/interlinear group. Each element in the alignment group is also in a span. This file shows the idea: view the source to see the details and the (minimal) CSS styling (but see below if you use Firefox). Look Ma, no tables! And because it’s CSS, things just work like they should if you change the text size, alter the size of the window, etc.
Googling afterwards, i found some posts along similar lines from James Tauber and Pinyin News, both usingtags, which (as Pinyin News notes) is a minor violation of markup semantics: these are words, after all, not paragraphs. The inline-block approach is a little cleaner since it just uses spans (though i couldn’t argue this is a huge issue).
I also loved this quote from Pinyin News:

The interlinear version of the Scriptures is the prototype or ideal of all translation.
— Walter Benjamin

Problem: Firefox doesn’t seem to recognize the inline-block element! Opera does (no big surprise), as does IE 6 (that was a surprise!). Usually IE is the loser in the browser-compliance wars, but here IE gets it right. That’s disappointing, since Firefox is my usual browser of choice: but (as Eric Meyer suggests) the right approach is usual to stick with the standards, and hope the browser eventually catch up.