{"id":542,"date":"2006-09-27T21:36:23","date_gmt":"2006-09-28T01:36:23","guid":{"rendered":"http:\/\/semanticbible.com\/blogos\/2006\/09\/27\/css-for-interlinear-styling\/"},"modified":"2006-09-27T21:37:33","modified_gmt":"2006-09-28T01:37:33","slug":"css-for-interlinear-styling","status":"publish","type":"post","link":"http:\/\/semanticbible.com\/blogos\/2006\/09\/27\/css-for-interlinear-styling\/","title":{"rendered":"CSS for Interlinear Styling"},"content":{"rendered":"<p>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 <a href=\"http:\/\/www.esv.org\/blog\/2006\/08\/reverse.interlinear.now.printing\">ESV English-Greek Reverse Interlinear New Testament<\/a> (which i&#8217;ve recently begun using through Logos Bible Software) stacks up <em>five levels<\/em> of information:<\/p>\n<ul>\n<li>the English text<\/li>\n<li>the Greek terms (re-arranged to match the English order: that&#8217;s the &#8220;reverse&#8221; part)<\/li>\n<li>the Greek lemma<\/li>\n<li>the Greek part of speech and morphological analysis<\/li>\n<li>the Strong&#8217;s number (which is really just a notational variant of the lemma)<\/li>\n<\/ul>\n<p>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&#8217;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.<\/p>\n<p>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 <a title=\"CSS: The Definitive Guide\" href=\"http:\/\/www.amazon.com\/Cascading-Style-Sheets-Definitive-Guide\/dp\/0596005253\/\">CSS Guide<\/a>, but eventually discovered the <code>display: inline-block;<\/code> property.<\/p>\n<p>It works like this for my speech recognition example: there&#8217;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. <a title=\"Interlinear CSS Example\" href=\"http:\/\/semanticbible.com\/blogos\/gems\/interlinear-css.xhtml\">This file<\/a> 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&#8217;s CSS, things just work like they should if you change the text size, alter the size of the window, etc.<br \/>\nGoogling afterwards, i found some posts along similar lines from <a href=\"http:\/\/jtauber.com\/blog\/2006\/01\/28\/dynamic_interlinears_with_javascript_and_css\">James Tauber<\/a> and <a href=\"http:\/\/pinyin.info\/news\/2005\/table-free-method-for-interlinear-texts-on-web-pages\/\">Pinyin News<\/a>, 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&#8217;t argue this is a huge issue).<br \/>\nI also loved this quote from Pinyin News:<\/p>\n<blockquote><p>The interlinear version of the Scriptures is the prototype or ideal of all translation.<br \/>\n\u00e2\u20ac\u201d Walter Benjamin<\/p><\/blockquote>\n<p><strong>Problem<\/strong>: Firefox doesn&#8217;t seem to recognize the inline-block element! Opera does (no big surprise), as does IE 6 (that <em>was<\/em> a surprise!). Usually IE is the loser in the browser-compliance wars, but here IE gets it right. That&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;ve recently begun using through Logos Bible Software) stacks up five &hellip; <a href=\"http:\/\/semanticbible.com\/blogos\/2006\/09\/27\/css-for-interlinear-styling\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS for Interlinear Styling<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"_links":{"self":[{"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/posts\/542"}],"collection":[{"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":0,"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"wp:attachment":[{"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/semanticbible.com\/blogos\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}