writing-mode

writing-modeCSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

このプロパティは、ブロックのフロー方向を指定します。これは、ブロックレベルコンテナが積まれる方向と、インラインレベルのコンテンツがブロックコンテナ内でフローする方向です。このように、 writing-mode プロパティはブロックレベルのコンテンツの順序も決定します。

構文

/* キーワードの値 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* グローバルの値 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

writing-mode プロパティは、以下のいずれかの値として指定されます。横書きの場合はその言葉の書字方向も影響し、左書き (ltr、英語やその他の多くの言葉) や右書き (rtl、ヘブライ語やアラビア語) のどちらかになります。

horizontal-tb
ltr の言語では、コンテンツは左から右へ水平に流れます。 rtl の言語では、コンテンツは右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。
vertical-rl
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
vertical-lr
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
sideways-rl
ltr の言語では、コンテンツは下から上へ垂直に流れます。 rtl の言語では、コンテンツは上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。
sideways-lr
ltr の言語では、コンテンツは上から下へ垂直に流れます。 rtl の言語では、コンテンツは下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
lr
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
lr-tb
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
rl
SVG1 文書を除き、非推奨です。CSS では、horizontal-tb を代わりに使用してください。
tb
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。
tb-rl
SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。

正式な構文

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

この例では、すべての書字方向を示し、各モードでさまざまな言語のテキストを表示します。

HTML

HTML は単純な <table> であり、行方向に書字方向を、列方向にその書字方向を使用して、さまざまな種類のテキストが表示される様子を表します。

<table>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>

CSS

コンテンツの方向を調整する CSS は次のようになります。

.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

結果

以下の画像は、ブラウザーの writing-mode の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。

仕様書

仕様書 状態 備考
CSS Writing Modes Level 4
writing-mode の定義
勧告候補 sideways-lr および sideways-rl を追加
CSS Writing Modes Module Level 3
writing-mode の定義
勧告案 初回定義
初期値horizontal-tb
適用対象表の行グループ、表の列グループ、表の行、表の列を除くすべての要素
継承あり
計算値指定値
アニメーションの種類個別

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
writing-modeChrome 完全対応 48
完全対応 48
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 41
補足
完全対応 41
補足
補足 Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
未対応 36 — 51
無効
無効 From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 9
接頭辞付き 補足
完全対応 9
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer's implementation differs from the specification.
Opera 完全対応 35
完全対応 35
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 10.1
完全対応 10.1
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 48
完全対応 48
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 48
完全対応 48
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 41
補足
完全対応 41
補足
補足 Firefox 42 added support for bidirectional and RTL scripts in vertical modes.
未対応 36 — 51
無効
無効 From version 36 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 35
完全対応 35
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 10.3
完全対応 10.3
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
horizontal-tb, vertical-lr, and vertical-rlChrome 完全対応 48Edge 完全対応 79Firefox 完全対応 43IE 未対応 なしOpera 完全対応 35Safari 完全対応 9WebView Android 完全対応 48Chrome Android 完全対応 48Firefox Android 完全対応 43Opera Android 完全対応 35Safari iOS 完全対応 9Samsung Internet Android 完全対応 5.0
sideways-lr and sideways-rlChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 43IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 43Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
lr, lr-tb, rl, rl-tb, tb, and tb-rl
非推奨
Chrome 完全対応 48Edge 完全対応 12Firefox 完全対応 43IE 完全対応 9
接頭辞付き
完全対応 9
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 35Safari 完全対応 10.1WebView Android 完全対応 48Chrome Android 完全対応 48Firefox Android 完全対応 43Opera Android 完全対応 35Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報