From c141ca43af698c5c8c9631102870e7f4c8afb5f3 Mon Sep 17 00:00:00 2001 From: Matthew Holloway Date: Wed, 16 Apr 2025 19:16:07 +1200 Subject: [PATCH 1/5] Fix `text-pretty` description --- src/docs/text-wrap.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/docs/text-wrap.mdx b/src/docs/text-wrap.mdx index 868a3fd8b..bd3fb6954 100644 --- a/src/docs/text-wrap.mdx +++ b/src/docs/text-wrap.mdx @@ -111,7 +111,7 @@ For performance reasons browsers limit text balancing to blocks that are ~6 line ### Pretty text wrapping -Use the `text-pretty` utility to prevent orphans (a single word on its own line) at the end of a text block: +Use the `text-pretty` utility to optimimise for wrapping prettiness rather than browser speed. Behaviour varies by browser but often involves more complicated text wrapping approaches such as preventing orphans (a single word on its own line) at the end of a text block:
@@ -139,6 +139,8 @@ Use the `text-pretty` utility to prevent orphans (a single word on its own line)
+Browsers vary in their interpretation of prettiness but may include advanced typographic concepts such as: reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines. + ### Responsive design From 0483a4fb8bdd5ff25f21e7b5547d1a1944eeca6c Mon Sep 17 00:00:00 2001 From: Matthew Holloway Date: Wed, 16 Apr 2025 19:22:26 +1200 Subject: [PATCH 2/5] Add CSS Text spec credit to `text-pretty` description --- src/docs/text-wrap.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/docs/text-wrap.mdx b/src/docs/text-wrap.mdx index bd3fb6954..fea9ae1fc 100644 --- a/src/docs/text-wrap.mdx +++ b/src/docs/text-wrap.mdx @@ -139,7 +139,9 @@ Use the `text-pretty` utility to optimimise for wrapping prettiness rather than -Browsers vary in their interpretation of prettiness but may include advanced typographic concepts such as: reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines. +Browsers vary in their interpretation of prettiness but may include advanced typographic concepts such as: + +> reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines - [CSS Text Level 4 specification](https://drafts.csswg.org/css-text-4/#text-wrap-style) ### Responsive design From 1b740c6b22d7fb300bf9f8b171211d88fb631d49 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 13 Jun 2025 14:21:18 -0400 Subject: [PATCH 3/5] Tweak wording --- src/docs/text-wrap.mdx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/docs/text-wrap.mdx b/src/docs/text-wrap.mdx index fea9ae1fc..2a7ec51e0 100644 --- a/src/docs/text-wrap.mdx +++ b/src/docs/text-wrap.mdx @@ -111,7 +111,7 @@ For performance reasons browsers limit text balancing to blocks that are ~6 line ### Pretty text wrapping -Use the `text-pretty` utility to optimimise for wrapping prettiness rather than browser speed. Behaviour varies by browser but often involves more complicated text wrapping approaches such as preventing orphans (a single word on its own line) at the end of a text block: +Use the `text-pretty` utility to prefer better text wrapping and layout at the expense of speed. Behavior varies across browsers but often involves approaches like preventing orphans (a single word on its own line) at the end of a text block:
@@ -139,9 +139,13 @@ Use the `text-pretty` utility to optimimise for wrapping prettiness rather than
-Browsers vary in their interpretation of prettiness but may include advanced typographic concepts such as: +Browsers vary in their interpretation of prettiness and may choose improvements like: -> reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines - [CSS Text Level 4 specification](https://drafts.csswg.org/css-text-4/#text-wrap-style) +- Reducing the variation in length between lines +- Avoiding typographic rivers +- Avoiding hyphenation on too many consecutive lines +- Prioritizing different classes of soft wrap opportunities +- [and more…](https://drafts.csswg.org/css-text-4/#text-wrap-style) ### Responsive design From 6237139e3d7c06acef62ee3f6b2f3884481c1964 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 13 Jun 2025 14:22:41 -0400 Subject: [PATCH 4/5] Jump to `pretty` definition directly in spec link --- src/docs/text-wrap.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/text-wrap.mdx b/src/docs/text-wrap.mdx index 2a7ec51e0..c4a8a43d7 100644 --- a/src/docs/text-wrap.mdx +++ b/src/docs/text-wrap.mdx @@ -145,7 +145,7 @@ Browsers vary in their interpretation of prettiness and may choose improvements - Avoiding typographic rivers - Avoiding hyphenation on too many consecutive lines - Prioritizing different classes of soft wrap opportunities -- [and more…](https://drafts.csswg.org/css-text-4/#text-wrap-style) +- [and more…](https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-pretty) ### Responsive design From 46f1b6f3ba40015ce8cd92ca72346f90fb05dfa1 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 13 Jun 2025 15:12:03 -0400 Subject: [PATCH 5/5] Tweak wording --- src/docs/text-wrap.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/text-wrap.mdx b/src/docs/text-wrap.mdx index c4a8a43d7..3b4e2072a 100644 --- a/src/docs/text-wrap.mdx +++ b/src/docs/text-wrap.mdx @@ -139,7 +139,7 @@ Use the `text-pretty` utility to prefer better text wrapping and layout at the e -Browsers vary in their interpretation of prettiness and may choose improvements like: +In addition to the above browsers may choose improvements like: - Reducing the variation in length between lines - Avoiding typographic rivers