CODEWITHSUNDEEP
htmlgoogle-chromeright-to-left
user607722
user607722

Reputation: 1676

brackets displays wrongly for right to left display style

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

Upvotes: 37

Views: 17230

Answers (6)

DoPPeS
DoPPeS

Reputation: 86

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‎";
}

Upvotes: 6

Veer
Veer

Reputation: 6936

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","/");

Upvotes: 3

dtbaker
dtbaker

Reputation: 4917

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);

Upvotes: -1

Adrian Ber
Adrian Ber

Reputation: 21380

Or better you can try in CSS

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

Upvotes: 17

Colin R. Turner
Colin R. Turner

Reputation: 1415

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.

Upvotes: 47

trickwallett
trickwallett

Reputation: 2468

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.

Upvotes: 2

Related Questions