【初心者必見】文字方向を上書き指定する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プロパティでは以下の属性を使うことができます。

説明
normal 初期値です。文字の表示方向に関する上書きを行わず、Unicodeによる文字表記の方向設定をそのまま適用します。
embed  インライン要素内で、directionプロパティの指定に従い、文字の書字方向を上書きします。文章の並びだけが変わります。
bidi-override  directionプロパティで指定した内容が、既存の表示方向の設定に置き換わる形となります。
文章の表示順、及び、文字の並び順も変更されるようです。
注意
unicode-bidiでの文字表記の方向は、directionプロパティで指定した方向です。

対応ブラウザ

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

PC用ブラウザ 対応状況
Chrome 完全対応
Edge  完全対応
Firefox  完全対応
Internet Explorer  5.5
Opera  完全対応
Safari  1.3
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  3.1
Samsung Internet  完全対応
注意
値によって対応していない場合があります。

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 dir=”ltrは、アラビア語が左から右への書字方向になっています。
bdo dir=”rtlは、アラビア語が右から左への書字方向となりました。

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

まとめ

いかがでしたか?

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

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

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

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

参考文献:W3C|css unicode-bidiの定義