Safari's Webkit development team officially explains why you should use 'text-wrap: pretty' to wrap text nicely
Better typography with text-wrap pretty | WebKit
https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
'text-wrap' is a shorthand CSS property that controls how text wraps within an element. Among these, 'text-wrap: pretty' is an algorithm that allows user agents to prioritize good layout over speed, i.e. good typesetting over performance.
The Webkit team said the introduction of 'text-wrap: pretty' in Safari Technology Preview 'brings an unprecedented level of sophistication to typography on the web.'
With digital typography, a computer, not a human, places every word in place. While web designers and developers may create templates to populate with different versions of content, the web doesn't allow for 'hand tweaking' of typography, especially when layouts are fluid and redrawn for screens of different shapes and sizes.
Therefore, it was very difficult to avoid the following four points that are considered to be 'good typography' in traditional typography.
・Short last line
You should avoid leaving just one word at the end of a paragraph, as it looks very strange and can make the spacing between paragraphs look falsely large.
・Bad rag (the right edge of each paragraph is jagged and unnatural)
When setting by hand, typographers shift words to minimize the visual difference between adjacent lines to avoid unnaturally jagged edges at the right edges of each paragraph, which improves the readability of the text and makes the entire block of text look more aesthetically pleasing.
・poor
In languages where hyphenation is possible, hyphenation can help avoid 'bad rags', but hyphenation increases the cognitive load when reading by splitting words and positioning those fragments as far apart as possible in the inline dimension, so it is best to minimize the use of hyphenation and avoid hyphenating two consecutive lines.
・Typographic River
If you know how to look for typographic rivers, you might notice them when the spaces between words randomly line up across lines, creating empty paths throughout a paragraph. Typographic rivers are distracting and should be avoided.
However, the WebKit development team claims that the introduction of 'text-wrap: pretty' makes it possible to bring a new level of sophistication to input on the web.
For over 30 years, the web has had only one method for determining where to wrap text. Browsers start with the first line of text and lay out each word or syllable, one after the other, until there is no space left. At that point, they wrap the text and continue on to the next line. They also wrap text if necessary when the previous line's content reaches its maximum. If hyphenation is enabled, they hyphenate the last word on the line, preserving as many words from the previous line as possible, without considering anything else. This is why text on the web is full of 'bad rags,' 'typographic rivers,' 'short last lines,' and 'poor hyphenation.'
On the web, there is a feature that evaluates the entire text to determine where to wrap text optimally. You can request the browser to do this with 'text-wrap: pretty'. WebKit is not the first browser engine to implement 'text-wrap: pretty', but Safari is the first to use 'text-wrap: pretty' to evaluate and adjust an entire paragraph. Safari is also the first to use 'text-wrap: pretty' to improve 'bad rag'.
In Safari Technology Preview 216, you can prevent 'bad rag', 'short last line', and 'poor hyphenation' by using 'text-wrap: pretty'. Below is a demo page of 'text-wrap: pretty' available in Safari Technology Preview 216, where you can actually turn 'text-wrap: pretty' on and off, and turn hyphenation on and off. In the demo, you can check how the text typography changes in English, Arabic, German, Chinese, and Japanese.
text-wrap: pretty
https://codepen.io/jensimmons/pen/xxvoqNM?editors=1100
Here's the typography with 'text-wrap: pretty' disabled, the default text wrapping algorithm that has been used on the web for a long time: The green line indicates when the longest line breaks.
The text with 'text-wrap: pretty' enabled is shown below. The red line shows the position of the green line when 'text-wrap: pretty' is disabled. When 'text-wrap: pretty' is enabled, line breaks are basically inserted between the pink and green lines, so 'bad rags' are less likely to occur.
The reason why all browsers don't do everything they can to make text look good is because of performance concerns. One thing to know as a developer is that the performance of 'text-wrap' does not depend on the number of elements on the page to which it is applied. Performance concerns with 'text-wrap: pretty' arise as the number of lines the algorithm considers when calculating what to do increases. In WebKit-based browsers and apps, it doesn't affect performance unless the text element is hundreds or thousands of lines long. And such content is uncommon on the web, so the WebKit development team points out that 'if your content is broken up into standard-length paragraphs, there's no need to worry.'
Related Posts:
