Merge pull request #548 from cmbuckley/reader-mode-fix

cmbuckley · web-flow · commit 7de9a4aadfdd · 2026-01-13T22:30:11.000Z
Reader mode fix
diff --git a/_data/fingerprints.yml b/_data/fingerprints.yml
@@ -3,4 +3,4 @@ icons: 715715b9
 maths: 5414f235
 scripts: 5220ed99
 search: b74b56ab
-style: 7179d42c
+style: 5addde04
diff --git a/_includes/v.html b/_includes/v.html
@@ -1,7 +1,7 @@
 {%- unless site.suppress_fingerprints -%}
   ?v=
 
-  {%- assign fingerprints = 'icons: 715715b9,maths: 5414f235,scripts: 5220ed99,search: b74b56ab,style: 7179d42c' | split: ',' -%}
+  {%- assign fingerprints = 'icons: 715715b9,maths: 5414f235,scripts: 5220ed99,search: b74b56ab,style: 5addde04' | split: ',' -%}
   {%- assign found = false -%}
 
   {%- if jekyll.environment == 'production' -%}
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
@@ -24,13 +24,18 @@ mark {
     color: inherit;
 }
 
+// screen reader only - totally clipped
 .sr-only {
-    @extend %sr-only;
+    @extend %flow-hidden;
+    height: 1px;
+    clip-path: inset(50%);
 }
 
+// reading mode - comply with Safari extraction logic
 .rm-only {
-    @extend %rm-only;
+    @extend %flow-hidden;
     left: 0.1px;
+    height: 1.1px;
 }
 
 .search-results:empty {
diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
@@ -253,7 +253,7 @@ blockquote {
         padding: 0;
 
         dt {
-            @extend %sr-only;
+            @extend .sr-only;
         }
 
         dd {
diff --git a/_sass/partials/_mixins.scss b/_sass/partials/_mixins.scss
@@ -1,12 +1,6 @@
-// Screen reader only content
-%sr-only {
-    @extend %rm-only;
-    height: 1px;
-    clip-path: inset(50%);
-}
-
-// Reading mode only content
-%rm-only {
+// Content that's visually hidden but should still be part
+// of the flow - used for screen readers / reader mode
+%flow-hidden {
     position: absolute;
     margin: -1px 0 0 -1px;
     padding: 0;
diff --git a/files/2007/08/catenary-wheel.svg b/files/2007/08/catenary-wheel.svg
@@ -1,25 +1,25 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600" height="600" viewBox="0 0 1600 600" version="1.1">
   <style>
     @media (scripting: enabled) { .bg { fill: none !important; } }
-    * {
-      fill: #111;
+    line, path, polygon {
       stroke: #111;
-    }
-    polygon, line, path {
       stroke-width: 3;
     }
     text {
+      fill: #111;
       font-size: 50px;
       font-style: italic;
     }
     path {
       fill: none;
     }
     @media(prefers-color-scheme: dark) {
-      * {
-        fill: #d1d1d1;
+      line, path, polygon {
         stroke: #d1d1d1;
       }
+      text {
+        fill: #d1d1d1;
+      }
     }
   </style>
   <defs>
diff --git a/files/2007/08/catenary.svg b/files/2007/08/catenary.svg
@@ -1,19 +1,23 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="330" height="98" version="1.1">
   <style>
     @media (scripting: enabled) { .bg { fill: none !important; } }
-    * {
-      fill: #111;
+    line, path, polygon {
       stroke: #111;
     }
+    text, polygon {
+      fill: #111;
+    }
     path {
       fill: none;
       stroke-width: 1.5;
     }
     @media(prefers-color-scheme: dark) {
-      * {
-        fill: #d1d1d1;
+      line, path, polygon {
         stroke: #d1d1d1;
       }
+      text, polygon {
+        fill: #d1d1d1;
+      }
     }
   </style>
   <rect class="bg" height="100%" width="100%" style="fill:white" />

Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,18 @@ mark {`
`24`	`24`	`color: inherit;`
`25`	`25`	`}`
`26`	`26`
	`27`	`+// screen reader only - totally clipped`
`27`	`28`	`.sr-only {`
`28`		`- @extend %sr-only;`
	`29`	`+ @extend %flow-hidden;`
	`30`	`+ height: 1px;`
	`31`	`+ clip-path: inset(50%);`
`29`	`32`	`}`
`30`	`33`
	`34`	`+// reading mode - comply with Safari extraction logic`
`31`	`35`	`.rm-only {`
`32`		`- @extend %rm-only;`
	`36`	`+ @extend %flow-hidden;`
`33`	`37`	`left: 0.1px;`
	`38`	`+ height: 1.1px;`
`34`	`39`	`}`
`35`	`40`
`36`	`41`	`.search-results:empty {`
Original file line number	Diff line number	Diff line change
`@@ -253,7 +253,7 @@ blockquote {`
`253`	`253`	`padding: 0;`
`254`	`254`
`255`	`255`	`dt {`
`256`		`- @extend %sr-only;`
	`256`	`+ @extend .sr-only;`
`257`	`257`	`}`
`258`	`258`
`259`	`259`	`dd {`