writing-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

writing-mode: sideways-rl;

writing-mode: sideways-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

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

構文

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

/* グローバルの値 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
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-lr

SVG1 文書を除き、非推奨です。CSS では、vertical-lr を代わりに使用してください。

tb-rl

SVG1 文書を除き、非推奨です。CSS では、vertical-rl を代わりに使用してください。

公式定義

初期値horizontal-tb
適用対象表の行グループ、表の列グループ、表の行、表の列を除くすべての要素
継承あり
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

writing-mode = 
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

例

複数の書字方向の使用

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

HTML

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

html
<table>
  <tr>
    <th>値</th>
    <th>縦書きの文字</th>
    <th>横書き (LTR) の文字</th>
    <th>横書き (RTL) の文字</th>
    <th>混在する文字</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 は次のようになります。

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 の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。

仕様書

Specification
CSS Writing Modes Level 4
# block-flow
Scalable Vector Graphics (SVG) 2
# WritingModeProperty

ブラウザーの互換性

関連情報