Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add text-wrap: balance to headings #910

Open
alexgibson opened this issue Dec 19, 2023 · 2 comments · May be fixed by #949
Open

Add text-wrap: balance to headings #910

alexgibson opened this issue Dec 19, 2023 · 2 comments · May be fixed by #949

Comments

@alexgibson
Copy link
Member

The CSS property text-wrap: balance; is now supported in Firefox 121, and has pretty good support across browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

I propose we should add this to all heading elements in Protocol's base styles as a general typographical improvement.
@reemhamz
Copy link
Contributor

reemhamz commented Dec 19, 2023 •
edited
Loading

I'm so excited this is finally out 🎉
However, since it's still experimental on newer browser versions, we should probably wrap it (pun intended) in the CSS @supports rule to be on the safer side if we're looking to implement it?

See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

@alexgibson
Copy link
Member Author

Hmm, good suggestion @reemhamz, but I’m not 100% sure we’d need that in this case. @supports is useful for when we want to fallback to a different rule in older browsers, but I’m not sure if there’s an existing text-wrap value we’d need to fall back to here? If an older browser encounters a CSS rule it does not yet understand, it should just safely ignore it.

We could do a test first to be sure 👍

@janbrasna janbrasna linked a pull request Jul 3, 2024 that will close this issue
Draft
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add text-wrap: balance to all headings janbrasna/protocol
2 participants
@alexgibson @reemhamz