CSS vertical writing mode for form control elements

Di Zhang
Di Zhang

Rolling out from Chrome 119 to 123 is a new international CSS feature from CSS Writing Modes Level 4. Vertical writing mode for form control elements means that these elements can be displayed in vertical writing modes. By Chrome 123 the feature will be enabled for all users, this post explains the feature.

Vertical writing mode for text-based form control elements

Once this feature is fully enabled, it will be possible to use vertical writing modes for form control elements such as buttons, select lists, and progress elements. To use it, set the CSS property writing-mode to vertical-lr for left-to-right block flow direction and vertical-rl for right-to-left block flow direction.

This is useful for many East Asian languages that traditionally have used vertical scripts for writing. For example, traditional Japanese is often written vertically from right to left.

Example of vertical writing modes

Here are some internationalized examples of vertical form controls.

Buttons

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

A button with vertical text.

<select> elements

You can specify that a <select> element will display all text vertically.

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>

A select list with vertical text.

Note that the current implementation still has the popup window's options displayed horizontally.

Text-based inputs

For many text input based form controls, it is now possible to use a vertical writing mode when entering text.

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

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

A textarea with vertical text.

Sliders

It can also be valuable to display a form element's value visually. That is what sliders such as <meter>, <progress> and <input type=range> do.

A variety of slider controls.

Previously, only <range> could be rendered vertically using the non-standard CSS appearance value slider-vertical. Now, all three can be displayed vertically using the CSS writing-mode property.

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

The slider controls displayed vertically.

By default, the CSS direction is set to ltr. This means values will be rendered top to bottom. You can specify the direction of the value to be bottom to top by setting the direction as rtl.

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

The slide controls displayed vertically bottom to top.

There is an experiment for changing the value direction in Chrome 122. Let us know if you have feedback.

Engage and share feedback

To share feedback about these features, file an issue at crbug.com.