writing-mode

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

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

構文

/* キーワードの値 */
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; }

実際の結果

仕様

ブラウザ実装状況

[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 以降でサポートします。

関連情報

• SVG writing-mode 属性
• direction
• unicode-bidi
• text-orientation
• text-combine-upright