unicode-bidi：Unicodeのアルゴリズムを上書きして文字表記の方向を変更する

unicode-bidiプロパティの説明

unicode-bidiは、Unicodeのアルゴリズムを上書きして文字表記の方向を変更します。通常、一つのコンテンツ・エリアに左横書き（LTR）と右横書き（RTL）のテキストが両方とも含まれている場合に、ユーザーエージェントはUnicodeのアルゴリズムに基づく表示方法を決定します。unicode-bidiは、これを変更するものです。使用の祭は十分な理解が必要となります。

左横書き（LTR）と右横書き（RTL）が混合する文字列の事を双方向テキストと言います。英語では、BiDi（バイダイ）とも呼ばれます。これがプロパティ名の由来です。コンピューターが双方向テキストを正しく処理するためのアルゴリズムを双方向アルゴリズムと言います。

unicode-bidiの機能は、言語によってUnicodeで文字表記の方向が規定されているものを上書きします。上書きする文字表記の方向は、directionプロパティで指定します。directionとunicode-bidiは、allプロパティの一括指定の対象になりません。

unicode-bidiに指定できる値

normal

双方向アルゴリズムに関して追加の埋め込みレベルを提供しません。要素がインラインの場合、その境界を越えて暗黙的な並べ替えが機能します。

embed

要素がインラインの場合、双方向アルゴリズムに関して追加の埋め込みレベルを提供します。

bidi-override

要素がインラインの場合、この値で上書きします。要素がブロックコンテナの場合、この値でインラインレベルの子孫を上書きし、別のブロックコンテナは上書きしません。これは要素内で、directionによる並べ替えに従うことを意味します。双方向アルゴリズムの暗黙的な部分は無視されます。

isolate

要素の内容を考慮せずにコンテナの記述方向を計算します。要素は同じ階層の兄弟要素から隔離されます。双方向解決アルゴリズムが適用されると、コンテナはそれを単一または複数の画像のように扱います。

isolate-override

この値はisolateの分離動作を周囲のコンテンツにも適用し、bidi-overrideの上書き動作を内部コンテンツに適用します。

plaintext

要素の記述方向を、親要素の双方向状態やdirectionプロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional AlgorithmのP2およびP3規則を用いて計算されます。この結果、Unicode Bidirectional Algorithmに従うツールを用いて、すでに整形されたデータを表示できます。

unicode-bidiの使い方とサンプル

unicode-bidiプロパティの構文は以下の通りです。

/* キーワード値 */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* グローバル値 */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: unset;

unicode-bidiの実例

それでは実際にunicode-bidiプロパティの書き方を見ていきましょう。以下の例は、directionの異なる段落に対して、個別のunicode-bidiを指定していった時の比較です。

段落の内容は、英語、日本語、アラビア語となっており、書字方向の異なる文字が混在しているため、アルゴリズムが変わるとテキストの表示方向が変化します。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > p {
	margin: 1rem 0 0;
	background: linear-gradient( transparent 70%, rgba(102, 255, 255, .3) 70%);
}
section > p:nth-of-type(1) {
	direction: ltr;
}
section > p:nth-of-type(2) {
	direction: rtl;
}
.unibidi_1 > p {
	unicode-bidi: normal;
}
.unibidi_2 > p {
	unicode-bidi: embed;
}
.unibidi_3 > p {
	unicode-bidi: isolate;
}
.unibidi_4 > p {
	unicode-bidi: bidi-override;
}
.unibidi_5 > p {
	unicode-bidi: isolate-override;
}
.unibidi_6 > p {
	unicode-bidi: plaintext;
}

<div class="samp_box">
	<section class="unibidi_1">
		<h1>unicode-bidi: normal;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
	<section class="unibidi_2">
		<h1>unicode-bidi: embed;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
	<section class="unibidi_3">
		<h1>unicode-bidi: isolate;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
	<section class="unibidi_4">
		<h1>unicode-bidi: bidi-override;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
	<section class="unibidi_5">
		<h1>unicode-bidi: isolate-override;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
	<section class="unibidi_6">
		<h1>unicode-bidi: plaintext;</h1>
		<p>direction: ltr; あいうえお。 السلام عليكم</p>
		<p>direction: rtl; あいうえお。 السلام عليكم</p>
	</section>
</div>