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

初期値 normal
適用対象 全ての要素。一部の値はインライン以外の要素に効果なし
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

unicode-bidiプロパティの説明

CSSの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を指定していった時の比較です。

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

<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>
.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;
}

unicode-bidiに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向（左右）を指定する
hanging-punctuation 句読点、括弧、引用符などの禁則処理を指定する
letter-spacing 文字同士の間隔を指定する
line-break 句読点や記号などの禁則処理を指定する
line-height 行の高さを指定する
tab-size タブ（tab）文字の表示幅を指定する
unicode-bidi Unicodeのアルゴリズムを上書きして文字表記の方向を変更する
white-space 要素内のホワイトスペースの扱い方を指定する
word-break 要素の幅を超過するテキストの自動改行について指定する
word-spacing 単語同士の間隔を指定する
word-wrap インライン要素に対して単語の途中で改行処理を行うかどうかを指定する
writing-mode テキストの書字方向やブロックのフローを指定する
widows ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する
© weblan3.com