writing-mode

Baseline 廣泛可用 *

此特性已得到良好確立，可跨多種裝置和瀏覽器版本使用。自 2017 年 3 月起，所有瀏覽器均支援此特性。

* 此特性的某些部分可能存在不同級別的支援。

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

此屬性指定塊流方向，即塊級容器的堆疊方向，以及塊容器內聯級內容的流動方向。因此，它也決定了塊級內容的排序。

語法

css

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
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-lr。
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>
  <caption>
    Using multiple writing modes
  </caption>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr class="text1">
    <th>horizontal-tb</th>
    <td>我家沒有電腦。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text2">
    <th>vertical-lr</th>
    <td>我家沒有電腦。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text3">
    <th>vertical-rl</th>
    <td>我家沒有電腦。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text4">
    <th>sideways-lr</th>
    <td>我家沒有電腦。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text5">
    <th>sideways-rl</th>
    <td>我家沒有電腦。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>

CSS

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}

.experimental {
  display: none;
}

.notice {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

@supports (writing-mode: sideways-lr) {
  .experimental {
    display: table-row;
  }
  .notice {
    display: none;
  }
}

調整內容方向性的 CSS 如下所示

css

.text1 td {
  writing-mode: horizontal-tb;
}

.text2 td {
  writing-mode: vertical-lr;
}

.text3 td {
  writing-mode: vertical-rl;
}

.text4 td {
  writing-mode: sideways-lr;
}

.text5 td {
  writing-mode: sideways-rl;
}

結果

將 writing-mode 與 transforms 結合使用

如果您的瀏覽器不支援 sideways-lr，一種解決方法是使用 transform 來實現類似的效果，具體取決於指令碼方向。vertical-rl 的效果與 sideways-lr 相同，因此對於從左到右的指令碼不需要進行轉換。在某些情況下，將文字旋轉 180 度足以實現 sideways-lr 的效果，但字型字形可能並非設計為旋轉，因此這可能會產生意外的定位或渲染。

HTML

html

<table>
  <caption>
    Using writing-mode with transforms
  </caption>
  <thead>
    <tr>
      <th>Vertical LR</th>
      <th>Vertical LR with transform</th>
      <th>Sideways LR</th>
      <th>Only rotate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="vertical-lr">我家沒有電腦。</span>
        <span class="vertical-lr">Example text</span>
      </td>
      <td>
        <span class="vertical-lr rotated">我家沒有電腦。</span>
        <span class="vertical-lr rotated">Example text</span>
      </td>
      <td>
        <span class="sideways-lr">我家沒有電腦。</span>
        <span class="sideways-lr">Example text</span>
      </td>
      <td>
        <span class="only-rotate">我家沒有電腦。</span>
        <span class="only-rotate">Example text</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

css

.vertical-lr {
  writing-mode: vertical-lr;
}

.rotated {
  transform: rotate(180deg);
}

.sideways-lr {
  writing-mode: sideways-lr;
}

.only-rotate {
  inline-size: fit-content;
  transform: rotate(-90deg);
}

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}
span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

結果

規範

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

瀏覽器相容性

另見

direction
unicode-bidi
text-orientation
text-combine-upright
CSS 邏輯屬性
CSS 書寫模式模組
SVG writing-mode 屬性
建立垂直表單控制元件
處理不同的文字方向
在 W3.org 上對豎排文字（中文、日文、韓文和蒙古文）進行樣式設定（2022 年）

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者於2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題