表單控制項元素的 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.