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.

1.1. East Asian Casual Vertical Rhythms

In East Asia, a casual variant of vertical rhythm is widely used.

Vertical rhythm is typically used in professional typography. While it improves readability, its spacing constraints require careful and well-thought design of spaces.

The East Asian casual variant was originally a product of technical constraints of traditional word processors in '80s. But when the technical constraints were lifted in more modern technologies, with the help of square-like visual of ideographic characters, East Asian authors preferred to keep parts of the characteristics.

In this variant of vertical rhythm, the requirement is loosened for the ease of use for non-professional authors. Text is still on the rhythm, so that the majority of ideographic characters are mostly on grid, but when author specifies borders, margins, or some other objects that may break the rhythm, the rhythm is shifted rather than forced. The strict vertical rhythm often surprises non-professional authors by forced jumps in such cases, while this variant combines rhythm on text and the ease of use for non-professional authors.

This variant was very widely accepted in East Asia since the middle of '90s, such that most major word processors used in East Asia provided similar features by default.

In East Asian publishing typography, the vertical rhythm is one of important properties, but its priority compared to other properties varies by types of documents. In single column documents, the priority is weaker than that of multi-column documents. Text should be on the vertical rhythm, but it is often preferred for borders, margins, or other properties to win over the rhythm. In such cases, the rhythm is shifted, similar to the casual variant.

In this specification, when the line-height-step property is used without combination of the block-step property or the line-grid property, it produces the similar effect as the East Asian casual vertical rhythm.

It may also serve good for East Asian publishing typography, depends on the desired strength of the vertical rhythm.

For other cases of vertical rhythm, it is expected that the block-step property or the line-grid property are used, or that the line-height-step property is used together with them.

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

Much web content includes blocks with varying font sizes, line heights, margins, etcetera. Adjusting line box heights may not be enough to achieve a vertical rhythm in these circumstances, and can negatively affect the readability of Latin scripts by altering line heights. Constraining block height, rather than line height, to a multiple of a step size can achieve a vertical rhythm in these circumstances.

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.