Skip to content

Conversation

@janbrasna
Copy link
Contributor

@janbrasna janbrasna commented Jul 3, 2024

Description

css-ui_css-text-wrap-balance

https://caniuse.com/css-text-wrap-balance is pretty well supported now with no real downside, known bugs or performance issues documented.

  • I have documented this change in the design system.
  • I have recorded this change in CHANGELOG.md.

Issue

Resolves #910

Testing

Safari 16 vs. 17.5+
Firefox 115 (ESR) vs. 122+

PR: https://preview--mzp-dev.netlify.app/components/detail/headings

(before:)
Screenshot 2025-03-28 at 2 32 45 Large

(after:)
Screenshot 2025-03-28 at 2 32 59 Large

@stephaniehobson
Copy link
Contributor

@janbrasna Do you remember what the problem is with white-space?

@janbrasna
Copy link
Contributor Author

@stephaniehobson So the issue is what risk this might pose for downstream consumers, where balancing text IIUC actually competes with white-space property per se (as one is asking for no wrapping and the other is asking for balanced wrapping) — guess I wanted to check a few layouts over at kitsune, fxa, relay et al. how such a change wholesale could interfere with what they have added to the cascade in addition to protocol styling.

(For just bedrock this should be a non-issue, as balancing headings has been around for some time now.)

@stephaniehobson
Copy link
Contributor

Seems like it follows the cascade in Firefox and Chrome so any custom styles they have applied should take president if they're importing their styles after the Protocol one.

I think we're safe to go ahead but I'd add something to the CHANGELOG's migration notes to search for any place where white-space: nowrap is defined and make sure it has a higher specificity.

@stephaniehobson
Copy link
Contributor

It might be a nice change to include with V20 which will have other font updates.

@stephaniehobson
Copy link
Contributor

@janbrasna Do you want to add some CHANGELOG notes to this PR so I can merge it? I'm thinking V20 will go sometime next week and I'd like to have this in it.

@janbrasna
Copy link
Contributor Author

@stephaniehobson Yup, on it. I'll try to add some reasonable heads up to the migration notes too.

(I haven't checked this is not also included in the wholesale font update in the other PR, porting other related values battle tested in bedrock, but will do so! — I actually found this to be a solution to an "unrelated" whitespace / hyphens / wordwrapping issue where having balanced headings helps avoiding a regression when allowing implicit hyphens, so can't wait to have this in and start removing weird forced word wrapping.)

Landing this in a major / breaking release makes the most sense; I was mainly cautious about slipping this in a minor update regarding any impact to consumers, but v20 is great to have this included in, being full of similar changes. 🚀

@janbrasna janbrasna force-pushed the add/text-wrap-balance branch from 4f3aa31 to f724684 Compare March 28, 2025 01:26
@janbrasna janbrasna marked this pull request as ready for review March 28, 2025 01:27
Copy link
Contributor

@stephaniehobson stephaniehobson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

R+ ⚖️

@stephaniehobson stephaniehobson merged commit 2da9964 into mozilla:main Mar 28, 2025
1 check passed
@janbrasna janbrasna deleted the add/text-wrap-balance branch March 29, 2025 12:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add text-wrap: balance to headings

2 participants