Add hanging-punctuation

reset.css

@@ -1,46 +1,59 @@
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
+// Set a baseSize to use in calculating negative indent where hanging-punctuation is not supported
+@supports not (hanging-punctuation: first) {
+  :root {
+    --baseSize: 2rem;
+  }
+}
+
+// Use a more-intuitive box-sizing model.
 *, *::before, *::after {
   box-sizing: border-box;
 }
-/*
-  2. Remove default margin
-*/
+
+// Remove default margin
 * {
   margin: 0;
 }
+
 /*
-  Typographic tweaks!
-  3. Add accessible line-height
-  4. Improve text rendering
+  Typographic tweaks:
+  * Add accessible line-height
+  * Improve text rendering
+  * Apply hanging punctuation with fallback if unsupported
 */
+html {
+  text-indent: calc((var(--baseSize) / 2) * -1); // Negative indent for use where hanging-punctuation is unsupported
+}
+
+@​supports (hanging-punctuation: first) {
+  html {
+    text-indent: 0;
+    hanging-punctuation: first last; // Although "last" isn't handled by an indentation if unsupported, we'll just try our luck here 
+  }
+}
+
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
-/*
-  5. Improve media defaults
-*/
+
+// Improve media defaults
 img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
 }
-/*
-  6. Remove built-in form typography styles
-*/
+
+// Remove built-in form typography styles
 input, button, textarea, select {
   font: inherit;
 }
-/*
-  7. Avoid text overflows
-*/
+
+// Avoid text overflows
 p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
 }
-/*
-  8. Create a root stacking context
-*/
+
+// Create a root stacking context
 #root, #__next {
   isolation: isolate;
 }