unicode-bidi

値の書き方

• normal：何もしません。インライン要素は、境目が無いものとして周りの文章と一緒に並べられます。初期値です。
• embed：インライン要素の中身を、direction の向きの入れ子として並べます。ブロックの箱では効きません。
• isolate：インライン要素の中身を周りから切り離して、direction の向きの独立した段落のように並べます。周りの文章からは 1 つの記号のように扱われるので、中身と周りが互いの並びに影響しません。ブロックの箱では効きません。
• bidi-override：文字の種類を無視して、すべての文字を direction の向きに 1 字ずつ並べます。rtl なら英字も右から並ぶので、Hello は olleH と表示されます。ブロックの箱に付けると、中身全体にかかります。
• isolate-override：isolate のように周りから切り離したうえで、中身を bidi-override のように並べます。ブロックの箱では bidi-override と同じ見た目です。
• plaintext：direction を使わず、段落ごとに、最初に出てくる向きのはっきりした文字（英字やアラビア文字など）で向きを決めます。ブロックの箱では、<br> やブロックで区切られた段落ごとに決まり、行の寄せ方（text-align: start）もその向きに従います。

プレビューは補助の宣言で direction: rtl にして、英語・日本語・アラビア語の 3 行を出しています。normal・embed・isolate は同じ見た目で、bidi-override・isolate-override では英語と日本語の文字が逆順に並び、plaintext では行ごとに自分の向きで並びます。

使いどころ

isolate は、ユーザー名や商品名のように、どの言語の文字が入るかわからない文字列を文章に差し込むときに使います。切り離さないと、差し込んだ文字列の向きにつられて、まわりの記号や数字の位置がずれることがあります。plaintext は、コメント欄のように、行ごとに違う言語で書かれるかもしれない文章に向いています。

HTML では要素と属性を使う

仕様は、HTML では unicode-bidi を使わず、dir 属性や要素で表すよう勧めています。ブラウザは、<bdi> と dir 属性を付けた要素に isolate、<bdo> に isolate-override、dir="auto" を付けた <textarea> と <pre> に plaintext を付けます。