text-autospace

Summary

When non-ideographic characters (such as numbers) are presented alongside ideographic characters, many designers prefer to include spacing to separate it from the surrounding ideographs. This property automates the creation of that space by introducing an in-line margin, the width of which corresponds to the width of existing ideographs.

Overview table

Initial value

none

Applies to

All elements

Inherited

Yes

Media

visual

Computed value

specified value (except for initial and inherit)

Animatable

Yes

CSS Object Model Property
:

Percentages

N/A

Syntax

• text-autospace: ideograph-alpha
• text-autospace: ideograph-numeric
• text-autospace: ideograph-parenthesis
• text-autospace: ideograph-space
• text-autospace: none

Values

none

Default. No effect takes place—that is, no extra space is added.

ideograph-alpha

Creates extra spacing between runs of ideographic and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic, or Hebrew text.

ideograph-numeric

Creates extra spacing between runs of ideographic text and numeric characters.

ideograph-parenthesis

Creates extra spacing between a normal (non-wide) parenthesis and an ideograph.

ideograph-space

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

Examples

By setting the text-autospace property to various keywords, one can easily modify the spacing standards of combinations of ideographic and non-ideographic characters.

/**
 * Using the CSS `text-autospace` property.
 */

tr:nth-child(3) {
    text-autospace: ideograph-numeric;
}

tr:nth-child(4) {
    text-autospace: ideograph-alpha;
}

tr:nth-child(5) {
    text-autospace: ideograph-parenthesis;
}

View live example

Usage

 This property acts in addition to other properties such as css/properties/word-spacing and css/properties/letter-spacing, meaning that you can use both properties and their effects will be compounded.

This property is not currently supported by any major browser.

Notes

Remarks

Windows Internet Explorer 8. The -ms-text-autospace attribute is an extension to CSS, and can be used as a synonym for text-autospace in IE8 Standards mode. An ideograph is a character in an Asian writing system that represents a concept or an idea, but not a particular word or pronunciation.

Syntax

-ms-text-autospace: none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space

Standards information

• CSS Text Level 3, Section 9.4

Related specifications

CSS Text Module Level 3

W3C Last Call Working Draft

See also

Related pages

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• defaultsdefaults
• runtimeStyleruntimeStyle
• stylestyle
• styleSheetstyleSheet

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]