【初心者必見】文字方向を上書き指定するCSSプロパティ、unicode-bidiの徹底解説

こんにちは。

今回は文字の方向を上書き指定するunicode-bidiと言うCSSプロパティを説明します。

そのようなことも出てくると思います。

そんな時に使えるのが、CSSのunicode-bidi　プロパティです。

今回は、unicode-bidiプロパティの

について説明します。

unicode-bidiとは

unicode-bidiの読み方

「unicode-bidi」は「unicode bi-directional（ユニコード バイディクショナル）」の略で「ユニコードビディ」と読みます。意味は「双方向性」です。

unicode-bidiプロパティの説明

日本語や英語は左から右へ、アラビア語やヘブライ語などは右から左へと、言語によって文字表記の方向が規定されています。そのような言語が混在する場合は、双方向アルゴリズムが正常に機能しない場合があります。

その言語部分に対して指定しておくために、direction プロパティ と一緒にunicode-bidiプロパティでUnicodeの文字表記の方向を上書きします。

Unicode(ユニコード)：言語の種類に関係なく、さまざまな種類の文字を統一された文字コードで表現しようとする規格です。

unicode-bidiプロパティで利用できる値

unicode-bidiプロパティでは以下の属性を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

unicode-bidiプロパティの基本的な使い方

unicode-bidiプロパティの使い方

directionプロパティと一緒に使います。

{direction:値;
unicode-bidi:値;}

以下はサンプルです。

See the Pen
jOMdaqw by Sachiko (@yivliriy)
on CodePen.

embedの値のみ、アラビア語と数字、記号にかかるようにしました。単語は変わりませんが、単語ごとの順番が変わります。

unicode-bidiプロパティと類似する要素

directionプロパティ

unicode-bidiプロパティはUnicodeの双方向アルゴリズムを制御するのに対し、directionプロパティはブロックレベル要素の基本書字方向を指定します。
{direction: 値;}
テキストを「右読み」にするか「左読み」にするかを、必ず指定する必要があります。

• ltr：左から右に指定したい時
• rtl：指定したい時

See the Pen
gOwqXVR by Sachiko (@yivliriy)
on CodePen.

②のように日本語の記述は direction: rtl とだけ指定しても「左から右（ltr）」のまま変わりません。数字も「左から右（ltr）」で変わっていません。順番だけ変わっています。

③のように、unicode-bidiプロパティと共に使います。

bdoタグ

<bdo></bdo>で囲むタグの中にdirという属性で方向を指定します。dirは「directional」の略です。

bdoタグを使用できる場合は、bdoタグを推奨されています。

まとめ

いかがでしたか？

今回は文字の方向を上書き指定するunicode-bidiと言うCSSプロパティを説明しました。

基本的に日本語でのページは、書字方向が左から右なのであまり使う機会がないかもしれません。

また、国際社会なのでいつどのような言語が使われるかわかりませんので、覚えておくといいでしょう。

この記事がお役に立てれば幸いです。

参考文献：W3C｜css unicode-bidiの定義