We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

構文

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

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

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

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

HTML

HTML は、単なる <table> です。各 writing mode は行で、列はその writing mode を使用するさまざまな活字のテキストを表示します。

<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;
}

実際の結果

仕様

仕様 状況 コメント
CSS Writing Modes Module Level 3
writing-mode の定義
勧告候補 最初の定義
CSS Writing Modes Level 4
writing-mode の定義
草案 sideways-lr および sideways-rl を追加

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

あり

8 -webkit-

12

12 -webkit-

411

36 — 512

9 -ms- 315 -webkit- 5.1 -webkit-
lr, lr-tb, rl, rl-tb, tb, and tb-rl4812439 -ms- あり ?
horizontal-tb, vertical-lr, and vertical-rl あり なし43 なし あり ?
sideways-lr and sideways-rl なし ?43 なし なし ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

あり

3 -webkit-

あり

47 -webkit-

あり

あり -webkit-

411

36 — 512

?5.1 -webkit-

あり

5.0 -webkit-

lr, lr-tb, rl, rl-tb, tb, and tb-rl4848 あり43 ? ?5.0
horizontal-tb, vertical-lr, and vertical-rl なし なし なし ? ? ? なし
sideways-lr and sideways-rl なし なし ? ? ? ? なし

1. Firefox 42 added support for bidirectional and RTL scripts in vertical modes.

2. 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.

3. Internet Explorer's implementation differs from the specification.

関連情報

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

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