CSS | direction / unicode-bidi | 文字の方向

CSSのdirectionプロパティについて解説します。アラビア語、ペルシア語、ヘブライ語など右から左に書く言語のためのものであり、日本語や英語で書く場合には使いません。

`direction`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

実行結果初期状態

sample

アラビア語、ペルシア語、ヘブライ語など右から左に書く言語で記述する場合、directionをrtlに設定するようです。

`direction`の設定値
設定値	意味	デフォルト
`rtl`	(アラビア語、ペルシア語、ヘブライ語など)右から左に書く言語
`ltr`	(日本語や英語など)左から右に書く言語

rtlとltrの実行結果を示します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    direction: rtl;
}

実行結果rtl

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    direction: ltr;
}

実行結果ltr(デフォルト値)

sample

`unicode-bidi`

directionがrtlの時に使う設定のようですが、まー意味が分かりません。(アラビア語とかで調べたら分かるのかも)

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

一応、実行結果を示します。

HTML


<div class="normal"           >div - normal</div>
<div class="embed"            >div - embed</div>
<div class="isolate"          >div - isolate</div>
<div class="bidi-override"    >div - bidi-override</div>
<div class="isolate-override" >div - isolate-override</div>
<div class="plaintext"        >div - plaintext</div>

CSS


div {
    direction:  rtl;
    border:     1px solid blue; /* 境界線 */
    font-size:  1.5rem;         /* 文字の大きさ */
    margin:     5px;            /* 外側の余白 */
    padding:    8px;            /* 内側の余白 */
}

.normal           { unicode-bidi: normal;           }
.embed            { unicode-bidi: embed;            }
.isolate          { unicode-bidi: isolate;          }
.bidi-override    { unicode-bidi: bidi-override;    }
.isolate-override { unicode-bidi: isolate-override; }
.plaintext        { unicode-bidi: plaintext;        }

実行結果unicode-bidi

div - normal

div - embed

div - isolate

div - bidi-override

div - isolate-override

div - plaintext