reading-order-items-examples

reading-flow examples

Examples for the work to add reading-flow to the CSS Display 4 specification.

To try these out, install Chrome Dev or Canary (version 128 or higher) and launch it using the command line flag CSSReadingFlow. For example, on a Mac:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSReadingFlow

Grid examples

• Grid with grid-template-areas, reading-flow: grid-row

Flex examples

Writing mode horizontal-tb, dir ltr

• Flex with order modifications, reading-flow: flex-flow
• Flex with order modifications, reading-flow: flex-flow, flex-direction: row-reverse
• Flex with order modifications, reading-flow: flex-visual, flex-direction: row-reverse
• Flex with row-reverse, reading-flow: flex-visual

Writing mode horizontal-tb, dir rtl

• Flex with order modifications, rtl, reading-flow: flex-flow, flex-direction: row-reverse
• Flex with order modifications, rtl, reading-flow: flex-visual, flex-direction: row-reverse

Writing mode vertical-lr

• Flex with order modifications, reading-flow: flex-flow
• Flex with row-reverse, reading-flow: flex-visual