Terence Eden’s Blog<p><strong>Simultaneous Translation in HTML</strong></p><p><a href="https://shkspr.mobi/blog/2022/07/simultaneous-translation-in-html/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2022/07/simul</span><span class="invisible">taneous-translation-in-html/</span></a></p><p></p><p>How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple:</p><pre><code><html lang="en-GB">...As Caesar said: <i lang="la">veni vidi vici</i></code></pre><p>That says the page is in British English (en-GB) but the specific phrase is in Latin (la). But how can you offer an in-text translation of that phrase into the page's native language?</p><p>Here are a few options - and their drawbacks.</p><p><strong>Title Text</strong></p><pre><code><i lang="la" title="I came, I saw, I conquered">veni vidi vici</i></code></pre><p><i>veni vidi vici</i></p><p>The user has to hover their pointer over the text and a pop-up will appear with the translation. There are two disadvantages to this:</p><ol><li>Not all devices - like mobile browsers - support title text.</li><li>The title text has no separate language attribute - so is semantically in Latin.</li></ol><p>The language can be corrected by <a href="https://twitter.com/nevali/status/1537354665968513026" rel="nofollow noopener" target="_blank">wrapping the title in a separate span</a>.</p><p><strong>Tables</strong></p><p>The humble <code><table></code> can present two or more items of text adjacent to one another.</p><pre><code><table> <tr> <td lang="la">veni vidi vici</td> <td lang="en">I came, I saw, I conquered</td> </td></table></code></pre><p></p>veni vidi viciI came, I saw, I conquered<p>Tables can be problematic on narrow screens - either requiring wrapping or scrolling.</p><p><strong>Details</strong></p><pre><code><details> <summary lang="la">veni vidi vici</summary> I came, I saw, I conquered</details></code></pre><p></p>veni vidi vici<p> I came, I saw, I conquered</p><p>Again, it requires interaction - which may not work on devices like eReaders. Unfortunately, details is a block element, but you can <a href="https://shkspr.mobi/blog/2020/12/a-terrible-way-to-do-footnotes-in-html/" rel="nofollow noopener" target="_blank">read my experiments in making them inline</a>.</p><p><strong>Ruby</strong></p><p>As <a href="https://twitter.com/jribbens/status/1475632280894943234" rel="nofollow noopener" target="_blank">suggested by John Ribbens</a></p><pre><code><ruby lang="la"> veni vidi vici <rt lang="en-GB">I came, I saw, I conquered</rt></ruby></code></pre><p><ruby> veni vidi vici <rt>I came, I saw, I conquered</rt></ruby></p><p>That works quite well - although Ruby text is pretty small. But it can be styled with CSS.</p><p>Ruby is usually used for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby" rel="nofollow noopener" target="_blank">showing pronunciation of characters</a>. But, crucially, <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element" rel="nofollow noopener" target="_blank">it isn't <em>restricted</em> to that</a>.</p><p><strong>Description Lists</strong></p><pre><code><dl> <dt lang="la">veni vidi vici</dt> <dd>I came, I saw, I conquered</dd></dl></code></pre><p></p> veni vidi vici I came, I saw, I conquered <p>Again, very easy to style with CSS. One of the nice things about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl" rel="nofollow noopener" target="_blank">Description Lists</a> is that it allows for <em>multiple</em> definitions:</p><pre><code><dl> <dt lang="la">veni vidi vici</dt> <dd>I came, I saw, I conquered</dd> <dd lang="ja">私は私が征服した来た</dd></dl></code></pre><p><strong>MIX THEM ALL TOGETHER!</strong></p><p>Let's take a section from <a href="https://www.gutenberg.org/cache/epub/2383/pg2383.html" rel="nofollow noopener" target="_blank">Chaucer's Canterbury Tales</a>. Most of the Middle English is understandable - but a few archaic words need translation. It's also useful to have some commentary on the text.</p><pre><code><dl> <dt lang="enm">Full many a fat partridge had he in <ruby>mew<rp>(</rp><rt lang="en-GB">cage</rt><rp>)</rp></ruby> </dt> <dd>The place behind Whitehall, where the King's hawks were caged was called the Mews.</dd></dl><details> <summary lang="enm">And many a bream, and many a <ruby>luce<rp>(</rp><rt lang="en-GB">pike</rt><rp>)</rp> in <ruby>stew<rp>(</rp><rt lang="en-GB">fish-pond</rt><rp>)</rp> </summary> In those Catholic days, when much fish was eaten, no gentleman's mansion was complete without a "stew".</details></code></pre><p></p> Full many a fat partridge had he in <ruby>mew<rp>(</rp><rt>cage</rt><rp>)</rp></ruby> The place behind Whitehall, where the King's hawks were caged was called the Mews. And many a bream, and many a <ruby>luce<rp>(</rp><rt>pike</rt><rp>)</rp> in <ruby>stew<rp>(</rp><rt>fish-pond</rt><rp>)</rp></ruby></ruby><p> In those Catholic days, when much fish was eaten, no gentleman's mansion was complete without a "stew".</p><p><strong>Which should you use?</strong></p><p>Yes.</p><p>There's no definitive "correct" answer here. <code>title</code> text might make sense for occasional words which need translating - and you're sure either the user's device supports it, or they won't be substantially disadvantaged if it doesn't.</p><p>Similarly, <code>details</code> works for interactive content which is <em>optional</em> to understanding.</p><p>The <code>ruby</code> elements are great if you want a fairly unobtrusive way to translate <em>specific</em> words.</p><p>Lists are great if you need to offer <em>multiple</em> translations.</p><p>Mashing them all together is a bit silly and complicated - but allows for a greater variety in the way the texts are displayed.</p><p></p><p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html5/" target="_blank">#HTML5</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/i18n/" target="_blank">#i18n</a></p>