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
You just need to add the LRM character after the last bracket. HTML entity: ‎
<html dir="rtl">
<body>
<p>hello (world)‎</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";
}
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.
Use ‏
before (
.
Ex:
<html dir="rtl">
<body>
<p>hello ‏(world)</p>
</body></html>
if you are using javascript/svg Dom then
aText = $('<span>').html(aText.replace("(","‏(")).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,"‏"+aChar)).text();
}
return aText;
}
and call function
getRTLText("March / 2018","/");
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)‎</p>',$content);
$content = preg_replace('#<p>\s*\(([^<]+)</p>#','<p>‎($1</p>',$content);
}
return $content;
}
add_filter('the_content','dtbaker_rtl_bracket_hack',100,1);