7 ms·

Justifying Text-Wrap: Pretty

108 points by surprisetalk 9mo ago

albert_e 8mo ago
Are hypens no longer acceptable? There is no mention of it in the post. If words (in any language) can be arbitrarily long and columns can be arbitrarily narrow, we will need to solve for this anyway. Even without those extremes, I feel that there will always be place for the good old hypen when displaying or printing text for the main purpose of readability. No need to max out on perfect "look" in every application of text. In fact in many places one might even find columns with jagged right edges more readable -- letting you visually distinguish each line from the one above/below it easily by length alone -- and may even lend a certain aesthetic character that is the opposite of mechanical / boring / machine produced / sterile. Of course not negating the need for a well implemented method without bugs to justify text correctly when the use case demands it.
- ameliaquining 8mo ago
  Auto-hyphenation is part of what text-wrap: pretty does.
  - notpushkin 8mo ago
    No, it’s not. You can turn it on or off independently.
- levocardia 8mo ago
  Butterick says you should never, ever justify text without hyphenation https://practicaltypography.com/justified-text.html https://practicaltypography.com/justified-text.html
  - albert_e 8mo ago
    Thanks for that link! There is a bit more ... justification (pun intended) on that page for this recommendation to turn-on hypenation; and also some valuable advice on choosing spacing between words over spacing between letters.
  - doesnt_know 8mo ago
    What is an example of a "high-end page-layout program" referenced in that document? I mean, of course I assume they exist for professional type setting, book publishing and such, but I have never seen or heard of the actual software.
    - syradar 8mo ago
      We used Adobe InDesign at my last work, which I believe is an industry standard. Affinity Layout if you don’t want to sell your kidney to Adobe. Scribus is an open source project but I’m not sure how the quality is in that.
      - gdwatson 8mo ago
        > Scribus is an open source project but I’m not sure how the quality is in that. I am not a typographer, and I’ve never used it in a professional capacity, but v1.6 (early 2024) improved Scribus a lot. I’ve used it and liked it for some personal projects for years, but the improved typography in 1.6 is big.
    - lwhsiao 8mo ago
      LaTeX or Typst are also good examples.
    - omnimus 8mo ago
      There is only Adobe InDesign. Even though you can make high quality layouts in other programs (Affinity, Scribus) once you get to actually printing in pro printer the whole pipeline is InDesign. It's Adobes secret money printer, software that many don't realize it rivals Photoshop in usage.
      - lfauve 8mo ago
        No, the pro pipeline is PDF. You might argue that, if you are risk averse, you only trust Adobe’s tools to produce optimal PDF. This is of course Adobe’s moat. But Scribus’ export to pdf is excellent, in a pro setting
- onion2k 8mo ago
  Are hypens no longer acceptable? Hyphenation will probably lead to people thinking the content is generated by AI, which would be a significant downside for most websites. Users want to believe the site creator put effort in (regardless of whether they did or even if it's appropriate to have done.)
  - pleurotus 8mo ago
    They're not referring to the m-dash that LLMs are known for, but hyphenation in the middle of a word to split the word over two lines. The article shows it in the example screenshots, but does not explicitly mention it or how it interacts with the different options discussed
    - ffsm8 8mo ago
      TFA also isn't talking about code comments, but considering the comment chain I'd like to point out that the only times I've seen hyphenated words there is when I'm pretty sure they were LLM generated... So... Unless the position for the hyphenation changes depending on the resolution (or page layout like with latex), I'd personally still guess an LLM was involved, honestly.
- tosti 8mo ago
  The problem is knowing when to do it. The lang attribute and Content-Language header may not always be reliable. Authors mostly aren't using the WBR element.
- bjourne 8mo ago
  Hyphenization is language and content-dependent. You need different rules for English and French text, for example. Moreover, it doesn't fit the "short paragraph style" most non-academic text is written in these days.
notpushkin 8mo ago
I’m looking at the comparison [0] and the `pretty` example is hyphenated, while greedy is not. Not sure it’s fair to compare them like that, considering we’ve had `hyphens: auto` for a while now. Edit: it’s actually vice versa! Which I should have known because the very next paragraph says: > But the “smart” algorithm decides to add an entire line to it, which requires inflating all the white space proportionally. Which is exactly how the example on the right looks. [0]: https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html#:~:text=Here%E2%80%99s%20the%20same%20justified%20paragraph%20with%20and%20without%20text%2Dwrap%3A%20pretty%3A https://matklad.github.io/2026/02/14/justifying-text-wrap-pr...
- crazygringo 8mo ago
  That jumped out at me too... I'm not sure if they have different hyphenation properties set though, or if the greedy justified version just doesn't wind up hyphenating anywhere in this particular case? Unfortunately there's no live HTML demo to inspect, just the images.
  - notpushkin 8mo ago
    Just found this demo in the Safari blog post: https://cdpn.io/pen/debug/xxvoqNM https://cdpn.io/pen/debug/xxvoqNM
    - crazygringo 8mo ago
      Fascinating, thank you! Playing around with it, seems that Safari simply stops hyphenating entirely when when text-wrap is pretty, regardless of whether it's justified or not. (If you smoothly resize the browser width, it makes it pretty easy to tell if hyphens ever come up.) Which means the image on the left seems like it might be the wrong image? And now I wonder if text-wrap: pretty is supposed to avoid hyphenation? Are hyphens not pretty? Or is it just a partial implementation by Apple, that they haven't gotten around to supporting hyphenation for it yet?
      - notpushkin 8mo ago
eviks 8mo ago
> We are getting closer and closer to the cutting-edge XV-century technology. Beautiful paragraphs! While the broader point is fine, the example to me is just bad to me: very narrow column with a lot of hyphens and identical width/no variety making it harder to anchor your eye (though colored letters are awesome and play this role) Ok, bad rag is bad, but the ancient text goes overboard in the other direction. This looks close to the form-over-function vibe.
- notpushkin 8mo ago
  Justified text is really not good, yeah. `text-wrap: pretty` works fine with left-aligned text though!
- tolerance 8mo ago
  I’m not trying to pull your card, but can you read the language that the example is written in?
  - spudlyo 8mo ago
    Nonne tu linguam Latinam legere potes? > Incipit epistola sancti iheronimi ad paulinum presbiterum de omnibus divine historie libris capitulum primum. I'm not entirely up on all the abbreviations and and shorthand used in medieval manuscripts, but the macron over the final ū in 'capitulū' indicates the vowel being nasalized, which often happens before the final 'm' consonant which in this case is suspended. The 'pmū' is similar, but also I think a contraction or abbreviation for primum. With all these tricks available to the scribes it's no wonder they can make the right edge look nice.
    - tolerance 8mo ago
      > Nonne tu linguam Latinam legere potes? Veni venti Gucci! I guess it’s safe to say that you can read Latin? What I’m trying to figure out is whether the typography in the Gutenberg Bible was exceptional for its time. So I guess the fairer question may be whether Germans would’ve found Latin difficult to read in blackletter/Gothic type, which apparently descends from Roman cursive anyhow. I asked my initial question (whether the grandparent commenter understood the language) because I wanted to figure out whether criticizing the typography as “form-over-function” made sense.
nayroclade 8mo ago
> Inexplicably, until 2025, browsers stuck with the naive greedy algorithm, subjecting generations of web users to ugly typography. > WebKit devs, you are awesome for shipping this feature ahead of everyone else... Um, no? Chrome shipped this feature in 2023: https://developer.chrome.com/blog/css-text-wrap-pretty https://developer.chrome.com/blog/css-text-wrap-pretty Safari isn't early shipping this, they're late. Though not as late as Firefox, admittedly.
- notpushkin 8mo ago
  Hmm, I’m looking at the demo in Chrome and don’t see any difference when I turn on `pretty`: https://cdpn.io/pen/debug/xxvoqNM https://cdpn.io/pen/debug/xxvoqNM In Safari, it’s a very different look.
  - crazygringo 8mo ago
    Yeah, very weird. Caniuse claims it's supported in Chrome: https://caniuse.com/mdn-css_properties_text-wrap_pretty https://caniuse.com/mdn-css_properties_text-wrap_pretty But you're right, it very clearly isn't working. Is it a regression? Did it break and nobody noticed?
    - notpushkin 8mo ago
      I think the answer is in the post: > Although Safari is the first browser to ship a non-joke implementation of text-wrap (Emphasis mine.) Chrome is using a different algorithm for this, which probably fixes some typographic problems, but defaults to greed most of the time.
      - crazygringo 8mo ago
        Interesting. As far as I can tell, Chrome isn't doing anything different. I can't find any window width where the checkbox makes any difference. Edit: finally found it, see cousin comment.
    - no_news_is 8mo ago
sbinnee 8mo ago
It reminds me of one of my favorite programs, par[1]. [1]: http://www.nicemice.net/par/ http://www.nicemice.net/par/
iguessthislldo 8mo ago
The Webkit blog post talks about this, didn't know it had a name: https://en.wikipedia.org/wiki/River_(typography) https://en.wikipedia.org/wiki/River_(typography)
_nivlac_ 8mo ago
The example for "avoid short last lines" has a short last line - if that was intentional, a great touch by the writer!
- iamtedd 8mo ago
  That depends on the width of your browser. On my mobile, nearly every paragraph had one word or part of a word as the last line.
weinzierl 8mo ago
The irony is that we've spent decades and quite some resources to perfect fixed text layout in general and text justification in particular (the immaculate rectangle with homogenous gray values, hanging punctuation, all that jazz) only to find: 1. Fixed layout isn't gonna cut it 2. Justification isn't that important anyways To anyone who came of age on the internet in the last three decades justified text just looks strange. I say that coming from the typography nerd camp. No matter if we like it or not, in the end flush left and flush right has lost and it will not come back regardless what browsers implement.
bambax 8mo ago
Prettyness is important, but legibility is more important. I don't know why we're still obsessed with right justification? In 1450 it made a lot of sense to try to squeeze the most text on a page, but today it isn't? Justify is not only useless but it's also responsible for creating all those white spaces of various length, which are annoying enough by themselves, but which can also create "rivers" which become an incredible distraction. The first thing I do with a new ebook is to modify it in Calibre so that it's left-align instead of justify. Maybe "pretty" is a solution, but non-justify is simpler, and readily available.

108 points by surprisetalk 9mo ago

Are hypens no longer acceptable? There is no mention of it in the post. If words (in any language) can be arbitrarily long and columns can be arbitrarily narrow, we will need to solve for this anyway. Even without those extremes, I feel that there will always be place for the good old hypen when displaying or printing text for the main purpose of readability. No need to max out on perfect "look" in every application of text. In fact in many places one might even find columns with jagged right edges more readable -- letting you visually distinguish each line from the one above/below it easily by length alone -- and may even lend a certain aesthetic character that is the opposite of mechanical / boring / machine produced / sterile. Of course not negating the need for a well implemented method without bugs to justify text correctly when the use case demands it.

ameliaquining 8mo ago
Auto-hyphenation is part of what text-wrap: pretty does.
- notpushkin 8mo ago
  No, it’s not. You can turn it on or off independently.
levocardia 8mo ago
Butterick says you should never, ever justify text without hyphenation https://practicaltypography.com/justified-text.html https://practicaltypography.com/justified-text.html
- albert_e 8mo ago
  Thanks for that link! There is a bit more ... justification (pun intended) on that page for this recommendation to turn-on hypenation; and also some valuable advice on choosing spacing between words over spacing between letters.
- doesnt_know 8mo ago
  What is an example of a "high-end page-layout program" referenced in that document? I mean, of course I assume they exist for professional type setting, book publishing and such, but I have never seen or heard of the actual software.
  - syradar 8mo ago
    We used Adobe InDesign at my last work, which I believe is an industry standard. Affinity Layout if you don’t want to sell your kidney to Adobe. Scribus is an open source project but I’m not sure how the quality is in that.
    - gdwatson 8mo ago
      > Scribus is an open source project but I’m not sure how the quality is in that. I am not a typographer, and I’ve never used it in a professional capacity, but v1.6 (early 2024) improved Scribus a lot. I’ve used it and liked it for some personal projects for years, but the improved typography in 1.6 is big.
  - lwhsiao 8mo ago
    LaTeX or Typst are also good examples.
  - omnimus 8mo ago
    There is only Adobe InDesign. Even though you can make high quality layouts in other programs (Affinity, Scribus) once you get to actually printing in pro printer the whole pipeline is InDesign. It's Adobes secret money printer, software that many don't realize it rivals Photoshop in usage.
    - lfauve 8mo ago
      No, the pro pipeline is PDF. You might argue that, if you are risk averse, you only trust Adobe’s tools to produce optimal PDF. This is of course Adobe’s moat. But Scribus’ export to pdf is excellent, in a pro setting
onion2k 8mo ago
Are hypens no longer acceptable? Hyphenation will probably lead to people thinking the content is generated by AI, which would be a significant downside for most websites. Users want to believe the site creator put effort in (regardless of whether they did or even if it's appropriate to have done.)
- pleurotus 8mo ago
  They're not referring to the m-dash that LLMs are known for, but hyphenation in the middle of a word to split the word over two lines. The article shows it in the example screenshots, but does not explicitly mention it or how it interacts with the different options discussed
  - ffsm8 8mo ago
    TFA also isn't talking about code comments, but considering the comment chain I'd like to point out that the only times I've seen hyphenated words there is when I'm pretty sure they were LLM generated... So... Unless the position for the hyphenation changes depending on the resolution (or page layout like with latex), I'd personally still guess an LLM was involved, honestly.
tosti 8mo ago
The problem is knowing when to do it. The lang attribute and Content-Language header may not always be reliable. Authors mostly aren't using the WBR element.
bjourne 8mo ago
Hyphenization is language and content-dependent. You need different rules for English and French text, for example. Moreover, it doesn't fit the "short paragraph style" most non-academic text is written in these days.

notpushkin 8mo ago

I’m looking at the comparison [0] and the `pretty` example is hyphenated, while greedy is not. Not sure it’s fair to compare them like that, considering we’ve had `hyphens: auto` for a while now. Edit: it’s actually vice versa! Which I should have known because the very next paragraph says: > But the “smart” algorithm decides to add an entire line to it, which requires inflating all the white space proportionally. Which is exactly how the example on the right looks. [0]: https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html#:~:text=Here%E2%80%99s%20the%20same%20justified%20paragraph%20with%20and%20without%20text%2Dwrap%3A%20pretty%3A https://matklad.github.io/2026/02/14/justifying-text-wrap-pr...

crazygringo 8mo ago
That jumped out at me too... I'm not sure if they have different hyphenation properties set though, or if the greedy justified version just doesn't wind up hyphenating anywhere in this particular case? Unfortunately there's no live HTML demo to inspect, just the images.
- notpushkin 8mo ago
  Just found this demo in the Safari blog post: https://cdpn.io/pen/debug/xxvoqNM https://cdpn.io/pen/debug/xxvoqNM
  - crazygringo 8mo ago
    Fascinating, thank you! Playing around with it, seems that Safari simply stops hyphenating entirely when when text-wrap is pretty, regardless of whether it's justified or not. (If you smoothly resize the browser width, it makes it pretty easy to tell if hyphens ever come up.) Which means the image on the left seems like it might be the wrong image? And now I wonder if text-wrap: pretty is supposed to avoid hyphenation? Are hyphens not pretty? Or is it just a partial implementation by Apple, that they haven't gotten around to supporting hyphenation for it yet?
    - notpushkin 8mo ago

eviks 8mo ago

> We are getting closer and closer to the cutting-edge XV-century technology. Beautiful paragraphs! While the broader point is fine, the example to me is just bad to me: very narrow column with a lot of hyphens and identical width/no variety making it harder to anchor your eye (though colored letters are awesome and play this role) Ok, bad rag is bad, but the ancient text goes overboard in the other direction. This looks close to the form-over-function vibe.

notpushkin 8mo ago
Justified text is really not good, yeah. `text-wrap: pretty` works fine with left-aligned text though!
tolerance 8mo ago
I’m not trying to pull your card, but can you read the language that the example is written in?
- spudlyo 8mo ago
  Nonne tu linguam Latinam legere potes? > Incipit epistola sancti iheronimi ad paulinum presbiterum de omnibus divine historie libris capitulum primum. I'm not entirely up on all the abbreviations and and shorthand used in medieval manuscripts, but the macron over the final ū in 'capitulū' indicates the vowel being nasalized, which often happens before the final 'm' consonant which in this case is suspended. The 'pmū' is similar, but also I think a contraction or abbreviation for primum. With all these tricks available to the scribes it's no wonder they can make the right edge look nice.
  - tolerance 8mo ago
    > Nonne tu linguam Latinam legere potes? Veni venti Gucci! I guess it’s safe to say that you can read Latin? What I’m trying to figure out is whether the typography in the Gutenberg Bible was exceptional for its time. So I guess the fairer question may be whether Germans would’ve found Latin difficult to read in blackletter/Gothic type, which apparently descends from Roman cursive anyhow. I asked my initial question (whether the grandparent commenter understood the language) because I wanted to figure out whether criticizing the typography as “form-over-function” made sense.

nayroclade 8mo ago

> Inexplicably, until 2025, browsers stuck with the naive greedy algorithm, subjecting generations of web users to ugly typography. > WebKit devs, you are awesome for shipping this feature ahead of everyone else... Um, no? Chrome shipped this feature in 2023: https://developer.chrome.com/blog/css-text-wrap-pretty https://developer.chrome.com/blog/css-text-wrap-pretty Safari isn't early shipping this, they're late. Though not as late as Firefox, admittedly.

notpushkin 8mo ago
Hmm, I’m looking at the demo in Chrome and don’t see any difference when I turn on `pretty`: https://cdpn.io/pen/debug/xxvoqNM https://cdpn.io/pen/debug/xxvoqNM In Safari, it’s a very different look.
- crazygringo 8mo ago
  Yeah, very weird. Caniuse claims it's supported in Chrome: https://caniuse.com/mdn-css_properties_text-wrap_pretty https://caniuse.com/mdn-css_properties_text-wrap_pretty But you're right, it very clearly isn't working. Is it a regression? Did it break and nobody noticed?
  - notpushkin 8mo ago
    I think the answer is in the post: > Although Safari is the first browser to ship a non-joke implementation of text-wrap (Emphasis mine.) Chrome is using a different algorithm for this, which probably fixes some typographic problems, but defaults to greed most of the time.
    - crazygringo 8mo ago
      Interesting. As far as I can tell, Chrome isn't doing anything different. I can't find any window width where the checkbox makes any difference. Edit: finally found it, see cousin comment.
  - no_news_is 8mo ago

sbinnee 8mo ago

It reminds me of one of my favorite programs, par[1]. [1]: http://www.nicemice.net/par/ http://www.nicemice.net/par/

iguessthislldo 8mo ago

The Webkit blog post talks about this, didn't know it had a name: https://en.wikipedia.org/wiki/River_(typography) https://en.wikipedia.org/wiki/River_(typography)

_nivlac_ 8mo ago

The example for "avoid short last lines" has a short last line - if that was intentional, a great touch by the writer!

iamtedd 8mo ago
That depends on the width of your browser. On my mobile, nearly every paragraph had one word or part of a word as the last line.

weinzierl 8mo ago

The irony is that we've spent decades and quite some resources to perfect fixed text layout in general and text justification in particular (the immaculate rectangle with homogenous gray values, hanging punctuation, all that jazz) only to find: 1. Fixed layout isn't gonna cut it 2. Justification isn't that important anyways To anyone who came of age on the internet in the last three decades justified text just looks strange. I say that coming from the typography nerd camp. No matter if we like it or not, in the end flush left and flush right has lost and it will not come back regardless what browsers implement.

bambax 8mo ago

Prettyness is important, but legibility is more important. I don't know why we're still obsessed with right justification? In 1450 it made a lot of sense to try to squeeze the most text on a page, but today it isn't? Justify is not only useless but it's also responsible for creating all those white spaces of various length, which are annoying enough by themselves, but which can also create "rivers" which become an incredible distraction. The first thing I do with a new ebook is to modify it in Calibre so that it's left-align instead of justify. Maybe "pretty" is a solution, but non-justify is simpler, and readily available.