Layout and Reading Order

Slide 1

Layout and reading order

Slide 2

Content lead for Chrome Developer Relations CSS WG member Rachel Andrew Built websites before CSS was a thing rachelandrew.co.uk

Slide 3

gridbyexample.com

Slide 4

24ways.org/2012/css3-grid-layout

Slide 5

Slide from 2015 CSS Day grid talk

Slide 6

CSS Grid, Baseline widely available since January 2023

Slide 7

Slide from 2015 CSS Day grid talk

Slide 8

“You never know how tall anything is on the web” Me … for most of my web development career.

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

masonry

Slide 14

Grid and subgrid let you line things up in two dimensions But sometimes you just want stuff to fit nicely.

Slide 15

Slide 16

Slide 17

Should masonry be part of grid? Yes No

Slide 18

Grid and masonry are opposite in terms of sizing and placement In grid all items are placed before layout. With masonry items are placed as they are laid out.

Slide 19

What happens to incompatible properties and values? Things feel inconsistent when properties and values don’t work

Slide 20

You shouldn’t have to understand how we specify CSS to use CSS

Slide 21

Every future thing we add to grid will have to account for masonry

Slide 22

Add your thoughts • WebKit post: https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/ • Chrome post: https://developer.chrome.com/blog/masonry • Developer feedback issue: https://github.com/w3c/csswg-drafts/issues/10233

Slide 23

I don’t want masonry in Baseline (yet)

Slide 24

Slide 25

Slide 26

.grid a:nth-child(3) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,1fr); }

Slide 27

Here’s a cool thing Please don’t use it.

Slide 28

CSS Grid Level 1 Correct source order is important for speech, for sequential navigation (such as keyboard navigation), and non-CSS UAs such as search engines, tactile browsers, etc. Grid placement only affects the visual presentation! This allows authors to optimize the document source for non-CSS/nonvisual interaction modes, and use grid placement techniques to further manipulate the visual presentation so as to leave that source order intact.

Slide 29

Separating content from presentation Something we’ve tried to do since the early days of CSS layout.

Slide 30

https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/

Slide 31

https://github.com/w3c/csswg-drafts/issues/5675

Slide 32

https://tink.uk/flexbox-the-keyboard-navigation-disconnect/

Slide 33

reading-order-items CSS Display Level 4

Slide 34

Can we just opt into the order that flex or grid items are laid out?

Slide 35

Reading or visual order is subjective

Slide 36

flex-direction: row-reverse

Slide 37

In most cases DOM order is what you want No universal switch to let developers forget about source order.

Slide 38

Scoped to particular layout methods We’re not trying to do this on block layout.

Slide 39

reading-order-items: normal Follow the order of items in the DOM.

Slide 40

.flex { display: flex; flex-direction: row-reverse; }

Slide 41

reading-order-items: flex-visual Follow the visual layout, taking writing mode and direction into account.

Slide 42

.flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-visual; }

Slide 43

reading-order-items: flex-flow Follow the flow order.

Slide 44

.flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-flow; }

Slide 45

Adding the order property Reading order now takes into account the modification made by order.

Slide 46

.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: normal; }

Slide 47

.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-visual; }

Slide 48

.flex a:nth-child(3) { order: -1; } .flex { display: flex; flex-direction: row-reverse; reading-order-items: flex-flow; }

Slide 49

Grid and reading order Automatic layout—grid-auto-flow: dense

Slide 50

Slide 51

Slide 52

reading-order-items: grid-rows Follow the reading order by row.

Slide 53

.grid a:nth-child(3) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,1fr); reading-order-items: grid-rows; }

Slide 54

reading-order-items: grid-columns Follow the reading order by column.

Slide 55

Slide 56

.grid a:nth-child(2) { grid-column: span 3; grid-row: span 3; } .grid { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(5,1fr); reading-order-items: grid-columns; }

Slide 57

Grid and reading order Line-based placement, grid-template-areas

Slide 58

.grid { display: grid; grid-template-columns: repeat(5,1fr); grid-template-areas: “b b b b b” “d d f f f” “d d e c a”; }

Slide 59

.grid { display: grid; grid-template-columns: repeat(5,1fr); grid-template-areas: “b b b b b” “d d f f f” “d d e c a”; reading-order-items: grid-rows; }

Slide 60

reading-order-items: grid-order As normal, but take the order property into account.

Slide 61

Slide 62

Current spec issues Please comment on these, or add an issue for anything new.

Slide 63

reading-order-items or reading-order? https://github.com/w3c/csswg-drafts/issues/9921

Slide 64

A different proposal https://github.com/w3c/csswg-drafts/issues/9923

Slide 65

How will reading-order-items work with display: contents? https://github.com/w3c/csswg-drafts/issues/9230

Slide 66

Should this be expanded to tables? https://github.com/w3c/csswg-drafts/issues/9922

Slide 67

And masonry?

Slide 68

Source order is important Never use reading-order-items to avoid the work of updating your HTML.

Slide 69

Create a sensible document Then consider small tweaks to optimize the reading experience at different breakpoints.

Slide 70

Slide 71

Slide 72

Thank you Rachel Andrew https://noti.st/rachelandrew/AoKXhe/