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

freeworlder

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.

Or better you can try in CSS

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

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

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

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.~~

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

来源：https://stackoverflow.com/questions/5741522/brackets-displays-wrongly-for-right-to-left-display-style

标签

html

google-chrome

right-to-left