800+ IT
News
als RSS Feed abonnieren📚 CSS text-wrap: balance
💡 Newskategorie: Programmierung
🔗 Quelle: developer.chrome.com
Chrome Canary includes a new feature—text-wrap: balance from CSS Text Level
4. To check it out, enable
chrome://flags/#enable-experimental-web-platform-features,
and then take a look at the examples in this post to learn how this one line of
CSS can massively improve your text layouts.
Without text-wrap: balance; designers, content editors and publishers have
few tools
to change the way lines are balanced.. The best options available being to use
<wbr> or
­ to help
guide text layouts into smarter decisions about where to break lines and words.
As a developer, you don’t know the final size, font size, or even language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. This is why we see headline wrapping as in the following image:
.unbalanced {
max-inline-size: 50ch;
}With text-wrap: balance from CSS Text
4, you can request the browser to
figure out the best balanced line wrapping solution for the text. The browser
does know all the factors, like font size, language, and allocated area.
Results of browser balanced text wrapping looks like this today in Chrome
Canary with
chrome://flags/#enable-experimental-web-platform-features
enabled:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}It's helpful to see them side by side, still, and without debug information overlaid.
Your eye should be much more pleased with the balanced text block. It grabs attention better and is overall easier to read.
Finding the balance
Headlines are the first thing readers see; they should be visually appealing and easy to read. This grabs user attention and provides a sense of quality and assurance. Good typography gives confidence to readers, encouraging them to continue reading.
Traditionally this task was done by hand, or optically, as the designer balancing the text wants to please the eye not the math. This topic is often referred to as metric versus optical alignment. For large publications like the New York Times, headline balancing is a very important user experience detail.
Balancing main article text is not common as it doesn't need to stand out or catch a reader's eye.
Balancing text in typography dates back to early days of printing, when printers would hand place letters. As tools and techniques evolved, so did the results. These days, designers have color, weight, size, and more, to balance text in their designs.
On the web however, there's less control available because the document changes
sizes and colors based on users. text-wrap: balance brings the art of
balancing text to the web in an automated way, building on the work and
traditions of designers from the print industry.
Balancing headlines
This will, and should be, the primary use case for text-wrap: balance. Draw
the eye with size and make it symmetrical and legible for the eye to read. Set
all the headlines to balanced text wrapping with the following CSS:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}Just applying this style may not provide you with the results you expect, as the
text needs to wrap and therefore have a maximum line length applied from
somewhere. You'll see a
max-inline-size
set on the examples in this post, this style is like max-width but can be set
once for any language.
Limitations
The task of balancing text is not free. The browser needs to loop over iterations to discover the best balanced wrapping solution. This performance cost is mitigated by a rule, it only works for 4 wrapped lines and under.
Performance considerations
It is not a good idea to apply text-wrap balancing to your entire design. It's a wasted request, due to the four line limit, and may impact page render speed.
Don't
* {
text-wrap: balance;
}CONSIDER INSTEAD
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}A big win for this feature is that you don't need to wait and time text wrap balancing with font loading, like you may be doing with JavaScript today. The browser takes care of it!
Interactions with the white-space property
Balancing text competes with the
white-space
property because one is asking for no wrapping and the other is asking for
balanced wrapping. Overcome this by unsetting the white space property, then
balanced wrapping can apply again.
.balanced {
white-space: unset;
text-wrap: balance;
}Balancing won’t change the inline-size of the element
There's an advantage to some of the JavaScript solutions for balanced text
wrapping, as they change the max-width of the containing element itself. This
has an added bonus of being "shrink wrapped" to the balanced block. text-wrap: balanced does not have this effect and can be seen in this example:
See how the width shown from DevTools has a bunch of extra space at the end?
That's because it's a wrapping style only, not a size changing style. Because of
this, there's a few scenarios where text-wrap: balance isn't that great, at
least in my opinion. For example, headings inside of a card (or any container
with borders or shadows).
Balanced text wrapping ironically creates imbalance to the contained element.
A brief explanation of the technique the browser is using
The browser effectively performs a binary search for the smallest width which doesn't cause any additional lines, stopping at one CSS pixel (not display pixel). To further minimize steps in the binary search the browser starts with 80% of the average line width.
...