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

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

layoutGridMode style property

Browser support:

Specifies or returns whether the text layout grid uses one or two dimensions.

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.

Syntax:

object.layoutGridMode;

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-mode

Possible values:

The type of this property is string.

One of the following values:

both

Default. Character (char) and line grid modes are enabled.

char

Only a character grid is used for the object.

line

Only a line grid is used for the object. Use for inline elements.

none

No layout grid is used.

Default: both.

Example HTML code 1:

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

<head>
    <style>
        .example {
            layout-grid-mode: both;
            layout-grid-line: 15px;
            layout-grid-char: 15px;
        }
    </style>
</head>
<body>
    <div class="example">layout-grid-mode: both</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 layoutGridMode property in JavaScript:

<head>
    <style>
        .example {
            layout-grid-mode: both;
            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 ('layoutGridMode' in div.style) {
                div.style.layoutGridMode = 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-mode property
    </div>

    <br />
    <select onchange="ChangeLayout (this);" size="4">
        <option selected="selected" />both
        <option />none
        <option />line
        <option />char
    </select>
</body>