'Pretty' is in the eye of the beholder

text-wrap: pretty attribute introduced by Safari Technology Preview takes web page layout to the next level! Jen Simmons’ article details this new feature, which significantly improves paragraph layout, reduces snippets, avoids the last line of orphan characters, and effectively reduces large areas of text rivers. The first image of the article clearly shows these improvements.

It is worth noting that Safari's text-wrap: pretty implementation is completely different from the version of Chromium. Chromium only adjusts the last four lines of the paragraph, focusing on avoiding the last line that is too short, and adjusts the lines that are consecutively broken.

Jen Simmons speculates that performance differences are the cause of this difference. text-wrap: pretty 's algorithm does handle a lot of work, especially in long-form content, where performance impacts accumulate when processing thousands of lines of text. But Safari implementation can effectively deal with this load.

The WebKit team said that the performance of text-wrap: pretty is not affected by the number of applied elements, and performance bottlenecks will occur only when the number of text lines processed reaches hundreds or thousands of lines, which is not common in web pages. Therefore, for general-length paragraphs, developers do not need to worry about performance issues, and can use text-wrap: pretty with confidence.

However, it should be noted that the two major mainstream browsers currently implement the same feature differently. The definition of "pretty" varies from browser to browser, and the specifications deliberately do not specify this, only pointing out that the browser can try to avoid the last line that is too short and improve the layout through other methods. The specific improvement method depends on the browser itself.

In short, text-wrap: pretty brings powerful typesetting capabilities to developers, but pay attention to the differences in implementations of different browsers.

The above is the detailed content of 'Pretty' is in the eye of the beholder. For more information, please follow other related articles on the PHP Chinese website!