[新着] Webテンプレートを仮オープンしました
text-autospace は、文章中の日本語等とアルファベット等(または数字や半角の括弧)との間隔を指定するプロパティです。
p {
text-autospace: ideograph-alpha;
}
| text-autospace | ideograph-alpha … (日本語等とアルファベット等との間に隙間を入れる) |
|---|---|
| ideograph-numeric … (日本語等と数字との間に隙間を入れる) | |
| ideograph-parenthesis … (日本語等と半角括弧との間に隙間を入れる) | |
| ideograph-space … (隙間を多めに入れる) | |
| none … (隙間を入れません)デフォルト |
※隙間は非常に小さいので、よく見ないと違いがわかりません。
※ ideograph-space の指定は、IE6では内容に変化が見られませんでした。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { font-size: 180%; }
#example1 { text-autospace: ideograph-alpha; }
#example2 { text-autospace: ideograph-numeric; }
#example3 { text-autospace: ideograph-parenthesis; }
#example4 { text-autospace: ideograph-space; }
.none { text-autospace: none; }
-->
</style>
</head>
<body>
<p class="none">■none<br>日本語ENGLISH日本語ENGLISH</p>
<p id="example1">■ideograph-alpha<br>日本語ENGLISH日本語ENGLISH</p>
<p class="none">■none<br>日本語1日本語2日本語3日本語4</p>
<p id="example2">■ideograph-numeric<br>日本語1日本語2日本語3日本語4</p>
<p class="none">■none<br>(括弧)日本語(括弧)日本語(括弧)日本語</p>
<p id="example3">■ideograph-parenthesis<br>(括弧)日本語(括弧)日本語(括弧)日本語</p>
<p class="none">■none<br>日本語ENGLISH日本語ENGLISH</p>
<p id="example4">■ideograph-space<br>日本語ENGLISH日本語ENGLISH</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
■none
日本語ENGLISH日本語ENGLISH
■ideograph-alpha
日本語ENGLISH日本語ENGLISH
■none
日本語1日本語2日本語3日本語4
■ideograph-numeric
日本語1日本語2日本語3日本語4
■none
(括弧)日本語(括弧)日本語(括弧)日本語
■ideograph-parenthesis
(括弧)日本語(括弧)日本語(括弧)日本語
■none
日本語ENGLISH日本語ENGLISH
■ideograph-space
日本語ENGLISH日本語ENGLISH
※違いを分かりやすくするため、文字を大きめに表示しています。