Layout and Reading Order

Layout and reading order

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

gridbyexample.com

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

Slide from 2015 CSS Day grid talk

CSS Grid, Baseline widely available since January 2023

Slide from 2015 CSS Day grid talk

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

masonry

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

Should masonry be part of grid? Yes No

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.

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

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

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

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

I don’t want masonry in Baseline (yet)

.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); }

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

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.

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

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

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

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

reading-order-items CSS Display Level 4

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

Reading or visual order is subjective

flex-direction: row-reverse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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; }

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

.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; }

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

.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”; }

.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; }

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

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

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

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

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

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

And masonry?

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

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

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

Layout and reading order