web-dev-qa-db-ja.com

右から左への表示スタイルでブラケットが正しく表示されない

HTMLコード

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

次のようなページが表示されます。

(hello (world

ただし、htmlコードをに変更すると

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

その後、テキストは正常に表示されます。

 hello (world) again

なぜこれが起こるのか誰でも説明できますか？最初の例を修正する方法は？

私のブラウザはクロームです

htmlgoogle-chromeright-to-left
31
user607722

最後の角かっこの後にLRM文字を追加する必要があります。 HTMLエンティティ：&#x200E;

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

これは、角かっこを左から右への読みとして解釈するようにブラウザに指示します。

38
freeworlder

または、CSSで試すことができます

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

要素の前後にcssに特別なrlm文字を追加すると、FirefoxとChromeで発生したすべてのケースが解決されました。

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

_&rlm;_の前に_(_を使用します。例：

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

javascript/svg Domを使用している場合は、

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

他の特別なキャラクターのために

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

関数を呼び出す

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

2
Veer

これは、右から左へのテキストの正しいブラケットレンダリングです（どうやら）。この記事はもう少し情報を提供します。

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

dir属性は減価償却されます。

1
trickwallett