![Di Zhang](https://web.dev/images/authors/dizhangg.jpg) Di Zhang

<br />

Rolling out from Chrome 119 to 123 is a new international CSS feature from [CSS
Writing Modes Level 4](https://drafts.csswg.org/css-writing-modes/). 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](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode0.png)

Here are some internationalized examples of vertical form controls.

### Buttons

```html
<html lang="zh">

<button>请点击</button>
```

```css
button {
  writing-mode: vertical-rl;
}
```

![A button with vertical text.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode1.png)

### `<select>` elements

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

```css
select {
  writing-mode: vertical-lr;
}
```

```html
<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.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode2.png)

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.

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

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

![A textarea with vertical text.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode3.png)

## 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.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode4.png)

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.

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

![The slider controls displayed vertically.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode5.png)

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`.

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

![The slide controls displayed vertically bottom to top.](https://developer.chrome.com/static/blog/vertical-form-controls/image/writing-mode6.png)

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](https://issues.chromium.org/issues/new?noWizard=true&template=0&component=1456410).