This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

layout-grid-type

Overview table

Initial value
:

Applies to
All elements
Inherited
Yes
Media
visual

Computed value
:

Animatable
No

CSS Object Model Property
:

Syntax

  • layout-grid-type: fixed
  • layout-grid-type: loose
  • layout-grid-type: strict

Values

loose
Default. Grid used for Japanese and Korean characters. In this mode, a constant width increment is applied to characters as follows: Wide characters and narrow kana characters are incremented to obtain an exact grid fit, as specified by the -ms-layout-grid-char property. Other narrow characters, except connected and cursive characters, are incremented by half of the increment amount applied to wide characters. Other characters, including connected and cursive characters, are not incremented, and behave as if no character grid is set.
strict
Grid used for Chinese, as well as Japanese (Genko) and Korean characters. Only the ideographs, kanas, and wide characters are snapped to the grid. Other characters are rendered as usual, as though the -ms-layout-grid-mode attribute is set to none or line for text spans containing these characters. This mode also disables special text justification and character width adjustments normally applied to the element. Finally, if there is no line-break opportunity in a text span that exceeds the line boundary, the text is pushed to the next line and the last part of the previous line is left blank.
fixed
Grid used for monospaced layout. The layout rules are as follows: All noncursive characters are treated as equal; every character is centered within a single grid space by default. Runs of cursive characters are treated as strips the same as in a strict grid. Justification or any other character-width changing behaviors are disabled.

Examples

This example uses the -ms-layout-grid-type attribute to specify character layout for a block of text.

<STYLE>
DIV.layout { layout-grid-type: strict }
</STYLE>
<DIV CLASS = "layout">
This is a block element containing a sentence of sample text.
</DIV>

Notes

Remarks

Windows Internet Explorer 8. The -ms-layout-grid-type attribute is an extension to CSS, and can be used as a synonym for layout-grid-type in IE8 Standards mode. Web documents in Asian languages, such as Chinese or Japanese, usually create a page layout for characters using a one- or two-dimensional grid. You can use the -ms-layout-grid attribute to incorporate this layout into Web documents. The -ms-layout-grid-type attribute applies only to block-level elements.

Syntax

-ms-layout-grid-type: loose | strict | fixed

Standards information

There are no standards that apply here.

See also

Related articles

Text

Related pages

Attributions