Asian languages often employ page layout for characters for better visual formatting using a one or two-dimensional grid. This property controls the size of the character grid for the layout of an element’s text content when the ‘layout-grid-mode’ is set to ‘line’ or ‘both’. Visually, this property has an effect similar to the ‘line-height’ property.
Example
| div { layout-grid-mode: line; layout-grid-char: 12px }
<div style=”layout-grid-mode: line; layout-grid-char: 12px”>Content snapped to a layout grid</div> |
Possible Values
| Value | Description |
|---|---|
| none | No line grid is used. |
| auto | The largest character in the font for the current element is used to determine the character grid. |
| [length] | Refers to either an absolute measurement or a relative measurement based on the current element’s font size. |
| [percentage] | The percentage is relative to the height/width of the parent element. |