CSS Rhythmic 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 multiples of the specified length.

• Adjust heights of block-level boxes to multiples of the specified length.

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.

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

This property defines the step unit for line box heights. When the step unit is set to a positive <length>, the line box heights are rounded up to the closest multiple of the unit. Negative <length> values are invalid.

[CSS21] §10.8 Line height calculations defines how to compute the height of a line box from its inline-level content. The rounding is applied to the resulting height of the line box, and the additional space is distributed to over-side and under-side of the line box equally, so that the original line box appears at the center of the multiple of step unit. This adjustment is done by assuming that there is an inline-level box that has adjusted A' and D' in the line box. This inline-level box does not affect alignment points of the vertical-align property, except values that align relative to the line box.

Rounding up the computed line box height.

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);
}

3. Adjusting Block-level Box Heights

This proposal can be simplified down to just the block-step-size property, represented solely through its shortened form as block-step. This level will likely at most contain block-step-size and block-step-insert, leaving block-step-align and block-step-round to be added if the future demands. The full design is described herein for current discussion and future reference.

This proposal is currently defined to apply only to block-level boxes. This limitation is solely to simplify the first iteration; it should eventually be extended to all layout modes that honor specified heights.

3.1. Specifying the Step Size: the block-step-size property

This property defines the step unit for a block-level box’s block size. When the step unit is set to a positive <length>, the box’s outer height is rounded (see block-step-round) to the closest multiple of the unit. Negative <length> values are invalid.

Values other than none cause the box to establish a new formatting context.

In situations where margins collapse, only the box’s own margin is considered in calculating its outer size.

3.2. Specifying the Spacing Type: the block-step-insert property

This property specifies whether extra spacing derived from applying block-step-size is inserted inside (like padding) or outside (like margin) the box’s border.

Values have the following meanings:

margin

Any extra space resulting from a block-step-size-induced adjustment is inserted outside the box’s border, as extra margin.

padding

Any extra space resulting from a block-step-size-induced adjustment is inserted inside the box’s border, as extra padding.

3.3. Specifying Alignment: the block-step-align property

This property specifies whether extra spacing derived from applying block-step-size is inserted before, inserted after, or split between both sides of the box.

Values have the following meanings:

auto

If block-step-insert is margin: if align-self is start, end, or center, treat as that value, otherwise treat as center.

center

Any extra space resulting from a block-step-size-induced adjustment is split, and applied half on either side of the box.

start

Any extra space resulting from a block-step-size-induced adjustment is inserted on the start side of the box.

end

Any extra space resulting from a block-step-size-induced adjustment is inserted on the end side of the box.

3.4. Rounding Method: the block-step-round property

This property specifies whether adjustments due to block-step-size insert positive or negative space.

Values have the following meanings:

up

The outer size of the box is increased (positive space is inserted) to fulfill the block-step-size constraint.

down

The outer size of the box is decreased (negative space is inserted) to fulfill the block-step-size constraint.

nearest

The outer size of the box is either increased (as for up) or decreased (as for down—whichever results in the smallest absolute change—to fulfill the block-step-size constraint. If both options would result in the same amount of change, the size is increased.

3.5. Block Step Adjustment Shorthand: the block-step shorthand

This shorthand property allows for setting block-step-size, block-step-insert, block-step-align, and block-step-round in one declaration. Omitted values are set to the property’s initial value.

Authors are advised to use this shorthand rather than the longhands unless there is a specific need for its individual longhands to cascade independently.

4. Privacy and Security Considerations

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

5. Acknowledgments

This specification would not have been possible without the help from: Takao Baba, Chris Eppstein, Shinyu Murakami, Tsutomu Nanjo, Charlie Neely, Florian Rivoal, Hiroshi Sakakibara, Alan Stearns, and the CSS Working Group members.