Simultaneous Translation in HTML


How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple:

<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:

  1. Not all devices - like mobile browsers - support title text.
  2. 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 viciI 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 conquered

Again, 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

As suggested by John Ribbens

<ruby lang="la">
   veni vidi vici
   <rt lang="en-GB">I came, I saw, I conquered</rt>
</ruby>


veni vidi vici
I came, I saw, I conquered

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(cage)
The place behind Whitehall, where the King's hawks were caged was called the Mews.
And many a bream, and many a luce(pike) in stew(fish-pond)

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.


Share this post on…

One thought on “Simultaneous Translation in HTML”

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">