Core CSS: 2nd Edition, from Prentice Hall.

TEXT-AUTOSPACE PROPERTY

text-autospace

The text-autospace property has five properties: none, ideograph-alpha, ideograph-numeric, ideograph-parenthesis, ideograph-space. The none value is the default, setting no special spacing value between any Asian and Western characters that may appear together on a Web page. The rest of the properties for text-autospace describe the conditions under which slightly more space is added when it is next to an Asian ideographic character. So ideograph-alpha adds extra space when any regular Western, "alphabetical" characters appear next to Asian ideographs. Similarly, extra space is added between Asian characters and numerals when ideograph-numeric is used, ideograph-parenthesis is intended to add extra space between Asian characters and information contains in brackets, and when an Asian character is next to a space, ideograph-space is intended to make it a slightly larger space.

The effects of these values can be subtle, but the end results are intended to space out the different types of characters from each other in an attempt to make things more readable. Listing 11-8 shows the effects of three of these values set to some nonsensical Chinese text mixed together with English words and numbers.

Listing 11-8 text-autospace Sample Code

<html> <head> <title>text-autospace Example</title> </head> <style> span {font-family: ËÎÌå,MingLiU; font-weight: bold; font-size: 20pt; layout-flow: vertical-ideographic; height: 400px} </style> <body> text-autospace: none 歡1迎2漫3游4 (PanelX) 5 平6面7顯8示9屏10業11界12的 Portal 13及 Exchange 14   text-autospace: ideograph-alpha 歡1迎2漫3游4 (PanelX) 5 平6面7顯8示9屏10業11界12的 Portal 13及 Exchange 14   text-autospace: ideograph-numeric 歡1迎2漫3游4 (PanelX) 5 平6面7顯8示9屏10業11界12的 Portal 13及 Exchange 14 </body> </html>

none

ideograph-alpha

ideograph-numeric

The effects of these three different values of text-autospace can be seen in Figure 11-9. The initial none value, seen in the right of Figure 11-9 -- which is what you would get as a default -- treats the English text, numbers and Chinese text equally, giving them the same amount of spacing. The result is a muddied jumble of all of these characters. The next sample text uses the ideograph-alpha value, and though the effect is subtle, there is slight additional spacing added between the English words and their surrounding Chinese characters. The results are more noticeable with the ideograph-numeric value, which clearly adds additional space between each individual number and the Chinese characters that surround them. The end effect is to make each block of text more readable.

There is no way to adjust the spacing settings for these text-autospace values -- you get what you get, which is predetermined by the browser's own settings for handling Asian character sets.

CSS3 and text-autospace

text-autospace