When do I need cursor: vertical-text?

Mostly in custom editors with vertical text where you set every cursor yourself. For normal vertical text, browsers usually pick the vertical I-beam on their own.

Does Windows have a vertical text cursor?

Not as one of its 17 cursor roles, so a Windows cursor scheme cannot change it. Browsers ship their own image.

Is vertical-text supported everywhere?

Desktop Chrome, Edge, Firefox and Safari all support it. On iPad it falls back to the round default pointer.

Selection

cursor: vertical-text in CSS: the sideways I-beam

vertical-text is the I-beam turned on its side, for selecting text that runs top to bottom, as in vertical Japanese, Chinese or Korean layouts.

cursor: vertical-text; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for vertical-text.

What it shows

A horizontal I-beam. Windows has no system role for it, so Chrome, Edge and Firefox draw their own. macOS has a native vertical I-beam that browsers use.

Usage

When to use it

Use it for

Custom editors or reading views with writing-mode: vertical-rl where you set cursors by hand.
Vertical labels in charts or table headers that people can select and copy.
Editorial layouts with vertical display type that should stay selectable.

Avoid it for

Horizontal text. It only confuses people.
When the browser already does it: Chrome switches to the vertical I-beam on its own for vertical writing modes.

Code

Copy the snippet

CSS

.tategaki { writing-mode: vertical-rl; cursor: vertical-text; }

HTML

<p class="tategaki">This line runs from top to bottom.</p>

Support

Browsers and systems

Browser support for vertical-text
Browser	Support
Chrome	1
Edge	12
Firefox	1.5
Safari	3
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	none (browser-supplied)
Windows file	`none`
macOS	Vertical I-beam

Watch out

Gotchas

In Chrome, both auto and text already show the vertical I-beam inside an element with a vertical writing-mode, so you may not need this keyword at all.

FAQ

Questions

When do I need cursor: vertical-text?: Mostly in custom editors with vertical text where you set every cursor yourself. For normal vertical text, browsers usually pick the vertical I-beam on their own.
Does Windows have a vertical text cursor?: Not as one of its 17 cursor roles, so a Windows cursor scheme cannot change it. Browsers ship their own image.
Is vertical-text supported everywhere?: Desktop Chrome, Edge, Firefox and Safari all support it. On iPad it falls back to the round default pointer.