CSS LAYOUT-GRID-TYPE

  • Share
  • Share

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

 

Example

div { layout-grid-mode: both; layout-grid-type: loose; layout-grid-char-spacing: 15px }

<div style=”layout-grid-mode: both; layout-grid-type: loose;
layout-grid-char-spacing: 15px”>Content snapped to a layout grid</div>

 

Possible Values

Value Description
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.