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

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

textAutospace style property

Browser support:

Specifies or returns the spacing rules between Western and Asian-based (such as Japanese and Chinese) characters.

In many Asian writing systems, such as Japanese and Chinese, there are ideographs that represent concepts rather than letters. With the textAutospace property you have control over how spaces between ideographs and non-ideographic characters in are presented.

Syntax:

object.textAutospace;

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

This property is read/write.

CSS page for this property: text-autospace

Possible values:

The type of this property is string.

One of the following values:

ideograph-alpha

Inserts extra spaces between ideographic and non-ideographic (Latin-based, Cyrillic, Greek, Arabic, or Hebrew) text.

ideograph-numeric

Inserts extra spaces between ideographic text and numeric characters.

ideograph-parenthesis

Inserts extra spaces between normal (non-wide) parentheses and ideographs.

ideograph-space

Extends the width of the space character when it is adjacent to ideographs.

none

No extra space is added.

Default: none.

Example HTML code 1:

This example illustrates the use of the text-autospace property:

<head>
    <style>
        .spaceNone {
            text-autospace: none;
        }
        .spaceIdeoNum {
            text-autospace: ideograph-numeric;
        }
    </style>
</head>
<body>
    <div>Autospace none: </div>
    <p class="spaceNone">1一 2二 3三 4四 5五 6六 7七 8八 9九 10十</p>
    <br />
    <div>Autospace ideograph-numeric: </div>
    <p class="spaceIdeoNum">1一 2二 3三 4四 5五 6六 7七 8八 9九 10十</p>
</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 textAutospace property in JavaScript:

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

            // Returns the text of the selected option
            var autospaceValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
 
            if ('textAutospace' in div.style) {
                div.style.textAutospace = autospaceValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">1一 2二 3三 4四 5五 6六 7七 8八 9九 10十</div>

    Change text-autospace value:
    <select onchange="ChangeTextAutospace (this);" size="5">
        <option selected="selected" />none
        <option />ideograph-alpha
        <option />ideograph-numeric
        <option />ideograph-parenthesis
        <option />ideograph-space
    </select>
</body>