Today I Learned - Rocky Kev

TIL writing-mode

POSTED ON:

TAGS: css accessibility codepen caniuse

Today I learned about writing-mode.

This property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.

.normal {
  writing-mode: horizonal-tb;
}
.sideway {
  writing-mode: vertical-rl;
}
.sideway-r {
  writing-mode: vertical-lr;
}
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Via the MDN (as of 2021), there's two experimental values:

sideways-rl
For ltr scripts, content flows vertically from bottom to top. For rtl scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the right.

sideways-lr
For ltr scripts, content flows vertically from top to bottom. For rtl scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the left.

I couldn't get writing-mode: vertical-lr; working. Was hoping to create an example.

See the Pen ExZwMmG by rockykev (@rockykev) on CodePen.

It has excellent support.
https://caniuse.com/css-writing-mode

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')