Email or username:

Password:

Forgot your password?
Una Kravets

Exploring text-wrap balancing in Chrome Canary!

Just landed yesterday, it's very cool to see this one-line progressive enhancement live.

Currently limited to 4 lines of text for rendering performance purposes.

youtu.be/L9ihWHngk9E

9 comments
Andy Bell

@Una holy moly, it’s the end of orphans and widows on the web 😍

Una Kravets

@andy *in headings and text under 4 lines long :P

Roma Komarov

@Una Nice! Quick testing of `text-wrap: balance` in Chrome Canary:

✅ Supports hyphenation
✅ Supports non-breakable spaces
✅ Supports inline/inline-block elements inside
❌ Does not support `text-align` (buggy) :(

codepen.io/kizu/pen/ZEMeyrz

Scott Kellum :typetura:

@Una Are you planning on doing perf tweaks to get up to the 10 lines of text noted in the spec? Maybe the spec threshold needs to be lowered if it’s too expensive.

> UAs may treat this value as wrap if there are more than ten lines to balance.

Una Kravets

@scott Yeah, it's possible the spec is wishful thinking with the 10 lines and should maybe be revised for implementation consistency. I know our eng team tried to make it happen but it got really slow after 4

Scott Kellum :typetura:

@Una Makes sense! As much as I love the idea of balancing a big paragraph I’m sure it’s super expensive.

Side note: It’s really just the last few lines that need to be balanced to avoid the widow. Curious how it would look if you only ever balanced the last 4 lines.

Una Kravets

@scott that's something we were just discussing with @tabatkins -- this might be a different property altogether

Go Up