從 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 回報問題。