ぱたぱたアニメ館word-spacing CSS3
word-spacing は、単語と単語との間隔を指定する時に使います。 単語間隔のアルゴリズムは UA に依存します。 word-spacing は両端揃えの影響を受けることもあります。（text-align プロパティ参照） 負の値は制限があるかもしれません。
| 名前 | : | word-spacing |
| 値 | : | normal | <length-percentage> |
| 初期値 | : | normal |
| 適用対象 | : | 全ての要素 |
| 継承 | : | する |
| パーセンテージ | : | 影響されたグリフの幅を参照 |
| メディア | : | visual（視覚的） |
| 計算値 | : | <length>は絶対、他は指定通り |
| 正規順序 | : | n/a |
| アニメーション | : | 長さ、パーセンテージまたは calc 式 |
Value（値）
- normal
- 初期値 標準の単語間隔
- <length>
- 数値＋単位で指定。 デフォルトの単語間隔に加えて単語間隔を指定する。
- <percentage>
- 数値＋％で指定。影響される文字のアドバンス幅（グリフの開始位置から次のグリフの開始位置までの距離）のパーセンテージとして追加の間隔を指定する。
例
英語の各スペースの幅を2倍に、アラビア語の単語間の全てのスペースをゼロ幅にします。
:lang(ar) { word-spacing: -100%; }
:lang(en) { word-spacing: 100%; }
単語間隔に "0"グリフの幅の半分を追加します。参照： [CSS-VALUES-3]
span { word-spacing: 0.5ch; }
＜表示＞
| 英語 normal | アラビア語 normal |
| apple peach banana strawberry | تفاحة خوخ موز الفراولة |
| 英語 { word-spacing: 100%; } | アラビア語 { word-spacing: -100%; } |
| apple peach banana strawberry | تفاحة خوخ موز الفراولة |
| span { word-spacing: 0.5ch; } | |
| apple peach banana strawberry |
word-spacing CSS2.2
名前 : word-spacing 値 :
normal | <length> | inherit
初期値 : normal 適用対象 : 全ての要素 継承 : する パーセンテージ : n/a メディア : visual（視覚的） 計算値 : normalの値は0、その他は絶対的長さ
Value（値）
- normal
- 初期値 標準の単語間隔
- <length>
- 数値＋単位で指定。
単語間のデフォルトの間隔に加えて単語間の間隔を指定する。負の値は制限があるかもしれない。
- inherit
- 親要素の値を継承する
HTML source
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 { word-spacing: 1px; }
p.test2 { word-spacing: 1em; }
p.test3 { word-spacing: 1ex; }
p.test4 { word-spacing: 1pt; }
p.test5 { word-spacing: 1mm; }
p.test6 { word-spacing: 1cm; }
p.test7 { word-spacing: 1in; }
p.test8 { word-spacing: 1pc; }
</style>
</head>
<body>
<p class="test1">PX PX PX</p>
<p class="test2">EM EM EM</p>
<p class="test3">EX EX EX</p>
<p class="test4">PT PT PT</p>
<p class="test5">MM MM MM</p>
<p class="test6">CM CM CM</p>
<p class="test7">IN IN IN</p>
<p class="test8">PC PC PC</p>
</body>
</html>
display
PX PX PX
EM EM EM
EX EX EX
PT PT PT
MM MM MM
CM CM CM
IN IN IN
PC PC PC
| 名前 | : | word-spacing |
| 値 | : | normal | <length> | inherit |
| 初期値 | : | normal |
| 適用対象 | : | 全ての要素 |
| 継承 | : | する |
| パーセンテージ | : | n/a |
| メディア | : | visual（視覚的） |
| 計算値 | : | normalの値は0、その他は絶対的長さ |
Value（値）
- normal
- 初期値 標準の単語間隔
- <length>
- 数値＋単位で指定。 単語間のデフォルトの間隔に加えて単語間の間隔を指定する。負の値は制限があるかもしれない。
- inherit
- 親要素の値を継承する
HTML source
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 { word-spacing: 1px; }
p.test2 { word-spacing: 1em; }
p.test3 { word-spacing: 1ex; }
p.test4 { word-spacing: 1pt; }
p.test5 { word-spacing: 1mm; }
p.test6 { word-spacing: 1cm; }
p.test7 { word-spacing: 1in; }
p.test8 { word-spacing: 1pc; }
</style>
</head>
<body>
<p class="test1">PX PX PX</p>
<p class="test2">EM EM EM</p>
<p class="test3">EX EX EX</p>
<p class="test4">PT PT PT</p>
<p class="test5">MM MM MM</p>
<p class="test6">CM CM CM</p>
<p class="test7">IN IN IN</p>
<p class="test8">PC PC PC</p>
</body>
</html>
display
PX PX PX
EM EM EM
EX EX EX
PT PT PT
MM MM MM
CM CM CM
IN IN IN
PC PC PC
