demo · v132

Use cases that needed sideways: bookshelf spines and chart labels

The CSSWG's motivating cases for sideways-lr / sideways-rl are typographic: book spines, infographic axis labels, ribbon banners. The shelf below is one rule per spine; flip the “flip orientation” button to compare with the legacy transform: rotate(90deg) trick.

checking sideways-lr / sideways-rl…

bookshelf (writing-mode: sideways-rl)

Designing TypeKaren Cheng
The Visual Display of Quantitative InformationTufte
Detail in TypographyHochuli
A Type PrimerKane
Elements of StyleStrunk & White
Lateral CommunicationEames
Grid SystemsMueller-Brockmann

infographic axis (writing-mode: sideways-lr)

Q1
Q2
Q3
Q4
Q5
.book {
  writing-mode: sideways-rl;
  /* spine reads bottom-to-top; whole-glyph rotation, no per-glyph reorientation */
}
.axis .bar {
  writing-mode: sideways-lr;
  /* reads top-to-bottom; useful for chart axis labels that must align with bars */
}

see also