1387501 - [css-rhythm] Implement block step sizing (block-step-size)

Status: NEW

(Core :: Layout: Block and Inline, enhancement, P3)

Comment 1

[fantasai]

Overview:
  There's been requests from the typographic community to solve the problem of vertical rhythm in Web pages and ebooks. The CSS Rhythm spec includes several features for this. One of the chief problems is block-level interjections within a flow of text: things like headings, figures, tables, block quotes which interrupt the line rhythm. The block-step properties are designed to solve this problem.

Spec:
  https://www.w3.org/TR/css-rhythm-1/#block-height

Additional Notes:
  The spec applies these features to block-level elements only (for the present level), reducing the scope of the feature. The `block-step-align` and `block-step-round` properties are described for discussion purposes, but can easily be deferred to another level as their defaults are use appropriate values in most cases. The `block-step-align` property defers to the alignment properties [css-align], however, which makes that a dependency for getting the commonly-desired centering behavior.

  The block-step-size property defines the size of the interval; the block-step-insert property defines whether to insert "fake padding" or "fake margin" to increase the size of the block. Implementation of the former should be quite simple, by adding rounding logic to the current min-height/max-height clamping logic in nsBlockFrame::ComputeFinalSize. The "fake margin" approach will require adjustments to child positioning code by the block's parent where we apply margins.

  This feature was added to the FPWD by general WG consensus, solves many of the use cases css-rhythm is intended to solve, and doesn't have the robustness concerns that have made line-height-step controversial. It should be fairly straightforward to implement, and would be a good place for us to start in addressing the problem of vertical rhythm.