概要へ移動

このページで解説するコードの実行結果。

~あいうえお。
~あいうえお。
~あいうえお。

概要

アラビア語やヘブライ語は右から左に記述する。 そのような言語に対応する設定。

以下の2つのプロパティを設定する。

CSSプロパティ
direction
unicode-bidi

direction

(表) directionの設定値
設定値機能デフォルト
ltr左から右
rtl右から左

まず、directionの設定が無い場合の結果。(デフォルト値のltrと同じ結果)

HTML : 適用するHTML
<div class="sample">
~あいうえお。
</div>
実行結果
~あいうえお。

ltr

CSS : ltr
.sample {
direction: ltr;
}
実行結果
~あいうえお。

rtl

CSS : rtl
.sample {
direction: rtl;
}
実行結果
~あいうえお。

unicode-bidi

(表) unicode-bidiの設定値
設定値デフォルト
normal
embed
isolate
bidi-override
isolate-override
plaintext

normal

CSS : normal
.sample {
direction: rtl;
unicode-bidi: normal;
}
実行結果
~あいうえお。

embed

CSS : embed
.sample {
direction: rtl;
unicode-bidi: embed;
}
実行結果
~あいうえお。

isolate

CSS : isolate
.sample {
direction: rtl;
unicode-bidi: isolate;
}
実行結果
~あいうえお。

bidi-override

CSS : bidi-override
.sample {
direction: rtl;
unicode-bidi: bidi-override;
}
実行結果
~あいうえお。

isolate-override

CSS : isolate-override
.sample {
direction: rtl;
unicode-bidi: isolate-override;
}
実行結果
~あいうえお。

plaintext

CSS : plaintext
.sample {
direction: rtl;
unicode-bidi: plaintext;
}
実行結果
~あいうえお。