direction

スタイルシート属性directionは、文書の方向を指定します。英語などは左から右へと文章が流れますが、アラビア語は右から左の向きになります。横書きでの日本語は、昔は右から左、現在は左から右の向きになっています。通常、スタイルシート属性 unicode-bidi と組み合わせて使用します。

書式

direction: direction

属性値

direction

文章の方向を次の値の中から指定します。

値	意味
ltr	左から右 (left to right)（初期値）
rtl	右から左 (right to left)
inherit	上位のスタイルを継承

使用例

次にスタイルシート属性unicode-bidiを使用したHTMLの例を示します。

<p style="direction: ltr;">This is a pen.</p>

This is a pen.

<p style="direction: rtl;">This is a pen.</p>

This is a pen.

unicode-bidi

スタイルシート属性unicode-bidiは、スタイルシート属性 direction を有効にするか否かを指定します。

書式

unicode-bidi: bidi

属性値

bidi

指定できる値を示します。

値	意味
normal	通常（初期値）
embed	無効
bidi-override	有効
inherit	継承

使用例

次にスタイルシート属性unicode-bidiを使用したHTMLの例を示します。

<p style="direction: rtl; unicode-bidi: normal;">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: bidi-override;">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: embed;">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: isolate;">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: isolate-override;">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: plaintext;">This is a pen.</p>

This is a pen.

writing-mode

スタイルシート属性 writing-mode は、横書き・縦書きの区別を指定します。

書式

writing-mode: mode

属性

mode

横書き・縦書きの区別を指定します。

mode

値	意味
horizontal-tb	横書き
vertical-rl	右から左への縦書き
vertical-lr	左から右への縦書き

横書き

現代では欧米の言語だけでなく、中国語や韓国語も横書きがほとんどである。

<p style="writing-mode: horizontal-tb;">
  風さそふ<br>
  花よりもなほ<br>
  我はまた<br>
  春の名残を<br>
  いかにとやせん
</p>

風さそふ
花よりもなほ
我はまた
春の名残を
いかにとやせん

縦書き

現代において縦書きが一般的に使われるのは日本語だけである。

<p style="writing-mode: vertical-rl;">
  あら楽し<br>
  思いは晴るる<br>
  身は捨つる<br>
  浮世の月に<br>
  かかる雲なし
</p>

あら楽し
思いは晴るる
身は捨つる
浮世の月に
かかる雲なし

縦書き（左から右）

中国内モンゴル自治区のモンゴル語では、左から右へ縦書きする。ただし、モンゴルのモンゴル語は横書きである。

<p style="writing-mode: vertical-lr;">
  梓弓<br>
  ためしにも引け<br>
  武士の<br>
  道は迷はぬ<br>
  跡と思はば
</p>

梓弓
ためしにも引け
武士の
道は迷はぬ
跡と思はば

CSSプロパティ

CSSには次のプロパティがある。