**Summary** I am intent to implement the property `line-height-step`. And it would be disabled behind the pref `layout.css.line-height-step.enabled` by default. It is a property to make authors create the content with vertical rhythm easier.
**Link to standard** CSS Rhythmic Sizing <https://drafts.csswg.org/css-rhythm/> **Bug Link** Bug 1343819 - Implement CSS property `line-height-step` <https://bugzilla.mozilla.org/show_bug.cgi?id=1343819> **Tests** There are already some test cases on web-platform-tests. <https://github.com/w3c/web-platform-tests/tree/master/css/css-rhythm-1> **Status on Other Browsers** *Blink* Blink is implemented in Issue 2704343003. <https://codereview.chromium.org/2704343003> Currently, this property only available in Chromium Developer Build 59. To try this feature, you need to enable "Experimental Web Platform features" in chrome://flags. *WebKit & Edge* Not support. **More About It** Vertical rhythm is a principle of typography. It is about spacing text. More generally, it is about vertical stacked elements. We can create a more comfortable layout with vertical rhythm. We can imagine that we're put all elements on a sheet of lined paper. The sizes of elements are according to the size between the lines. For example, we set the font-size as 12px. And the line-height is 1.5x of font-size, so it is 18px. We assume we want to put all elements on a lined paper and the line size is 18px. For the normal text, we just put them align the lines. If there is a title with 24px, to follow the vertical rhythm, the size of the title should be multiple of the line size. We add 6px to both over-side and under-side of the title, and the size of the title would be 36px (2 * 18). - Tommy _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
