CSS Rhythmic Sizing Module Level 1

AbstractThis module contains CSS features for aligning content size to multiple of unit size.CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. Status of this document This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C standards and drafts index. This document was published by the CSS Working Group as a Working Draft using the Recommendation track. Publication as a Working Draft does not imply endorsement by W3C and its Members. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than a work in progress. Please send feedback by filing issues in GitHub (preferred), including the spec code “css-rhythm” in the title, like this: “[css-rhythm] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. This document is governed by the 18 August 2025 W3C Process Document. This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent that the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy. Table of Contents 1 Introduction 1.1 East Asian Casual Vertical Rhythms 1.2 Value Definitions 2 Adjusting Block-level Box Heights 2.1 Specifying the Step Size: the block-step-size property 2.2 Specifying the Spacing Type:

the block-step-insert property 2.3 Specifying Alignment: the block-step-align property 2.4 Rounding Method: the block-step-round property 2.5 Block Step Adjustment Shorthand: the block-step shorthand 3 Adjusting Line Box Heights: the line-height-step property 4 Privacy Considerations 5 Security Considerations 6 Acknowledgments 7 Changes Conformance Document conventions Conformance classes Partial implementations Implementations of Unstable and Proprietary Features Non-experimental implementations Index Terms defined by this specification Terms defined by reference References Normative References Informative References Property Index Issues Index 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 step unit is desired in many cases. This level of the specification focuses on following cases. Adjust heights of block-level boxes to multiples of the specified length. Adjust heights of line boxes to multiples of the specified length. By stacking blocks at multiples, authors can align content across columns, pages, scroll-snapped bocks or multiple blocks placed absolutely to maintain vertical rhythm. Also by controlling heights of line boxes, lines of text in different fonts can create consistent visuals to help readability. 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. 1.2. Value Definitions This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Adjusting Block-level Box Heights The most common typographic rhythm problems are block-level intrusions: when continuous paragraph-level text is interrupted by differently-sized content such as illustrations and headings, then the line-to-line rhythm can be thrown off. The block step properties allow such elements to be fitted to the rhythmic interval by constraining their height to a multiple of a specified step size. This allows content before and after the interruption to maintain a continuous rhythm. Heads and blockquotes have varying font sizes and line heights, resulting in uneven text across columns. Space inserted before and after blocks (shown with colored borders) restores vertical rhythm. While consistent use of the block step properties can produce the strictly gridded layout needed for parallel content flows, per-element specification of the step size also allows some interruptions to take their natural size in the flow, restarting the vertical rhythm afterwards. This can be useful in single-column layouts where the vertical rhythm is important to maintain visual continuity, but there is nothing alongside to align to. In these cases, large interruptions which visually disconnect the flow before and after can prioritize optimal spacing around the item over strict adherence to a continuous grid (by specifying block-step: none, the initial value). 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. 2.1. Specifying the Step Size: the block-step-size property Name: block-step-size Value: none | <length [0,∞]> Initial: none Applies to: block-level boxes Inherited: no Percentages:

N/A Computed value: specified keyword or absolute length Canonical order: per grammar Animation type: by computed value type Tests block-step-size-establishes-block-formatting-context-list-item.html (live test) (source) block-step-size-establishes-block-formatting-context.html (live test) (source) block-step-size-establishes-independent-formatting-context-list-item.html (live test) (source) block-step-size-establishes-independent-formatting-context.html (live test) (source) block-step-size-none-does-not-establish-block-formatting-context.html (live test) (source) block-step-size-none-does-not-establish-indepdendent-formatting-context.html (live test) (source) block-level-replaced-elements-affected-by-block-step-size.html (live test) (source) inline-level-replaced-elements-not-affected-by-block-step-size.html (live test) (source) content-based-height-rounds-up-to-step-unit.html (live test) (source) definite-height-rounds-up-to-next-multiple-of-step-unit.html (live test) (source) definite-height-rounds-up-to-step-unit.html (live test) (source) definite-height-same-as-step-unit.html (live test) (source) block-step-size-computed.html (live test) (source) block-step-size-invalid.html (live test) (source) block-step-size-valid.html (live test) (source) block-level-canvas-margins-affected-by-block-step-size.html (live test) (source) block-level-canvas-margins-affected-by-block-step-size.html (live test) (source) block-level-embed-margins-affected-by-block-step-size.html (live test) (source) block-level-iframe-margins-affected-by-block-step-size.html (live test) (source) block-level-img-margins-affected-by-block-step-size.html (live test) (source) block-level-object-margins-affected-by-block-step-size.html (live test)