brackets displays wrongly for right to left display style

Question

The html code

<html dir="rtl">
<p>hello (world)</p>
</html>

you will see a page like this:

(hello (world

However，if I change the html code into

<html dir="rtl">
<p>hello (world) again</p>
</html>

Then the text displays normally:

 hello (world) again

Anyone can explain why this happens? How to fix the first example?

My browser is chrome

this one is hard ... sorry for not having a solution here but for a very nice overview of lots of problems that can occur when changing reading direction I can recommend this link: http://www.w3.org/International/tutorials/bidi-xhtml/ — ezmilhouse, Apr 21 '11 at 08:45
Possible duplicate of [Why does "\[x\]y" display incorrectly in the RTL direction?](http://stackoverflow.com/questions/43973319/why-does-xy-display-incorrectly-in-the-rtl-direction) — Roddy of the Frozen Peas, May 15 '17 at 21:14

score 46 · Answer 1 · edited Oct 29 '11 at 11:55

46

You just need to add the LRM character after the last bracket. HTML entity: ‎

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

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

edited Oct 29 '11 at 11:55

Kev

118,037
53
300
385

answered Oct 28 '11 at 15:52

Colin R. Turner

1,323
15
24

1

Welcome to Stack Overflow! Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions (http://stackoverflow.com/questions/5801820/how-to-solve-bidi-bracket-problem/7931735#7931735), these tend to be flagged as "spammy" by the community. – Kev Oct 29 '11 at 11:55
5

When I see an answer, I don't really expect it to have been handwritten by the user. Many times it's not even practical (although a backlink might be useful for further info). While using this tip I found it Chrome developer tools a nice shorthand `‎` - easier to remember... – Fabio Milheiro Jun 27 '14 at 16:18
2

I was searching for this solution from long. `‎` worked for me very well. Thanks :) – Kushal Jayswal Sep 01 '17 at 10:33
@freeworlder This is not working with "placeholder" attribute in "input" tag. – Maulik patel Nov 26 '17 at 14:22
Can anyone explain why this happens? – Karma Jan 03 '18 at 07:56

score 17 · Answer 2 · answered May 17 '13 at 14:22

17

Or better you can try in CSS

*:after {
    content: "\200E‎";
}

answered May 17 '13 at 14:22

Adrian Ber

20,474
12
67
117

1

This did nothing for me. The parenthesis are still wrong but it did insert random gaps everywhere. – Nick Sep 18 '14 at 09:32
Yeah works here, I'd make sure the style is actually being applied to your elements – chrismarx Mar 16 '17 at 19:06
@Adrian This is not working with "placeholder" attribute in "input" tag. – Maulik patel Nov 26 '17 at 14:26

score 6 · Answer 3 · answered Jul 31 '18 at 14:45

6

Adding the special rlm character in css before and after your element solved all cases I've come across in Firefox and Chrome:

*:after {
    content: "\200E‎";
}
*:before {
    content: "\200E‎";
}

answered Jul 31 '18 at 14:45

DoPPeS

86
1
5

That's it! Thank you! – adripanico Sep 28 '18 at 10:57

score 3 · Answer 4 · answered Apr 06 '18 at 09:06

Use &rlm; before (. Ex:

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

if you are using javascript/svg Dom then

 aText = $('<span>').html(aText.replace("(","&rlm;(")).text();
 $("<p>").html(aText);

for other special Charactors

function getRTLText(aText,aChar) {
        if ( aText != undefined && aText.replace){
            aChar = (aChar === undefined )?"(":aChar;
            aText = $('<span>').html(aText.replace(aChar,"&rlm;"+aChar)).text();
        }
        return aText;
}

and call function

getRTLText("March / 2018","/");

score 2 · Answer 5 · answered Apr 21 '11 at 08:41

2

This is the correct bracket rendering for right to left text (apparently). This article gives a bit more info.

http://www.i18nguy.com/markup/right-to-left.html

~~The dir attribute is now depreciated.~~

answered Apr 21 '11 at 08:41

trickwallett

2,418
16
15

score -1 · Answer 6 · answered Oct 27 '14 at 10:35

If anyone has this issue in WordPress you can try this fix:

https://gist.github.com/dtbaker/b532e0e84a8cb7f22f26

function dtbaker_rtl_bracket_hack($content){
    if(is_rtl()){
        $content = preg_replace('#<p>([^<]+)\)\s*</p>#','<p>$1)&#x200E;</p>',$content);
        $content = preg_replace('#<p>\s*\(([^<]+)</p>#','<p>&#x200E;($1</p>',$content);
    }
    return $content;
}
add_filter('the_content','dtbaker_rtl_bracket_hack',100,1);

Using sledgehammers to crack nuts. – adripanico Sep 28 '18 at 10:58 — adripanico, Sep 28 '18 at 10:58

brackets displays wrongly for right to left display style

6 Answers6

Linked