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

Di Zhang
Di Zhang

從 Chrome 119 到 123 推出的功能，是來自 CSS 書寫模式第 4 級的全新國際 CSS 功能。表單控制項元素的直式書寫模式表示這些元素可在直式書寫模式中顯示。在 Chrome 123 中，這項功能將開放給所有使用者，本篇文章將說明這項功能。

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

這項功能全面啟用後，您就能針對按鈕、選取清單和進度元素等表單控制項使用直向書寫模式。如要使用這個屬性，請將 CSS 屬性 writing-mode 設為 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 回報問題。