CSS Step Sizing

1. Introduction

This specification provides features to control sizes of CSS objects according to the rules desired by use cases.

Controlling sizes of CSS objects to be multiple of a unit is desired in many cases. This level of the specification focuses on following cases.

• Adjust heights of line boxes to the multiple of the specified unit.

• Adjust widths of block-level boxes to the multiple of the specified unit.

By controlling heights of line boxes, lines of text in different fonts can create consistent visuals to help readability.

Also by stacking such line boxes, authors can align lines across columns, pages, scroll-snapped blocks, or multiple blocks placed absolutely, to produce vertical rhythm.

Vertical rhythm kept through pictures and different size of text in a multi-column document.

Controlling widths of block-level boxes to the multiple of the specified unit gives the ability to control a block so that it can fit mono-space characters without remainders. One of the use cases this feature addresses is better readability of East Asian documents. In Han ideographic-based scripts such as Chinese or Japanese, most characters have 1em advance, and due to that nature, most such documents are justified.

Adjusting widths of block-level boxes to the multiple of 1em helps to minimize cases where justification needs to expand spacing.

2. Adjusting Line Box Heights: the line-height-step property

Values have the following meanings:

<length>

This value defines the step unit#line-height-step-step-unitReferenced in:2. Adjusting Line Box Heights: the line-height-step property2.1. Stepping Line Box Heights (2) (3) (4) (5) (6) (7) (8)2.2. Aligning Baselines (2) (3) (4) for line box heights. Non-negative <length>s are valid.

<integer>

This value defines the step baseline position#line-height-step-step-baseline-positionReferenced in:2.1. Stepping Line Box Heights2.2. Aligning Baselines (2) (3) (4) (5) (6) (7) (8) within the step unit. Values between 1 and 100 (inclusive) are valid.

Naming under discussion.

Should the step baseline position be percent? Not much precision is needed, but there was one feedback that percent is easier to use.

2.1. Stepping Line Box Heights

When the step unit is set to a positive <length>, the line box heights are rounded up to the multiple of the unit.

[CSS21] §10.8 Line height calculations defines how to compute the line box height after the line box was constructed from inline-level boxes. The rounding is applied to the computed line box height by assuming that there is an inline-level box that has adjusted A' and D' in the line box.

Rounding up the computed line box height.

The step baseline position determines how the additional spaces are distributed.

• When it is not set, the height is rounded up to the closest multiple of the step unit, and the space is distributed to over-side (T) and under-side (B) equally, so that the original line box appears at the center of the multiple of step unit.

• When it is set, refer to the baseline section below.

In the following example, the height of line box in each paragraph is rounded up to the step unit.

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
p {
  margin: 0;
}

The line box in <h1> does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.

$gu: 18px;

@function gu($n) {
  @return $n * $gu;
}

h1 {
  font-size: 20pt;
  margin: gu(1.2) auto gu(1.8);
}

2.2. Aligning Baselines

When the step baseline position is set, the additional spaces are distributed using the following formula:

• space-over = P - T % U, add U if the result is negative

• space-under = U - (space-over + T + B) % U

Given:

• U: the step unit.

• P: the step baseline position × U / 100.

• T: the distance between the top of the line box and the baseline.

• B: the distance between the bottom of the line box and the baseline.

This formula pushes the baseline of the line box down to the closest step baseline position, and the bottom to the next step unit.

The following CSS sets the step baseline position to 14pt (20pt × 0.70) within each step unit.

:root {
  line-height-step: 20pt 70;
}

The baseline of the line box is pushed down to the closest step baseline position by adding the space-over.

<h1> is as tall as its baseline being lower than the second step baseline position that it is pushed down to the third step baseline position.

2.3. Notes on Block-level Boxes

This section is not normative.

This level of the specification does not provide features to adjust heights of block-level boxes.

:root {
  line-height-step: 18pt;
}
h2 {
  display: inline-block;
  width: 100%;
  line-height-step: 0;
  line-height: 1.2;
}

3. Stepping Widths: the inline-size-step property

Non-negative <length>s are valid.

When this property is set to a positive <length> and the available inline size is definite, the available inline size of the element is rounded down to the closest multiple of the specified <length> before it is used.

When this property is applied to a multi-column element, the available inline size of the content box is not rounded but the available inline size of the column box is rounded.

article, .bodytext {
  font-size: 12pt;
  text-align: justify;
  inline-size-step: 1em;
}

4. Privacy and Security Considerations

This specification introduces no new privacy leaks, or security considerations beyond "implement it correctly".

5. Acknowledgments