Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

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

初期値horizontal-tb
適用対象テーブル行グループ、テーブル列グループ、テーブル行、テーブル列を除く全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

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

<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="exampleText1">我家没有电脑。</td>
        <td class="exampleText1">Example text</td>
        <td class="exampleText1">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="exampleText2">我家没有电脑。</td>
        <td class="exampleText2">Example text</td>
        <td class="exampleText2">1994年に至っては</td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="exampleText3">我家没有电脑。</td>
        <td class="exampleText3">Example text</td>
        <td class="exampleText3">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="exampleText4">我家没有电脑。</td>
        <td class="exampleText4">Example text</td>
        <td class="exampleText4">1994年に至っては</td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="exampleText5">我家没有电脑。</td>
        <td class="exampleText5">Example text</td>
        <td class="exampleText5">1994年に至っては</td>
    </tr>
table { border-collapse:collapse; }
td, th {border: 1px black solid; padding: 3px; }
th {background-color: lightgray; }
.exampleText1 { width:75px; writing-mode: horizontal-tb;}
.exampleText2 { height:75px; writing-mode: vertical-lr; }
.exampleText3 { height:75px; writing-mode: vertical-rl; }
.exampleText4 { height:75px; writing-mode: sideways-lr; }
.exampleText5 { height:75px; writing-mode: sideways-rl; }

実際の結果

仕様

仕様 状況 コメント
CSS Writing Modes Module Level 3
The definition of 'writing-mode' in that specification.
勧告候補 Initial definition

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 8-webkit 41 (41)[1] [3] 9.0 -ms[2] 15-webkit 5.1-webkit
SVG 1.1 の値 lr, lr-tb, rl, tb, tb-rl 48.0 (uprefixed) 43 (43) 9.0 -ms[2] (有) ?
sideways-rl,sideways-lr 未サポート (48.0 現在) 43 (43) 未サポート (25 現在) 未サポート (35.0 現在) ?
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 3-webkit (有) 47-webkit 41.0 (41) [1] [3] ? ? 5.1 -webkit
SVG 1.1 の値 lr, lr-tb, rl, tb, tb-rl ? 48.0 (uprefixed) 48.0 (uprefixed) 43.0 (43) ? ? ?
sideways-rl,sideways-lr 未サポート[4] 未サポート 未サポート ? ? ? ?

[1] Gecko 36 から実験的な実装が利用できます。これは、layout.css.vertical-text.enabled 設定により管理され、Firefox 38 までは既定値が false に設定されています。Firefox 39 および Firefox 40 では、Nightly と DevTools エディションでこの既定値が true に設定されます。ただし、まだすべての CSS ウィジェット (table など) がこのプロパティに従うわけではありません。

[2] Internet Explorer での実装は、W3C の仕様と異なります。Internet Explorer Dev Center の関連記事 を参照してください。

[3] 双方向および rtl のテキストを垂直に流すモードは、Gecko 42 以降でサポートします。

関連情報

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

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