{"id":5868,"date":"2025-05-14T17:28:54","date_gmt":"2025-05-14T22:28:54","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5868"},"modified":"2025-05-14T17:28:56","modified_gmt":"2025-05-14T22:28:56","slug":"reading-flow-ships-in-chrome-137","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/reading-flow-ships-in-chrome-137\/","title":{"rendered":"Reading flow ships in Chrome 137"},"content":{"rendered":"\n<p><a href=\"https:\/\/rachelandrew.co.uk\/archives\/2025\/05\/02\/reading-flow-ships-in-chrome-137\/\">Rachel Andrew notes an excellent new feature<\/a> of CSS that Chrome is dropping first: <code>reading-flow<\/code> and <code>reading-order<\/code>.<\/p>\n\n\n\n<p>There are CSS features that can move elements to places that make what the tabbing order (thus &#8220;reading order&#8221;) super different than what the visual order of the elements is. This can be an awkward jumpy-aroundy experience and it&#8217;s considered an accessibility problem. <\/p>\n\n\n\n<p>This is a step toward fixing that. I took a very basic example from <a href=\"https:\/\/drafts.csswg.org\/css-display-4\/#reading-flow\">the spec<\/a> to try it out and <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/jEEdewP\">made a Pen<\/a>. See this video I took in Chrome Canary how it goes from the wrong order to the right order:<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='449' src='https:\/\/videopress.com\/embed\/GB9i9HLl?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<!--more-->\n\n\n\n<p>I was imagining (hoping?) it would be more like <code>reading-order: visual;<\/code> where it would just &#8220;make it work&#8221; based on the rendered position of the elements and the direction and writing-mode and whatnot (even absolute positioning or masonry?). But it looks like this (for now?) is specifically for fixing flexbox and grid layouts and you have to specifically tell it what you&#8217;re doing. <\/p>\n\n\n\n<p>(sorry about all the parentheticals)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rachel Andrew notes an excellent new feature of CSS that Chrome is dropping first: reading-flow and reading-order. There are CSS features that can move elements to places that make what the tabbing order (thus &#8220;reading order&#8221;) super different than what the visual order of the elements is. This can be an awkward jumpy-aroundy experience and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,344,123,343],"class_list":["post-5868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-flexbox","tag-grid","tag-reading-order"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-14-at-3.28.05%E2%80%AFPM.png?fit=1522%2C940&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5868"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5868\/revisions"}],"predecessor-version":[{"id":5872,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5868\/revisions\/5872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5873"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}