30

As you might know some languages are written/read from right to left and we are trying to support some RTL languages. For the web UI using dir="rtl" in html does most of the job thanks to algorithms that browsers have. But I came across this issue with brackets in text:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bracket problems with BiDi</title>
</head>
<body>

<p style="direction: rtl;">Bracket problem: hello (world):</p>
<p style="direction: rtl;">No bracket problem: hello (world) something:</p>
<p style="direction: rtl;">Bracket problem: (السلام (عليكم </p>
<p style="direction: rtl;">No bracket problem: السلام (عليكم) عليكم </p>

</body>
</html>

Problem can be seen here:

enter image description here

So I want that last bracket stay in the end. What would be your solution?

Neeku
  • 3,646
  • 8
  • 33
  • 43
yusuf
  • 3,596
  • 5
  • 34
  • 39

4 Answers4

22

There are many problems here. According to the unicode standard, brackets are neutral, meaning they are not inherently treated as LTR or RTL. They take the direction of their surrounding language. In the examples where it is being incorrectly rendered, the direction of the closing bracket is assumed to be the same as of English, ie LTR.

1st problem: You tell the browser that the paragraph should be treated to be RTL. The browser finds English inside, which is LTR, so it thinks English is embedded inside an RTL paragraph, and the last character ")" is treated to be RTL. (the surrounding paragraph is RTL).

2nd problem: There is no problem here, from a simple look at the source code you have provided, it appears you have provided the brackets properly. But in fact, the closing bracket which should be after the RTL text and before the closing </P> is actually before the starting RTL text. If you type it properly, it would look wrong (because the text editor you are using assumes the end bracket is LTR according to unicode). To verify this, copy the contents on to your editor, put your cursor at the end of "problem:", and press the right arrow repeatedly and observe the location of the last bracket.

Without giving much more explaination, here are some examples to get this working:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Bracket problems with BiDi</title>
</head>

<body>
  <p style="direction: rtl;"><span dir="ltr">Bracket problem no more: hello (world):</span></p>
  <p style="direction: rtl;"><span style="direction: ltr; unicode-bidi: embed">Bracket problem no more: hello (world):</span></p>
  <p style="direction: rtl;">Bracket problem no more: السلام (عليكم)</p>

  <!-- style for p tag below is ltr by default -->
  <p>Bracket problem no more: <span dir="rtl">السلام (عليكم)</span></p>
  <p>Bracket problem no more: <span style="direction: rtl; unicode-bidi: embed">السلام (عليكم)</span></p>
</body>
</html>

There are differences in how style="direction: ltr;" works and dir="ltr" works, so I've given examples of both. Also, because I assume you basically need to get your second problem solved, where you majorly have RTL text in an otherwise LTR document, I've provided the last two examples.

NOTE: If the last two examples are what you are looking for, and you are going to use CSS, the unicode-bidi property is required, and that makes all the difference between working and not working.

Raze
  • 2,175
  • 14
  • 30
  • 1
    Thanks for the detailed explanation; was really helpful... As reference for rest of the world this is a good link too: http://www.w3.org/International/questions/qa-bidi-controls – yusuf Apr 28 '11 at 10:57
  • None of these work in the scenario where you have a drop down list and ltr changes more than just the brackets, it renders the drop down in the reverse. I am looking for a solution where the drop down list is still rtl but the text inside is ltr or just any solution that won't mess up the brackets. – Nick Sep 18 '14 at 10:08
  • Have the drop down itself as LTR and then each item inside – Raze Sep 19 '14 at 06:18
14

You just need to add the LRM character after the last bracket. HTML entity: &#x200E;

<html dir="rtl">
<body>
<p>hello (world)&#x200E;</p>
</body></html>

This tells the browser to interpret the brackets as left-to-right reading.

Kev
  • 118,037
  • 53
  • 300
  • 385
Colin R. Turner
  • 1,323
  • 15
  • 24
4

silkfield's answer led me on to this page which shows many of the possible problems with BiDi layouts including the bracket issue

enter image description here

Max
  • 49
  • 3
Danield
  • 121,619
  • 37
  • 226
  • 255
  • Wow! I am using Windows for a decade, but I did not notice that I could insert these characters simply using right click. Thanks a lot for the images. – Handsome Nerd Mar 28 '13 at 11:55
2

you can put the following css for your issue "unicode-bidi:embed" in the body tag, it will work fine

törzsmókus
  • 1,799
  • 2
  • 21
  • 28
dsfg
  • 130
  • 9