Photo of Terence Eden. He has a beard and is smiling.

HTML Ruby and Bidirectional Text

Ā· 3 comments Ā· 800 words Ā· ViewedĀ ~216Ā times.

The set of HTML <ruby> elements allow us to add pronunciation above text. For example:

"When you visit the zoo, be sure to see the panda - ē†Š(XiĆ³ng)ēŒ«(māo)."

This is written as:

 HTML&lt;ruby&gt;ē†Š&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;XiĆ³ng&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;ruby&gt;ēŒ«&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;māo&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;.

That is, the word or character which needs text above it is wrapped in <ruby>. The pronunciation is wrapped in <rt>. The <rp> element indicates the presence of a parenthesis - which isn't usually displayed, but will be shown if the browser doesn't support <ruby> syntax.

That's fairly easy for scripts written left-to-right. But how does it work for scripts like Arabic where the text is written right-to-left, but the user may want the pronunciations left-to-right?

Let's take the phrase "Hello World" in Arabic: Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…. Google Translate tells me this is pronounced "marhaban bialealami".

For a single word, the directionality can be ignored. The browser should be smart enough to place the pronunciation above the word:

 HTML&lt;p&gt;Hello is: &lt;ruby&gt;Ł…Ų±Ų­ŲØŲ§&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;marhaban&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;. What a useful word!&lt;/p&gt;

Hello is: Ł…Ų±Ų­ŲØŲ§(marhaban). What a useful word!

What about if we have a few words - or a whole sentence - which is entirely RTL?

 HTML&lt;p dir=&quot;rtl&quot;&gt;Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…&lt;/p&gt;

Is displayed aligned to the right side of the screen:

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…

There are a few ways to add pronunciation.

Separate The Words

The first is to write each word separately. For example <ruby>1st word</ruby> <ruby>2nd word</ruby>. Obviously, this isn't normally how you'd write a RTL language! But it does work:

 HTML&lt;p dir=&quot;rtl&quot;&gt;&lt;ruby&gt;Ł…Ų±Ų­ŲØŲ§&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;marhaban&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt; &lt;ruby&gt;ŲØŲ§Ł„Ų¹Ų§Ł„Ł…&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;bialealami&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;/p&gt;

Which displays as:

Ł…Ų±Ų­ŲØŲ§(marhaban) ŲØŲ§Ł„Ų¹Ų§Ł„Ł…(bialealami)

It helps to think of the way the characters of the script are stored in memory.

A word that displays as ABC is stored as C B A.

So the above is written "correctly" - even though it looks odd in the source-code view.

All At Once

But there is an alternative if you want the source text to look natural - i.e. [2nd word] [1st word].

It's a bit messy, but you can write the LTR text in <rt> "backwards"!

 HTML&lt;p dir=&quot;rtl&quot;&gt;&lt;ruby&gt;Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…&lt;rt&gt;bialealami marhaban&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…bialealami marhaban

But, again, that doesn't seem very satisfying! It also divorces the pronunciation from the original word - which is unfortunate for screenreaders.

The Ruby layout algorithm is usually clever enough to group words separated by spaces:

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…B A

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…Bbbbbbbbbbbbbb Aaaaaaaaaaaaa

Although, if the pronunciations have a significantly different length than each other, it can get a bit messy:

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…Bbbbbbbbbbbbbb A

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…B Aaaaaaaaaaaaa

In which case, you probably need to go for the first technique and wrap each word in its own <ruby> element:

Ł…Ų±Ų­ŲØŲ§(A) ŲØŲ§Ł„Ų¹Ų§Ł„Ł…(Bbbbbbbbbbbbbb)

BDO

It's tempting to think that simply using the <bdo> element can help us here. It can't!

Using the bidirectional override will display characters RTL, rather than words.

 HTML&lt;p dir=&quot;rtl&quot;&gt;&lt;ruby&gt;Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…&lt;rt&gt;&lt;bdo dir=&quot;rtl&quot;&gt;marhaban bialealami&lt;/bdo&gt;&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;

Becomes:

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…marhaban bialealami

I guess you could spell each word backwards. Which would be extremely annoying for everyone and a complete nightmare for screen readers!

Instead, it can be fixed if each word is then given an explicit LTR direction:

 HTML&lt;p dir=&quot;rtl&quot;&gt;&lt;ruby&gt;Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł…&lt;rt&gt;
   &lt;bdo dir=&quot;rtl&quot;&gt;
      &lt;span dir=&quot;ltr&quot;&gt;marhaban&lt;/span&gt; &lt;span dir=&quot;ltr&quot;&gt;bialealami&lt;/span&gt;
   &lt;/bdo&gt;&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;

Ł…Ų±Ų­ŲØŲ§ ŲØŲ§Ł„Ų¹Ų§Ł„Ł… marhaban bialealami

Is that it?

So, I think those are the only ways to achieving mixing bidirectional text pronunciation. But I'd welcome any corrections and suggestions!

Share this post onā€¦

3 thoughts on ā€œHTML Ruby and Bidirectional Textā€

  1. says:

    I'd suggest that you're overcomplicating this. If you want to gloss a romanisation for each word, wrap each word in its own ruby element. It will always appear above the correct word, even if there's line wrapping. If, on the other hand, you want to add a semantic gloss, for example to writeŲ­ŁŽŁˆŁ‘Ų§Ł…ŲŖŁŠ Ł…ŁŁ…Ł’ŲŖŁŁ„Ų¦Ų© ŲØŁŲ£ŁŽŁ†Ł’Ł‚ŁŽŁ„ŁŽŁŠŁ’Ų³ŁˆŁ† with "my hovercraft is full of eels" above, then you'd wrap the whole sentence in a ruby element

    Reply

    1. @edent says:

      Me, overcomplicate things?!?! šŸ™‚

      If I wrap the whole sentence in ruby, the text above goes the wrong way. 

      <ruby>Ų­ŁŽŁˆŁ‘Ų§Ł…ŲŖŁŠ Ł…ŁŁ…Ł’ŲŖŁŁ„Ų¦Ų© ŲØŁŲ£ŁŽŁ†Ł’Ł‚ŁŽŁ„ŁŽŁŠŁ’Ų³ŁˆŁ†<rt>a b c</rt></ruby>


      Displays as Ų­ŁŽŁˆŁ‘Ų§Ł…ŲŖŁŠ Ł…ŁŁ…Ł’ŲŖŁŁ„Ų¦Ų© ŲØŁŲ£ŁŽŁ†Ł’Ł‚ŁŽŁ„ŁŽŁŠŁ’Ų³ŁˆŁ† a b c

      Whereas the pronunciation should be c b a - so the pronunciation is above the right word. Does that make sense?

      Reply

      1. says:

        Yes, but that's exactly why ruby should be used to gloss only the exact thing to which it corresponds. In your example, you have another problem: even if you reverse the English word order, if the length of romanisation and Arabic words differs significantly (which, in my experience, is quite often true, because of the unmarked or diacritic vowels, hamzah, etc.) then you still don't have the pronunciation above the correct word. I accept that it looks weird to have the Arabic sentence with visibly reversed word order in your editor, but that's an artefact of the display in your editor. The semantic ordering of codepoints remains correct.

        If what you really want is to have a sentence in Arabic in the normal order, with the words above, then you can mark the whole section RTL with U+002F/U+002E. The non-Arabic elements are then in a pretty confusing order, though, compounded by the fact that punctuation doesn't change direction (and angle brackets are visibly mirrored) but Latin letters do! But this is a more general problem: how do you handle mixed editing of HTML and content in right-to-left languages? I don't know how people normally deal with that.

        Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <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="">