Search code examples
htmlcssunicodebidi

How to write this RTL layout in HTML?

I'm trying to get the following layout of text containing both Hebrew and Latin characters:

2011 ,HEBREW 11 ,english

The capitalized letters represent Hebrew characters, and the whole thing should be aligned to the right.

Here's some of the stuff I tried:

<div dir="rtl">
  latin, 12 ביולי, 2011<br>
  <span dir="ltr">latin</span><span dir="rtl">, 12 ביולי, 2011</span><br> latin
  <span style="direction: rtl">, 12 ביולי, 2011</span><br>
  <bdo dir="rtl">latin</bdo>, 12 ביולי, 2011<br> &#x202e;latin&#x202c;, 12 ביולי, 2011<br>
</div>

It looks like the hebrew characters are at the end, but they are actually between the two numbers.

The first three jumble up the order of the words, and the last two get the word order right, but then the Latin characters are displayed right-to-left, which is in reverse.

Solution

  • Found something that works:

    latin&rlm;, 11 HEBREW, 2011

    The &rlm does the magic. I can't say I fully understand it.