Line grid
By specifying ‘-ah-baseline-grid’, a baseline grid can be set to make a baseline of each column fixed even when there is a heading or figures in the line. A new baseline grid can be specified with -ah-baseline-grid: new. The settings of ‘font’ and ‘line-height’ of this element are used for the baseline grid. By specifying ‘root’, the settings of ‘font’ and ‘line-height’ of the root element are used for the baseline grid. On the other hand, by specifying ‘none’, the baseline grid setting is disabled. How a block other than a line, such as a header and a figure, is placed in the baseline grid can be specified with ‘-ah-baseline-block-snap’. In this sample, the default value ‘auto border-box’ is used for the setting. This is the same as specifying ‘before’ for the beginning of the column, ‘after’ for the end of the column, and ‘center’ for the others; however, ‘before’, ‘after’ and ‘center’ can be specified separately.

When -ah-baseline-grid is specified

In this block, a line grid is specified with -ah-baseline-grid: new;.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum Large letters tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc Larger letters mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu.
Image [-ah-baseline-block-snap: auto border-box; (default)]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id.
Image [-ah-baseline-block-snap: auto border-box; (default)]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id.
Image [-ah-baseline-block-snap: auto border-box; (default)]

When -ah-baseline-grid is not specified

In this block, a baseline grid is not specified with -ah-baseline-grid.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum Large letters tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc Larger letters mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu.
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id.
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id.
Image