Other / Visual / Reading Order Bookmarklet

The Reading Order bookmarklet visualizes the reading order of content elements based on their display layout. Prompts for a CSS selector (default searches common elements) and display type ("flex" or "grid"), then numbers visible child elements in sequence to show the order they would be encountered. Elements matching the display type are outlined in red, their visible children are outlined in blue, and numbered badges show the reading sequence. Useful for identifying CSS layout issues that affect logical reading order.

javascript:%21function()%7Btry%7Bvar%20e%2Ct%3Dprompt(%22Selector%3F%20(blank%20searches%20most)%22%2C%22%22)%2Cr%3Dprompt(%22Flex%20or%20grid%3F%22%2C%22grid%22)%2Cn%3Ddocument.createElement(%22style%22)%3Bif(document.head.appendChild(n)%2C(e%3Dn.sheet).insertRule(%22%23ReadingOrderContainer%20span%7Bposition%3Aabsolute%3Bborder%3A.1rem%20solid%20%2300f%3Bborder-radius%3A50%25%3Bbackground%3A%23fff%3Bcolor%3A%23000%3Bpadding%3A.25rem%20.5rem%3Bfont-family%3A%27Segoe%20UI%27%2C-apple-system%2CBlinkMacSystemFont%2CRoboto%2COxygen-Sans%2CUbuntu%2CCantarell%2C%27Helvetica%20Neue%27%2Csans-serif%3Btext-align%3Acenter%3Bmin-width%3A1rem%3Bline-height%3A1%3Bbox-shadow%3A.2rem%20.2rem%20.2rem%20rgba(0%2C0%2C0%2C.5)%3Bmargin-left%3A-.5rem%3Bmargin-top%3A-.75rem%7D%22%2C0)%2Ce.insertRule(%22%23ReadingOrderContainer%20span%3Afocus%2C%23ReadingOrderContainer%20span%3Ahover%7Bbackground-color%3A%2300f%3Bcolor%3A%23fff%3Bz-index%3A500%3Boutline%3A0%7D%22%2C0)%2C%22%22%3D%3Dt)var%20o%3Ddocument.querySelectorAll(%22address%2C%20article%2C%20aside%2C%20blockquote%2C%20caption%2C%20details%2C%20dialog%2C%20dd%2C%20div%2C%20dl%2C%20dt%2C%20fieldset%2C%20figcaption%2C%20figure%2C%20footer%2C%20form%2C%20h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6%2C%20header%2C%20hgroup%2C%20hr%2C%20li%2C%20main%2C%20nav%2C%20ol%2C%20p%2C%20pre%2C%20section%2C%20table%2C%20td%2C%20th%2C%20ul%2C%20img%2C%20video%2C%20button%2C%20input%2C%20select%2C%20textarea%22)%3Belse%20o%3Ddocument.querySelectorAll(t)%3Bfor(var%20d%3D%5B%5D%2Ca%3D%5B%5D%2Cl%3D0%2Ci%3D0%2Cs%3D0%3Bs%3Co.length%3Bs%2B%2B)if(window.getComputedStyle(o%5Bs%5D).getPropertyValue(%22display%22)%3D%3D%3Dr)%7Bd%5Bl%5D%3Do%5Bs%5D%2Cl%2B%3D1%2Co%5Bs%5D.style.outline%3D%22.4rem%20dotted%20rgba(255%2C0%2C0%2C.5)%22%3Bfor(var%20c%3D0%3Bc%3Co%5Bs%5D.children.length%3Bc%2B%2B)%22none%22%21%3D%3Dwindow.getComputedStyle(o%5Bs%5D.children%5Bc%5D).getPropertyValue(%22display%22)%26%26(a%5Bi%5D%3Do%5Bs%5D.children%5Bc%5D%2Ci%2B%3D1%2Co%5Bs%5D.children%5Bc%5D.style.outline%3D%22.1rem%20solid%20rgba(0%2C0%2C255%2C.25)%22)%7Dvar%20m%3Ddocument.getElementById(%22ReadingOrderContainer%22)%3Bm%26%26m.parentNode%26%26m.parentNode.removeChild(m)%3Bvar%20g%3Ddocument.querySelector(%22body%22)%2Cu%3Ddocument.createElement(%22aside%22)%3Bu.id%3D%22ReadingOrderContainer%22%2Cg.appendChild(u)%3Bvar%20p%3Ddocument.getElementById(%22ReadingOrderContainer%22)%2Ch%3D1%3Bfor(c%3D0%3Bc%3Ca.length%3Bc%2B%2B)%7Bvar%20f%3Da%5Bc%5D.getBoundingClientRect()%2Cy%3Ddocument.createElement(%22span%22)%3By.setAttribute(%22class%22%2C%22poscount%22)%2Cy.setAttribute(%22tabindex%22%2C%220%22)%2Cy.innerText%3Dh%2Cy.style.left%3Df.left%2B%22px%22%2Cy.style.top%3Df.top%2B%22px%22%2Cp.appendChild(y)%2Ch%2B%3D1%7D%7Dcatch(e)%7Bconsole.log(%22getNodes()%3A%20%22%2Be)%7D%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fadrianroselli.com%2F2019%2F04%2Freading-order-bookmarklet.html%5CnBookmarklet%20name%3A%20Reading%20Order%5Cn%22)%3B