表單控制項元素的 CSS 垂直撰寫模式

Di Zhang
Di Zhang

從 Chrome 119 推出至 123 版本，是全新的國際 CSS 功能，來自 CSS 寫入模式層級 4。表單控制項元素的垂直撰寫模式，代表這些元素可用垂直書寫模式顯示。自 Chrome 123 版本將為所有使用者啟用這項功能。

適用於文字型表單控制項元素的垂直書寫模式

完整啟用這項功能後，即可對表單控制項元素 (例如按鈕、選取清單和進度元素) 使用垂直書寫模式。如要使用，請將 CSS 屬性寫入模式設為 vertical-lr，用於從左到右的區塊流程方向，並將 vertical-rl 設為從右到左的區塊流程方向。

這對許多傳統東亞語言而言，十分實用，因為傳統上皆使用垂直字集來寫字。例如，傳統的日文通常是從右至左直接寫。

垂直書寫模式範例

以下是一些國際化的垂直表單控制項範例。

按鈕

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

垂直文字按鈕。

<select> 個元素

您可以指定 <select> 元素以垂直方式顯示所有文字。

select {
  writing-mode: vertical-lr;
}

<select multiple>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

<select>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

含有垂直文字的選取清單。

請注意，目前實作仍可橫向顯示彈出式視窗的選項。

文字輸入

針對多種以文字輸入為基礎的表單控制項，現在輸入文字時可使用垂直撰寫模式。

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

帶有垂直文字的文字區域。

滑桿

以視覺元素呈現表單元素的價值，也是不錯的做法。這就是 <meter>、<progress> 和 <input type=range> 等滑桿的作用。

各種滑桿控制項。

先前，只有 <range> 能使用非標準 CSS 外觀值 slider-vertical 進行垂直算繪。現在，只要使用 CSS writing-mode 屬性 就能以垂直方式顯示這三項屬性

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

滑桿控制項是垂直顯示。

根據預設，CSS 方向會設為 ltr。這表示值將由上往下轉譯。您可以將方向設為 rtl，藉此指定值往上到的方向。

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

投影片控制項顯示在垂直底部至頂端。

我們針對在 Chrome 122 中變更價值方向的實驗，進行實驗。 如有任何意見，歡迎與我們聯絡。

互動並提供意見

如要針對這些功能提供意見，請前往 crbug.com 回報問題。