CSS LAYOUT-GRID-TYPE

This property controls the type of layout grid used when rendering an element’s text content.

Example
1
2
3
4
5
div {
  layout-grid-mode: both;
  layout-grid-type: loose;
  layout-grid-char-spacing: 15px
}
1
2
<div style="layout-grid-mode: both; layout-grid-type: loose;
layout-grid-char-spacing: 15px"
>Content snapped to a layout grid</div>

Possible Values

loose: Indicates the line-grid commonly used in Chinese and Korean text display. Chinese characters, kana and wide characters have the grid applied. All other characters are rendered as if ‘layout-grid-mode’ was set to “none” or “line”. CSS properties and values that would otherwise change the width of a character (such as ‘text-align: justify’) are disabled.

strict: Indicates the line-grid used in Japanese text display. Narrow characters (except content from “cursive” fonts) get half the grid increment applied to wide characters. Wide characters receive a grid increment if no other width adjustment is used.

fixed: The type of line-grid used in mono-space layout. All characters receive and are centered within an equal grid spacing (except content from “cursive” fonts.) CSS properties and values that would otherwise change the width of a character (such as ‘text-align: justify’) are disabled.