explainers

Explainer for the CSS text-box, text-box-trim, and text-box-edge properties

Table of Contents

Introduction

To achieve optical balance of text content, the text-box-trim and text-box-edge properties, along with the text-box shorthand property, make finer control of vertical alignment of text possible.

The text-box-trim property specifies the sides to trim, above or below, and the text-box-edge property specifies how the edge should be trimmed.

These properties allow developers to control vertical spacing precisely by using the font metrics.

These properties are defined in the Trimming Leading Over/Under Text section of the CSS Inline Level 3.

Use cases

Use case 1

This example by Jan Nicklas explains various points of vertical alignments:

When aligning the top of text to non-text objects, this comment explains how the desired “top of text” may vary:

Note, the rules in the picture above may vary depends on preferences of authors or writing systems. For example, the “top of text” may vary by text content or by preferences. Also, other writing systems may prefer other “top of text” and “bottom of text”.

Use case 2

Another common pain point today is vertical centering of text against non-text objects, such as:

This video from Figma demonstrates how the their implementation solves this use case.

Similar to the use case above, the “top of text” could be the cap-height or the x-height, depends on the text content or on the authors’ preferences. The bottom of text is usually the alphabetic baseline for Latin, but they may be different for different writing systems.

How this solution would solve the use cases

The following CSS is a simple example for the use cases above for the Latin writing systems:

.trim-at-cap {
  text-box: cap alphabetic;
}

.trim-at-ex {
  text-box: ex alphabetic;
}

An interactive demo page by Adam Argyle can demonstrate the effects on the supported browsers.

For more details, please see the text-box shorthand property, along with the text-box-trim and text-box-edge longhand properties in the Trimming Leading Over/Under Text section of the CSS Inline Level 3.

Stakeholder Feedback / Opposition

Security and Privacy

This section answers to the Self-Review Questionnaire.