unicode-bidi

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

unicode-bidi は CSS のプロパティで、 direction プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左書き (LTR) と右書き (RTL) の両方のテキストが含まれている場合、ユーザーエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 unicode-bidi プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。

試してみましょう

unicode-bidi と direction プロパティだけは、 all 一括指定プロパティによる影響を受けません。

警告: このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを上書きすべきではありません。

構文

css
/* キーワード値 */
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;

値

normal

要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。

embed

要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、 direction プロパティにより与えられます。

bidi-override

インライン要素に対しては、この値で上書きされます。ブロックコンテナー要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナー要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは direction による順序に従います。双方向アルゴリズムの省略された部分は無視されます。

isolate

このキーワードは、要素のコンテナーの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から隔離 (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナー要素は、対象の要素を 1 個またはいくつかの U+FFFC Object Replacement Character として処理します。つまり、画像要素のように扱います。

isolate-override

このキーワードは、周囲のコンテンツに isolate キーワードの隔離処理を適用し、内部のコンテンツに bidi-override キーワードの上書き処理を適用します。

plaintext

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

公式定義

初期値normal
適用対象すべての要素。ただし一部の値はインラインでない要素には効果がありません
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

unicode-bidi = 
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

例

CSS

css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}

HTML

html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>

結果

仕様書

Specification
CSS Writing Modes Level 4
# unicode-bidi

ブラウザーの互換性

BCD tables only load in the browser

関連情報