letter-spacing CSS2.2CSS3
letter-spacing は、文字と文字との間隔を指定する時に使います。tracking とも呼ばれます。 letter-spacing は双方向性(文字が流れる方向、左→右と右→左が混在するテキスト)の並び替えの後に適用され、 word-spacing(単語間隔)による指定もある場合は、それに追加される形となります。 連続した atomic インライン (画像やインラインブロックなどで分割できないもの)は、単一の文字単位として扱われます。 また、letter-spacing は行頭や行末に適用してはいけません。
名前 | : | letter-spacing |
値 | : | normal | <length> |
初期値 | : | normal |
適用対象 | : | 全ての要素 |
継承 | : | する |
パーセンテージ | : | n/a |
メディア | : | visual(視覚的) |
計算値 | : | 絶対的な長さ |
正規順序 | : | n/a |
アニメーション | : | length(長さとして) |
Value(値)
- normal
- 初期値 標準の文字間隔
- <length>
- 数値+単位で指定。負の値は制限があるかもしれない。
- inherit
- 親要素の値を継承する
HTML source
<!DOCTYPE html> <html> <head> <title></title> <style> p.test1 { letter-spacing: 1px; } p.test2 { letter-spacing: 1em; } p.test3 { letter-spacing: 1ex; } p.test4 { letter-spacing: 1pt; } p.test5 { letter-spacing: 1mm; } p.test6 { letter-spacing: 1cm; } p.test7 { letter-spacing: 1in; } p.test8 { letter-spacing: 1pc; } </style> </head> <body> <p class="test1">PXPX</p> <p class="test2">EMEM</p> <p class="test3">EXEX</p> <p class="test4">PTPT</p> <p class="test5">MMMM</p> <p class="test6">CMCM</p> <p class="test7">ININ</p> <p class="test8">PCPC</p> </body> </html>
display
PXPX
EMEM
EXEX
PTPT
MMMM
CMCM
ININ
PCPC
例
letter-spacing は行頭や行末に適用されないため、テキストは常にブロックのエッジにフィットするように処理されます。
p { letter-spacing: 1em; } <p>abc</p>
○ text-align:left を追加
abc |
○ text-align:right を追加
指定通りはサポート外 | <正しい表示> |
---|---|
abc |
a b c |
指定された letter-spacing の値は、指定された要素内に完全に含まれる文字間の間隔にのみ影響します。
p { letter-spacing: 1em; } span { letter-spacing: 2em; } <p>a<span>bb</span>c</p>
指定通りはサポート外 | <正しい表示> |
---|---|
abbc |
abb c |
1文字だけを含む要素に文字間隔を適用しても、レンダリング結果には何の影響も与えません。
p { letter-spacing: 1em; } span { letter-spacing: 2em; } <p>a<span>b</span>c</p>
指定通りはサポート外 | <正しい表示> |
---|---|
abc |
ab c |
インラインボックスには、 その要素内に完全に含まれる文字間の文字間隔だけが含まれます。 文字の右端または後端に文字間隔を含めることは間違いになります。
p { letter-spacing: 1em; } <p>a<span>bb</span>c</p>
指定通りはサポート外 | <正しい表示> |
---|---|
abbc |
abb c |
letter-spacing は双方向性による並べ替えの後に挿入されます。 下の例では、abc とヘブライ文字 alef(א)bet(ב)gimel(ג)が並べられています。 並べ替えにより、abc は左→右、ヘブライ文字は右→左に逆順で並べ替えられるため 「c」が「א」の隣に並びません。従って、下の span に適用される letter-spacing:2em は無効となります。
p { letter-spacing: 1em; } span { letter-spacing: 2em; } <p>ab<span>cא</span>גב</p>
指定通りはサポート外 | <正しい表示> |
---|---|
abcאגב |
abc אבג |