brackets displays wrongly for right to left displa

2019-01-13 16:04发布

问题:

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

回答1:

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.



回答2:

Or better you can try in CSS

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


回答3:

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


回答4:

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.



回答5:

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



回答6:

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