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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content