demo · v132

Vertical Timeline

Chrome 132 adds writing-mode: sideways-rl and sideways-lr. Unlike vertical-rl / vertical-lr, the sideways values rotate the entire text 90° while keeping each character upright Latin-style — ideal for timelines, axis labels, and UI tabs. Toggle between modes to see the difference.

Writing mode:
1990
World Wide Web invented at CERN. HTML 1.0 draft.
1995
JavaScript introduced in Netscape. CSS1 drafted.
2008
Chrome launches. HTML5 canvas and workers emerge.
2015
ES6, Service Workers, Fetch API go mainstream.
2024
View Transitions, Scroll-driven Animations ship.

All writing modes compared

horizontal-tb
Hello world
2024
Standard left-to-right, top-to-bottom. Default for Western scripts.
sideways-rl (new)
Hello world
2024
Text rotated 90° clockwise, reading bottom-to-top. Characters stay upright.
sideways-lr (new)
Hello world
2024
Text rotated 90° counter-clockwise, reading top-to-bottom. Characters stay upright.
vertical-rl
Hello world
2024
CJK-style: characters stack vertically. Latin chars rotate individually — looks broken for Latin text.
vertical-lr
Hello world
2024
Same as vertical-rl but lines run left-to-right instead of right-to-left.
/* sideways-rl — bottom-to-top, chars upright */
.timeline-label {
  writing-mode: sideways-rl;
  /* text-orientation: mixed is implicit and correct */
}

/* sideways-lr — top-to-bottom, chars upright */
.axis-label {
  writing-mode: sideways-lr;
}

/* Key difference from vertical-rl: */
/* vertical-rl rotates each CJK char 0°, Latin chars 90° */
/* sideways-rl rotates the WHOLE text block 90° clockwise */
/* → Latin text looks natural when read tilting head right */

see also