Title: CSS Step Size
Shortname: css-snap-size
Level: 1
Group: CSSWG
Status: ED
Work Status: exploring
Editor: Koji Ishii, Google, kojiishi@gmail.com
ED: https://drafts.csswg.org/css-snap-size/
Abstract: This module contains CSS features for aligning content size
  to multiple of unit size.

spec:css21; type:property; text:max-height
spec:css21; type:property; text:max-width
spec:css21; type:property; text:min-width

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

  Name: line-height-step
  Value: <> <>?
  Initial: 0px
  Applies to: block containers
  Inherited: yes
  Animatable: no
  Percentages: N/A
  Media: visual
  Computed Value: the absolute length for length, others as specified

<>

This value defines the step unit for line box heights. Non-negative <>s are valid.

<>

This value defines the step baseline position within the step unit. Values between 1 and 100 (inclusive) are valid.

>, the line box heights are rounded up to the closest 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 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 {
    --my-body-font-size: 12pt;
    --my-grid: 18pt;
    font-size: var(--my-body-font-size);
    line-height-step: var(--my-grid);
  }
  h1 {
    font-size: calc(1.618 * var(--my-body-font-size));
    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.

Aligning Baselines {#baseline} ------------------------------

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.

Since the bottom of the line box is rounded to the closest step unit next to the descenders of the line box, large descenders may result in unintended spaces under the line box. Oftentimes changing step baseline position can control such situations.

Notes on Block-level Boxes {#block-height} ------------------------------------------ This section is not normative. This level of the specification does not provide features to adjust heights of block-level boxes.

The following CSS turns <h2> to inline-blocks.

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

When an <h2> is long enough to wrap, text inside the <h2> uses ''line-height: 1.2'', while the height of the <h2> block is rounded up to the multiple of ''18pt''. See a sample in action.

Stepping Widths: the 'inline-size-step' property {#width} =========================================================

  Name: inline-size-step
  Value: <>
  Initial: 0px
  Applies to: all elements but non-replaced inline elements, table rows, and row groups
  Inherited: no
  Animatable: no
  Percentages: N/A
  Media: visual
  Computed Value: the absolute length

Non-negative <>s are valid. When this property is set to a positive <> and the available inline size is definite, the available inline size is rounded down to the closest multiple of the specified <> before it is used.

Since this property only adjusts available inline size, it does not guarantee that the inline size of child boxes are the multiple of the specified <> if there were other constraints.

This property improves the justification for Han ideograph-based scripts such as Chinese or Japanese. With the following CSS, the <article> elements and blocks with bodytext class are justified, but the expansion occurs only when there are non-CJK characters in the line because their logical widths are adjusted to the multiple of 1em.

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

Privacy and Security Considerations {#priv-sec} =============================================== This specification introduces no new privacy leaks, or security considerations beyond "implement it correctly".