Simultaneous Translation in HTML
By @edent
· HTML5 i18n · 1 comment · 950 words · read ~218 times.
How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple:
HTML
<html lang="en-GB">
...
As Caesar said: <i lang="la">veni vidi vici</i>
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?
Here are a few options - and their drawbacks.
Title Text
<i lang="la" title="I came, I saw, I conquered">veni vidi vici</i>
veni vidi vici
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:
- Not all devices - like mobile browsers - support title text.
- The title text has no separate language attribute - so is semantically in Latin.
The language can be corrected by wrapping the title in a separate span.
Tables
The humble <table> can present two or more items of text adjacent to one another.
<table>
<tr>
<td lang="la">veni vidi vici</td>
<td lang="en">I came, I saw, I conquered</td>
</td>
</table>
| veni vidi vici | I came, I saw, I conquered |
Tables can be problematic on narrow screens - either requiring wrapping or scrolling.
Details
<details>
<summary lang="la">veni vidi vici</summary>
I came, I saw, I conquered
</details>
veni vidi vici
I came, I saw, I conqueredAgain, it requires interaction - which may not work on devices like eReaders. Unfortunately, details is a block element, but you can read my experiments in making them inline.
Ruby
<ruby lang="la">
veni vidi vici
<rt lang="en-GB">I came, I saw, I conquered</rt>
</ruby>
veni vidi vici
That works quite well - although Ruby text is pretty small. But it can be styled with CSS.
Ruby is usually used for showing pronunciation of characters. But, crucially, it isn't restricted to that.
Description Lists
<dl>
<dt lang="la">veni vidi vici</dt>
<dd>I came, I saw, I conquered</dd>
</dl>
- veni vidi vici
- I came, I saw, I conquered
Again, very easy to style with CSS. One of the nice things about Description Lists is that it allows for multiple definitions:
<dl>
<dt lang="la">veni vidi vici</dt>
<dd>I came, I saw, I conquered</dd>
<dd lang="ja">私は私が征服した来た</dd>
</dl>
MIX THEM ALL TOGETHER!
Let's take a section from Chaucer's Canterbury Tales. 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.
<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>
- Full many a fat partridge had he in mew
- The place behind Whitehall, where the King's hawks were caged was called the Mews.
And many a bream, and many a luce in stew
In those Catholic days, when much fish was eaten, no gentleman's mansion was complete without a "stew".Which should you use?
Yes.
There's no definitive "correct" answer here. title 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.
Similarly, details works for interactive content which is optional to understanding.
The ruby elements are great if you want a fairly unobtrusive way to translate specific words.
Lists are great if you need to offer multiple translations.
Mashing them all together is a bit silly and complicated - but allows for a greater variety in the way the texts are displayed.
Could parentheses do it?
As Caesar said: <i lang="la">veni vidi vici</i> (I came, I saw, I conquered)
More comments on Mastodon.