Wednesday, 9 April 2025
Jen Simmons, writing on the WebKit weblog, “Higher Typography With text-wrap fairly”:
For over 30 years, the online had just one approach for figuring out
the place to wrap textual content.The browser begins with the primary line of textual content, and lays out every
phrase or syllable, one after one other till it runs out of room. As
quickly because it has no more room to suit one other phrase/syllable, it
wraps to the following line (if wrapping is allowed). Then it
begins on the following line, becoming all of the content material it may… then
when it runs out of room, it wraps… and begins engaged on the
subsequent line.It’s all the time fascinated by just one line at a time. It wraps
each time it wants, after it’s match the utmost quantity of content material
on the earlier line. If hyphenation is turned on, it can
hyphenate no matter phrase is final on the road, at no matter level
leaves as a lot of the phrase on the earlier line as attainable.
Nothing else is considered — which is why textual content on
the online has dangerous rag, rivers, quick final traces, and hyphenation
that is senseless.This isn’t required by the truth that textual content is laid out by a
pc. For many years, software program like Adobe InDesign and LaTeX has
evaluated a number of traces of textual content at a time as they resolve the place to
finish one line and start the following. It’s simply that the online didn’t use
a multiline algorithm. Till now.We’re excited to carry this functionality to the online for the primary
time, in Safari Know-how Preview 216.
I’ve turned this on right here at Daring Fireball, at the least as an experiment. (Take a look at me, quick adopter of novel CSS options.) I’ve blended emotions in regards to the outcomes. Listed here are saved PDFs exhibiting the rendering of my “How Many New iPhones Can Match on a Freight Aircraft?” article from earlier right now: first with conventional text-wrap: auto line wrapping, and second with WebKit’s new text-wrap: fairly in STP 216. every paragraph by itself, there’s no query this new format algorithm is, nicely, prettier. The issue I see goes from one paragraph to a different. Inside a paragraph, WebKit’s new fairly wrapping undoubtedly makes traces a extra uniform width. However in some instances it so narrows a whole paragraph that it makes going from one paragraph to the following jarring. Line-to-line the brand new algorithm appears to be like higher, however paragraph-to-paragraph I believe it appears to be like worse.
One particular instance, from my longest current article. First, with the outdated text-wrap: auto:
Right here’s that very same record with the brand new text-wrap: fairly in STP 216:
With the brand new text-wrap: fairly, all the paragraph for the primary record merchandise is noticeably wider than the next ones (and noticeably wider than the one previous the record). To me, there’s a lot disparity between paragraph widths that it’s distracting, although every paragraph, taken by itself, appears to be like higher. However you don’t take paragraphs on their very own when studying.
I think (knowledgeable by toying with Simmons’s enjoyable interactive demo web page utilizing STP 216) that this preliminary WebKit text-wrap: fairly format algorithm works higher with wider column widths than are presently specified on Daring Fireball. When there’s just a little extra width to play with, there appears to be much less back-and-forth change from paragraph to paragraph.
So, for my functions, this is likely to be yet one more enchancment that might want to look forward to the long-promised-but-who-knows-when-it-might-actually-happen-but-I-swear-I-think-about-it-quite-a-bit-and-a-few-years-ago-even-had-something-in-motion-but-then-let-the-project-drop format modernization right here. However, even with a pleasant responsive design, column widths on telephones are inherently slender, so I believe this algorithm should be tweaked to render extra constant paragraph widths in narrow-ish columns.
However I believe it’s an excellent begin, and I couldn’t be happier that the WebKit staff is even tackling the issue in any respect. As Simmons notes, line-wrapping format in net browsers has, till now, been very crude — and the online has been round a very long time.
