Is text-wrap: pretty buggy and Baseline newly available?
I was trying out text-wrap: pretty recently to decide if I should use it throughout my website. This is a newish value for text-wrap that is used to improve the visual harmony of body copy. When I reviewed some pages of my website with the property applied, it didn’t seem to do anything! Is it a bug in Firefox? Or something else?
Looking in VS Code, it doesn’t show an error. Hovering over the CSS declaration, the hovercard is a good starting point for getting more information. It gives a description and shows the Baseline status – it says that it is “newly available across major browsers (Baseline since 2024)”.
Clicking on the MDN Reference link in the hovercard took me to the MDN page for the text-wrap property. The first thing on the page is a blue callout section outlining the baseline status. It concurs and says its Baseline status is “newly available”. Further in the article, it states that the value pretty is valid.
Looking in Firefox’s devtools, the CSS declaration has a strikethrough and it says that it is an invalid property value! That’s peciular.
I decided to check the browser support for text-wrap: pretty on caniuse.com to see what it says. In the table, it shows that Firefox does not support text-wrap: pretty, and that it has just come to Safari!
To test out the feature, I can switch to Chrome. I can treat usage of text-wrap: pretty as a progressive enhancement since Firefox ignores it.
Why does Baseline say that text-wrap: pretty is “newly available” when it is not?
The presentation of Baseline data gives a generalised summary of a property. It is not specific to property values. This means it can be inaccurate.
Returning to the MDN page, I wanted to inspect the callout futher to see it gives some indication of the pretty value actually not being “newly available”. I expanded it to show the hidden section. The second parapgraph states “some parts of this feature may have varying levels of support”. See highlighted sentence in the screenshot below:
Oh! The title contains an asterisk! The “varying levels of support” bit is meant to be a footnote.
Clicking on the See full compatibility link on the expanded callout takes you to a browser compatiblity table at the bottom of the page. If you cast your eyes down to row 5, it shows support for the pretty value. It correctly states that it is not supported in Firefox. 🫠
Baseline is a leaky abstraction really.
Should I use text-wrap: pretty?
The difference is hard to spot. It prevents orphans, the scenario where there is a single word on the last line of paragraphs. Only some paragraphs are affected.
Below is an instance of how a “pretty” paragraph looks like in Chrome (first paragraph on the right side). You can compare it to the default state in Firefox (left).
I actually prefer the default state in this case!
It probably does improve the feel of the text formatting more often than not. I don’t have a strong opinion about it either way.
Final thoughts
It turns out that text-wrap: pretty is not supported by Firefox. It is false reporting by Baseline that muddies the waters. I think that I will stick to https://caniuse.com to clear up this type of compatability query in future!
In this case, usage of text-wrap: pretty can be treated as a progressive enhancement, so browser compat is not a blocker for adoption. It is more a question of whether you like the look of “pretty” paragraphs, or not.