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 אבג
上に戻る