text-autospace：アルファベット等との間隔を指定（IE独自）
| 適用対象 | 全ての要素 |
| 継承 | しない |
text-autospaceプロパティは、Internet Explorerが独自に採用したもので、日本語・中国語・韓国語などの表意文字と、アルファベットなどの非表意文字・数字との間隔を指定する際に使用します。しかしその実態は不明確で、IEで実際に試してみてもこのプロパティ単体では反映されないようです。
text-autospaceに与えられる値
- text-autospace: none;
- 間隔は空けません。
- text-autospace: ideograph-alpha;
- 表意文字と、アルファベットなどの非表意文字の境い目に間隔を空けます。
- text-autospace: ideograph-numeric;
- 表意文字と、数字との境い目に間隔を空けます。
- text-autospace: ideograph-parenthesis;
- 表意文字と、半角の(括弧)との境い目に間隔を空けます。
- text-autospace: ideograph-space;
- 表意文字と、アルファベットなどの非表意文字との境い目の間隔を広めに空けます。
text-autospaceの使用サンプル
CSS
.text_sample01 {
text-autospace: ideograph-alpha;
background-color: #EEEEEE;
padding:5px;
margin:0px 0px 10px 0px;
}
.text_sample02 {
text-autospace: ideograph-numeric;
background-color: #EEEEEE;
padding:5px;
margin:0px 0px 10px 0px;
}
.text_sample03 {
text-autospace: ideograph-parenthesis;
background-color: #EEEEEE;
padding:5px;
margin:0px 0px 10px 0px;
}
.text_sample04 {
text-autospace: ideograph-space;
background-color: #EEEEEE;
padding:5px;
}
XHTML
<div class="text_sample01"> text_sample01 [text-autospace: ideograph-alpha;]<br /> text sample. text sample. text sample.<br /> テキストサンプル、テキストサンプル。<br /> </div> <div class="text_sample02"> text_sample02 [text-autospace: ideograph-numeric;]<br /> text sample. text sample. text sample.<br /> テキストサンプル、テキストサンプル。<br /> </div> <div class="text_sample03"> text_sample03 [text-autospace: ideograph-parenthesis;]<br /> text sample. text sample. text sample.<br /> テキストサンプル、テキストサンプル。<br /> </div> <div class="text_sample04"> text_sample04 [text-autospace: ideograph-space;]<br /> text sample. text sample. text sample.<br /> テキストサンプル、テキストサンプル。<br /> </div>
表示確認
text_sample01 [text-autospace: ideograph-alpha;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text_sample02 [text-autospace: ideograph-numeric;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text_sample03 [text-autospace: ideograph-parenthesis;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text_sample04 [text-autospace: ideograph-space;]
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text sample. text sample. text sample.
テキストサンプル、テキストサンプル。
text-autospaceに関連するCSSプロパティ
| テキスト関連 | |
|---|---|
| text-align | 内包する要素に対して横位置の揃え方を指定する |
| text-align-last | 内包する要素の最終行に対して横位置の揃え方を指定する |
| text-autospace | アルファベット等との間隔を指定 |
| text-combine-horizontal | 文字を縦書き表示にした際に縦中横のレイアウトにする |
| text-combine-mode | 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する |
| text-decoration | 文字列に装飾線や点滅を指定する |
| text-decoration-color | 文字の装飾線の色を指定する |
| text-decoration-line | 文字の装飾線の位置を指定する |
| text-decoration-skip | 文字の装飾線について除外する対象を指定する |
| text-decoration-style | 文字の装飾線の種類を指定する |
| text-emphasis | 要素内のテキストに付与する強調マークに関する指定を行う |
| text-emphasis-color | 要素内のテキストに付与する強調マークの色を指定する |
| text-emphasis-position | 要素内のテキストに付与する強調マークの位置を指定する |
| text-emphasis-style | 要素内のテキストに強調マークを付与する |
| text-height | テキストの高さを指定する |
| text-indent | 文章のインデント幅を指定する |
| text-justify | 行の両端揃えの方法を指定する |
| text-orientation | 縦書き文章の文字の表示方向に関して指定する |
| text-overflow | 要素からはみ出した文字を省略する |
| text-shadow | 文字に影（ドロップシャドウ）を付ける |
| text-transform | テキストの大文字表示・小文字表示を指定する |
| text-underline-position | テキストのアンダーラインの位置を指定する |