diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index c11a754..bcc3ef5 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -794,6 +794,20 @@ Users employing machine translation will not benefit from your soft hyphens, so Where long inline "" elements can trigger horizontal scrolling, consider a scrollable "
" element instead. Making a single element horizontally scrollable is far better than making the entire page scrollable in two dimensions.
 
+### Keeping text together
+
+Soft hyphens are great for splitting up text, but some text should stay together. The phrase "10 cm", for instance, would flow poorly if "10" and "cm" appeared on separate lines. Splitting text becomes especially painful on narrow viewports. A non-breaking space keeps the surrounding text from being re-flowed. Use the " " HTML entity:
+
+```
+10 cm
+```
+
+Practical Typography⁸ describes where to use the non-breaking space in more detail:
+
+=> https://practicaltypography.com/nonbreaking-spaces.html nonbreaking spaces, Butterick's Practical Typography
+
+One exception to Practical Typography's rules: don't use a non-breaking space if it would trigger two-dimensional scrolling on a narrow viewport. Between broken text and two-dimensional scrolling, broken text is the lesser evil. I personally set a cutoff at 2.5 cm (1 inch) at 125% zoom.
+
 ### Pictures of text
 
 You should only use pictures of text when the visual presentation of the text is part of the information you're trying to convey. Always be sure to test how such an image looks on a narrow screen.
diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md
index 8405365..a2e7e94 100644
--- a/content/posts/website-best-practices.md
+++ b/content/posts/website-best-practices.md
@@ -827,6 +827,14 @@ Users employing machine translation will not benefit from your soft hyphens, so
 
 Where long inline `` elements can trigger horizontal scrolling, consider a scrollable `
` element instead. Making a single element horizontally scrollable is far better than making the entire page scrollable in two dimensions.
 
+### Keeping text together
+
+Soft hyphens are great for splitting up text, but some text should stay together. The phrase "10 cm", for instance, would flow poorly if "10" and "cm" appeared on separate lines. Splitting text becomes especially painful on narrow viewports. A non-breaking space keeps the surrounding text from being re-flowed. Use the ` ` HTML entity instead of a space: `10 cm`.
+
+Practical Typography[^9] describes [where to use the non-breaking space](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) in more detail
+
+One exception to Practical Typography's rules: don't use a non-breaking space if it would trigger two-dimensional scrolling on a narrow viewport. Between broken text and two-dimensional scrolling, broken text is the lesser evil. I personally set a cutoff at 2.5 cm (1 inch) at 125% zoom.
+
 ### Pictures of text
 
 You should only use pictures of text when the visual presentation of the text is part of the information you're trying to convey. Always be sure to test how such an image looks on a narrow screen.