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

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

概要

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

以下の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;
}
実行結果
~あいうえお。