【39】単語間の間隔を指定する word-spacingプロパティ

word-spacingプロパティは、単語間の間隔を指定するプロパティです。
単語を分離するスペース（半角スペース）に対して「送り幅」を追加できます。

参考：
・CSS Text Module Level 3 | W3C Working Draft
・word-spacing - CSS | MDN

word-spacingプロパティの値

word-spacingプロパティの値
キーワード	normal がデフォルト値。追加のスペースは0です。
単位付き数値	単位を付けた数値で追加のスペースを指定。マイナスの値も使えます。
パーセンテージ	今のスペースに対してのパーセンテージで「追加のスペース」を指定します。 例えば、今のスペースの倍にしたければ「word-spacing: 100%」 マイナスの値も使えます。 例えば、今のスペースを０にしたければ「word-spacing: -100%」 （ただしこの値は W3C で「at-risk（リスクが有るので勧告候補で削除されるかも）」扱いになっています。）
グローバル値	text-indent: inherit; 親の値を継承（コレ書かなくても継承するけど） text-indent: initial; 継承した親の値を解消しデフォルト値に戻す text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

word-spacingプロパティの値は、white-spaceプロパティによる「空白処理（複数のホワイトスペースを1つに詰めるかそのままにするかなど）」が済んだ後、単語の間の「単語分離子文字」の両側に半分ずつ適用されるんだそうです。

単語分離子文字（word-separator character）

単語を分離するための文字のことですが、「半角スペース」だと思ってていいかも。
日本語でも「半角スペース」を使えば、word-spacingプロパティが使えます。

word-spacingでよく使う「単語分離子文字」のユニコード（Unicode）です。

Unicode	HTMLでの 特殊文字	備考
U+0020	   	普通に「スペースバー」を押してできる半角スペース
U+00A0	     	no-break space（分断不可スペース） スペース箇所での自然改行を避けたい時に使う

この他に、U+10100、U+10101、U+1361、U+1039F、U+1091F が「単語分離子文字（word-separator character）」だそうで、word-spacingプロパティの対象です。

word-spacingプロパティの指定サンプル

word-spacingプロパティの指定例です。
パーセンテージの値は Firefoxくらいしか実装していないようです。

word-spacing: 未指定（= normal） This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

word-spacing: .5em This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

word-spacing: -2px This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

word-spacing: 100% This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

word-spacing: -100% This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

サンプルの HTMLはこんなかんじです。
word-spacingプロパティは HTMLにインラインで書いています。

<div class="mihon">
  <b>word-spacing: 未指定（= normal）</b>
  This property specifies additional spacing between "words". 
  この プロパティは 追加の間隔を "単語" の間に 指定します。 
</div>

<div class="mihon" style="word-spacing:.5em">（テキストは省略）</div>
<div class="mihon" style="word-spacing:-2px">（テキストは省略）</div>
<div class="mihon" style="word-spacing:100%">（テキストは省略）</div>
<div class="mihon" style="word-spacing:-100%">（テキストは省略）</div>

サンプルの CSSはこんなかんじ。

.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	width:60%;
	}
.mihon b {
	display:block;
	color:#579961;
	word-spacing:normal}
/*word-spacingの各指定はdiv要素に直接style属性で書いています*/

英文でスペースが詰まって見えるフォントの場合に、単語間をあけて読みやすくするためにこの word-spacingプロパティを使うかんじかな。
日本語だとあんまり使う機会はないように感じますけどね。

次回予告

さて次回は、letter-spacingプロパティを使おう。
今回の word-spacing は「単語間」のスペースを調整しましたが、letter-spacingプロパティは「文字間」のスペースを調整します。
1文字ずつ均等に空けたり詰めたりできるプロパティです。