「 」など特殊文字(文字実体参照)を使った空白について検証

スペースを連ねて空きを作ることは推奨されない

htmlで、文章の中に複数文字分の空きを作りたいときがあります。全角スペースを複数挿入すれば、簡単にその文字数分の空きができます。しかし、同じ箇所にスペースを連ねて空きを作ることは推奨されません。レイアウトに関してははmarginなどのcssを利用して構成することになります。

さらに、半角スペースの場合は、いくつ連ねても1つ分の空き

半角スペースは、いくつ連ねても、できる空きは1つ分のみになります。そこで、半角スペースと同じサイズの空きができる特殊文字(文字実体参照)の「 」を連ねる人がいます。「 」ならば、連ねて記述すると、その数だけスペースが入ります。しかし、これは「 」本来の使い方ではないため、推奨されません。

次のサンプル(薄紫色囲み部分)は、スペースを3つ連ねて挿入した例です。赤色の囲み部分がスペースです。

全角スペースを3つ挿入した例

ダミーテキスト   だみーてきすと

半角スペースを3つ挿入した例(表示は1つ分のみ)

ダミーテキスト だみーてきすと

「 」を3つ挿入した例(半角スペース3つ分の空き)

ダミーテキスト   だみーてきすと

「 」は単なる半角スペースではない

「 」は「non-break space」の略語を使った特殊文字で、自動改行を無効にするスペースになります。欧文において、自動改行されて読みにくくなってしまうケースを回避するために用いられます。

次のサンプル(薄紫色囲み部分)は、上が、「 」を不使用、下が、単語の「possession」の後ろに「 」(赤色の囲み部分)を使用した例です。「possession」の後ろで改行を無効にしたため、次の単語の「of」で改行することになりますが、桁溢れしてしい、その結果「possession」の前で改行することになります。

「 」不使用

A wonderful serenity has taken possession of my entire soul, like these…

「 」を使用

A wonderful serenity has taken possession of my entire soul, like these…

特殊文字には、「 」とは異なるスペースのサイズのものもある

  半角スペースよりやや狭いサイズ。
  半角スペースとほぼ同じサイズ。
  欧文の組版で、ラテン語の小文字の「n」を幅の基準にした「en」のサイズ。
  欧文の組版で、ラテン語の大文字の「M」を幅の基準にした「em」のサイズ。「en」の約2倍。

次のサンプルは、サイズの比較用です。「 」を基本にして、それぞれの特殊文字を使用したときのサイズ(赤色の囲み部分)の比較です。自動改行無効のサンプルと同じものを使っています。

「 」を使用した場合

A wonderful serenity has taken possessionof my entire soul, like these …

「 」(比較用)

A wonderful serenity has taken possession of my entire soul, like these…

「 」を使用した場合

A wonderful serenity has taken possessionof my entire soul, like these…

「 」を使用した場合

A wonderful serenity has taken possessionof my entire soul, like these…

 

人気の高いブログ投稿

メインメニュー

QRコード作成などのテスト

inserted by FC2 system