CSSwriting-mode プロパティは、テキストの行のレイアウトを水平または垂直に、ブロックのフロー方向を左向きまたは右向きにするかを定義します。

このプロパティは、ブロックのフロー方向 を指定します。これは、ブロックレベルコンテナが積まれる方向と、インラインレベルのコンテンツがブロックコンテナ内でフローする方向です。このように、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 プロパティは、以下のいずれかの値として指定されます。

horizontal-tb
コンテンツは左から右へ水平に、上から下へ垂直方向に流れます。次の水平な行は、前の行の下に配置されます。
vertical-rl
コンテンツは上から下へ垂直に、右から左へ水平方向に流れます。次の垂直な行は、前の行の左に配置されます。
vertical-lr
コンテンツは上から下へ垂直に、左から右へ水平方向に流れます。次の垂直な行は、前の行の右に配置されます。
sideways-rl
コンテンツは上から下へ垂直に、また垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。
sideways-lr
コンテンツは上から下へ垂直に、また垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
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 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>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>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>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>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>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 Module Level 3
writing-mode の定義
勧告候補 初回定義
CSS Writing Modes Level 4
writing-mode の定義
勧告候補 sideways-lr および sideways-rl を追加

初期値horizontal-tb
適用対象表の行グループ、表の列グループ、表の行、表の列を除くすべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
完全対応 あり
完全対応 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 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 5.1
接頭辞付き
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
完全対応 あり
完全対応 47
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -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 ? Safari iOS 完全対応 5.1
接頭辞付き
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
完全対応 あり
完全対応 5.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
lr, lr-tb, rl, rl-tb, tb, and tb-rl
非推奨
Chrome 完全対応 48Edge 完全対応 12Firefox 完全対応 43IE 完全対応 9
接頭辞付き
完全対応 9
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 ありSafari ? WebView Android 完全対応 48Chrome Android 完全対応 48Edge Mobile 完全対応 ありFirefox Android 完全対応 43Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
horizontal-tb, vertical-lr, and vertical-rlChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 43IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
sideways-lr and sideways-rl
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 43IE 未対応 なしOpera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo, yyss, Sebastianz, Marsf, mkato, KitaitiMakoto, ethertank, sosleepy
最終更新者: mfuji09,