Today I Learned - Rocky Kev

TIL writing modes

POSTED ON:

TAGS: accessibility rtl css mdn

The writing-mode CSS property determines if lines are laid our horizontally, or vertically.

writing-mode: horizontal-tb; /* horizontal top-bottom */
writing-mode: vertical-lr; /* vertical left-right */
writing-mode: vertical-rl; /* vertical right-left */

writing-mode: sideways-lr; /* sideways left-right - EXPERIMENTAL */
writing-mode: sideways-rl; /* sideways right-left - EXPERIMENTAL */

The direction is determined by the context of the direction of the content.

Left-to-right languages - lts (Like English)
Right-to-left languages - rtl (like Hebrew or Arabic)

If all browsers did it correctly, it should look like this:

MDN - writing-mode

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.