https://github.com/rachelandrew/reading-order-items-examples

Somewhere to put examples for work on reading order.
https://github.com/rachelandrew/reading-order-items-examples

Last synced: 25 days ago
JSON representation

Somewhere to put examples for work on reading order.

• Host: GitHub
• URL: https://github.com/rachelandrew/reading-order-items-examples
• Owner: rachelandrew
• Created: 2024-01-23T14:38:15.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-07-12T15:47:08.000Z (6 months ago)
• Last Synced: 2024-07-12T17:56:40.628Z (6 months ago)
• Language: HTML
• Size: 9.77 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# reading-flow examples

Examples for the work to add `reading-flow` to the [CSS Display 4 specification](https://drafts.csswg.org/css-display-4/#reading-flow).

To try these out, install Chrome Dev or Canary (version 128 or higher) and launch it using the [command line flag](https://developer.chrome.com/docs/web-platform/chrome-flags#command-line_flags) `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`](/grid-placement-row.html)

## Flex examples

### Writing mode horizontal-tb, dir ltr

- [Flex with order modifications, `reading-flow: flex-flow`](/flex-flow-with-order.html)

- [Flex with order modifications, `reading-flow: flex-flow`, `flex-direction: row-reverse`](/flex-flow-with-order-reverse.html)

- [Flex with order modifications, `reading-flow: flex-visual`, `flex-direction: row-reverse`](/flex-visual-with-order-reverse.html)

- [Flex with `row-reverse`, `reading-flow: flex-visual`](/flex-row-reverse-visual.html)

### Writing mode horizontal-tb, dir rtl

- [Flex with order modifications, rtl, `reading-flow: flex-flow`, `flex-direction: row-reverse`](/flex-flow-with-order-reverse-rtl.html)

- [Flex with order modifications, rtl, `reading-flow: flex-visual`, `flex-direction: row-reverse`](/flex-visual-with-order-reverse-rtl.html)

### Writing mode vertical-lr

- [Flex with order modifications, `reading-flow: flex-flow`](/flex-flow-with-order-vertical-lr.html)

- [Flex with `row-reverse`, `reading-flow: flex-visual`](/flex-row-reverse-visual-vertical-lr.html)