/text-box-trim-examples

text-box-trim examples and playground (previously known as leading-trim)

Primary LanguageTypeScript

CSS Text Box Trim

CSS Text Box Trim is a CSS property that allows you to remove the leading whitespace from a block of text. This is useful for removing the space between the top of the text and the top of the container.

🚨 text-box-trim is the new name for leading-trim: w3c/csswg-drafts#8067 (comment)

Usage

.text-box-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

Animation cutting of both edges from a text

example for ascender and cap height

example for asian fonts

Playground

text-box-trim is right now only supported by Safari Technology Preview with the old leading-trim name.
But you can try it out right now in the playground

Playground Examples

text-box-edges
text-box-edges

button
button

subgrid gap subgrid gap

Text Edge Values

Text edge values are based of a fonts OpenType meta data. It will also be possible to define these values with css: https://www.w3.org/TR/css-fonts-5/#font-metrics-override-desc

Visualisation of the different text-box-edge values:

text-box-edge: normal
text-box-edge: normal

text-box-edge: text
text-box-edge: text

text-box-edge: ex
text-box-edge: ex

text-box-edge: ex alphabetic
text-box-edge: ex alphabetic

text-box-edge: cap
text-box-edge: cap

text-box-edge: cap alphabetic
text-box-edge: cap alphabetic

text-box-edge: ideographic
text-box-edge: ideographic

text-box-edge: ideographic ideographic-ink
text-box-edge: ideographic ideographic-ink

text-box-edge: ideographic-ink
text-box-edge: ideographic-ink

text-box-edge: ideographic-ink ideographic
text-box-edge: ideographic-ink ideographic

Browser Support

Browser Version
Chrome intend to prototype
Firefox -
Safari Safari Technology Preview 163
Opera -
Edge intend to prototype

Talks

Talk Precise Text Alignment

Initial

Initial idea from October 2018

Proposal

w3c/csswg-drafts#3240 https://www.w3.org/TR/css-inline-3/#propdef-text-box-trim

Usecases

Here are some cases where this property can be useful:

Centering text in buttons

button {
    padding: 6px
}

Button

With text-box-trim:

button {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
  padding: 10px
}

Button with leading trim

Spacing Systems

Most design systems have a spacing system that is based on multiples of a base unit. For example, a spacing system might have a base unit of 4px, and then multiples of that unit, such as 8px, 12px, 16px, etc. This is a great way to ensure that spacing is consistent across the design system.

However the added line-height destroys the spacing system:

Spacing systems without leading trim

Icons

Aligning icons with text is a common problem. With leading trim, you can align the icon with the text:

Icon

Icon with leading trim

Images

In articles images are often placed next to images. The leading trim property allows you to remove the whitespace above the text to align the text with the image.

Image

Art

Especially in logo design and art leading trim can be used to create aligned different text elements:

Art

Open Issues

Related Links

Credits