In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > layoutGridType

layoutGridType style property

Browser support:

Specifies or returns the type of grid to be used for laying out Japanese or Chinese characters in a web document.

If you want to display characters that use a one or two-dimensional grid layout, such as Chinese and Japanese, you can use the layoutGrid property to properly display them in web pages. The layoutGridType property has effect only on block elements.

Syntax:

object.layoutGridType;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: layout-grid-type

Possible values:

The type of this property is string.

One of the following values:

fixed

Indicates that the layout grid is used in mono-space layout.

loose

Default. Indicates that the layout grid is used for Japanese and Korean characters.

strict

Indicates that the layout grid is used for Chinese, Japanese (Genko) and Korean characters.

Default: loose.

Example HTML code 1:

This example illustrates the use of the layout-grid-type property:

<head>
    <style>
        .example {
            layout-grid-type: fixed;
        }
    </style>
</head>
<body>
    <div class="example">layout-grid-type: fixed</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the layoutGridType property in JavaScript:

<head>
    <style>
        .example {
            layout-grid-type: loose;
            layout-grid-line: 15px;
            layout-grid-char: 15px;
        }
    </style>

    <script type="text/javascript">
        function ChangeLayout (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var layoutValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('layoutGridType' in div.style) {
                div.style.layoutGridType = layoutValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">Change the value of the <br />
        layout-grid-type property
    </div>

    <br />
    <select onchange="ChangeLayout (this);" size="4">
        <option selected="selected" />loose
        <option />strict
        <option />fixed
    </select>
</body>