[Feature Request] Add text-wrap balance prop to Heading

[stefankp]

We tend to balance the text in our headings, mostly when used in Hero, SectionIntro or Bento. Since text-wrap: balance is now supported in all major browsers https://caniuse.com/css-text-wrap-balance, perhaps we could add a textWrap prop to Heading, to easily achieve balanced headings across our components.

Values for textWrap could be:

• normal (default)
• balance

[danielguillan]

I would love to see text-wrap: balance added to headings in Primer Brand. We previously implemented it in a PR for Hero, but we ended up removing it because it is not supported in Safari 16, which we still need to support. Adding it as a progressive enhancement could potentially raise concerns in accessibility audits where different browsers could render the text content differently.

That said, I'd like to double-check with @rezrah and @joshfarrant to confirm whether our stance on this remains the same.

[joshfarrant]

Adding it as a progressive enhancement could potentially raise concerns in accessibility audits where different browsers could render the text content differently.

Just double-checked this (Slack link) and it should be fine from an a11y perspective.

[rezrah]

...perhaps we could add a textWrap prop to Heading

We previously implemented it in a PR for Hero, but we ended up removing it because it is not supported in Safari 16

We need to go back 3 safari versions in Primer, and as far as I can see we aren't there quite yet. For that reason, I'd suggest we don't add this as a first class prop to the component, because it won't apply for all users.

Argument could be made to add this as a progressive enhancement, and default to balance if that is the preferred option. It does feel a little opinionated though, and I recall we tried pretty last time round so is this something that can be applied as a custom style until Safari 19 is out? 🤔

[rezrah]

Closing for now. The preference is to use a custom CSS overrides for. We'll revisit this once next major version of Safari is released.