【text-autospace】アルファベットとの間隔を指定する

text-autospaceプロパティでは、アルファベットや日本語などが混じったテキストを見やすくするために、空白(間隔)を追加することができます。 例えば表意文字(日本語、中国語、韓国語など)と非表意文字・数字(アルファベットなど)との間隔を指定したい場合などに使用します。

またnone以外の値は、半角スペースで区切って複数指定することができます。

なおtext-autospaceプロパティは、Internet Explorer独自の機能となります。

書式

  • text-autospace : ……… アルファベットなどとの間隔を指定する

★:none、ideograph-alpha、ideograph-numeric、他下記参照

none
余分な間隔を追加しません
ideograph-alpha
日本語、中国語、韓国語などの表意文字列と、そうでないアルファベット(ラテン語、アラビア語など)との間に間隔(空白)を追加します
ideograph-numeric
日本語、中国語、韓国語などの表意文字と、数字との間に間隔(空白)を追加します
ideograph-parenthesis
日本語、中国語、韓国語などの表意文字と、半角の括弧()との間に間隔(空白)を追加します
ideograph-space
日本語、中国語、韓国語などの表意文字に挟まれている間隔の幅を拡げます

使用した時の例

.sample1 {text-autospace: none;}
.sample2 {text-autospace: ideograph-alpha;}
.sample3 {text-autospace: ideograph-numeric;}
.sample4 {text-autospace: ideograph-parenthesis;}
.sample5 {text-autospace: ideograph-space;}
.sample6 {text-autospace: ideograph-space ideograph-numeric;}
<h4>none</h4>
<div class="sample1">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>
<h4>ideograph-alpha</h4>
<div class="sample2">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>
<h4>ideograph-numeric</h4>
<div class="sample3">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>
<h4>ideograph-parenthesis</h4>
<div class="sample4">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>
<h4>ideograph-space</h4>
<div class="sample5">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>
<h4>ideograph-space ideograph-numeric</h4>
<div class="sample6">漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字</div>

ブラウザ上の表示例

none

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

ideograph-alpha

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

ideograph-numeric

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

ideograph-parenthesis

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

ideograph-space

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

ideograph-space ideograph-numeric

漢字ABC漢字abc漢字123漢字(括弧部分)漢字 漢字 漢字

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer5.5~

関連情報