direction: ***; unicode-bidi: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
direction は基本書字方向を、unicode-bidi はUnicodeの双方向アルゴリズムを制御するプロパティです。
p {
direction: rtl;
unicode-bidi: bidi-override;
}
directionプロパティ
ブロックレベル要素の基本書字方向を指定します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
direction |
ltr |
左から右へ （初期値） |
rtl |
右から左へ |
- この設定内容をインライン要素に適用させるには、以下の
unicode-bidiプロパティでembedまたはbidi-overrideを指定する必要があります。
unicode-bidiプロパティ
Unicodeの双方向アルゴリズムを制御します。（書字方向の組み込み、または上書きを指定することができます）
| プロパティ名 | 値 | 説明 |
|---|---|---|
unicode-bidi |
normal |
制御しない （初期値） |
embed |
directionプロパティの指定内容を組み込む | |
bidi-override |
directionプロパティの指定内容で上書きする |
normal- Unicodeの双方向アルゴリズムがそのまま適用されます。
embed- 指定した要素がインライン要素の場合は、
directionプロパティの指定内容を新たに組み込みます。（文字の並び方は変わりません） bidi-override- 指定した要素がインライン要素、またはインライン要素のみを含むブロックレベル要素の場合は、
directionプロパティの指定内容で上書きします。（文字の並び方も上書きされます）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p { direction: rtl; }
.example1 { unicode-bidi: embed; }
.example2 { unicode-bidi: bidi-override; }
</style>
</head>
<body>
<p>テキストの「書字方向。」を、右から左へ。</p>
<p>テキストの<span class="example1">「書字方向。」</span>を、右から左へ。</p>
<p class="example2">テキストの「書字方向。」を、右から左へ。</p>
<p>テキストの<span class="example2">「書字方向。」</span>を、右から左へ。</p>
</body>
</html>
- 表示例
-
テキストの「書字方向。」を、右から左へ。
テキストの「書字方向。」を、右から左へ。
テキストの「書字方向。」を、右から左へ。
テキストの「書字方向。」を、右から左へ。