HTMLの異空間の特徴と表現を探る（推奨）

I. 概要

HTMLテンプレートを記述する際、テキストレイアウトの手段としてスペースを使用することがあります。多くの場合、テキストの段落間にスペースを挿入し、比較的離れた単語を区切ります。しかし、この場合、通常のスペース（半角スペース、すなわち英語入力方式でキーボードから直接入力するスペース）は使用しないのが普通です。このようなスペースを複数並べて入力して空白の段落を作ることを想定すると、ウェブページに表示される実際の空白の大きさはスペース1個分しかないので、通常は半角スペースを代わりに使用し、スペースを複数並べて入力するとそれに応じた個数の空白ができることになります。実はUnicodeには、異なる特性を持つHTMLエンティティを含む多数の空白文字も定義されており、この記事で比較的注目されていないのは、これらの空白文字とその特性の方です。

II. ユニコードのHTMLエンティティを持つスペース

HTMLエンティティーの形でUnicodeにスペースを持たせた場合の影響と、その結果の空白は次の通りです。

これらの空間は、その特徴から基本的に3つに分類することができます。

1. 改行されていないスペース

ノンブレイキングスペースは1種類しかなく、ブラウザが割り込みと判断しないことが最大の特徴であり、これが生まれた最大の理由です。以下、簡単に紹介します。

はノンブレイキングスペースを表現するための実体である。基本的には標準的なスペースで、主な違いは、ブラウザはこれが占める位置でテキスト行を改行（または折り返し）してはいけないということです。

例えば、「これは非改行スペースのテストです」という文章で、単語間のスペースをすべて半角スペースにして幅ギリギリの入れ物に入れると、「スペース」という単語は幅が足りないので別に改行されることになるのです。

破」と「空」を同時に改行したい場合は、「破」と「空」の間の半角スペースを次のように置き換えるだけです。

このように、「-」はまだブラウザが単語の区切り文字とみなしていますが、「破」と「スペース」はつながっており、改行されていないので、ブラウザはこれらを一つの完全な単語とみなして、位置が許せば同時に次の行に移動させます。

なお、大きな段落の英文を , で埋めてしまうと、ブラウザはどの文字が単語の始まりと終わりなのかを正しく認識できないため、いくら word-wrap や word-break などの CSS プロパティで単語の切れ目や改行を制御しても、単語の途中で改行することを避けられず、望ましい結果にならないことが多いのですが、この場合は、単語の途中で改行することはできません。そこで、段落内の異なる単語の間に連続したスペースがたくさんある場合は、その連続したスペースの最初の部分に通常の半角スペースを使用することで、単語がまだ適切に分離されていることを確認するのが最善です。

2. 文字サイズに合わせたスペースで、適切な余白を作る

このタイプには3つのスペース文字が含まれており、3つともフォントサイズに応じて、1/2em、1em、1/6em（1/5emに設計されることもある）の幅で対応する余白の大きさが決まっている。空白の大きさは次のように表される。

中国語は等幅フォントであり、結果としてスペースのサイズは中国語テキストのサイズと明確な比例関係にあるため（1つは中国語テキストの半分の幅に等しく、1つは中国語テキスト1つの幅）、こうしたスペースは、例えば、タイポグラフィを制御するのによく向いている。

3. ゼロ幅ハイフン制御のスペース

という2つのスペース文字は、空白を作らず、ハイフンを付けるかどうかだけを制御します。この2文字は「非印刷文字」（または「制御文字」）、つまり印刷効果に影響を与えない、文字特性制御のためだけの文字でもある。いわゆるハイフネーションは欧米のフォントでよく見られる現象で、2つの別々の文字がつながったときに新しい文字になることを意味する。例えばドイツ語では、"f "と "l "のハイフネーションが新しい文字となり、単語の意味合いが変わったり、文法的に成り立たなくなったりする。例えば

Auflage（編集）は、「auf」（約）と「lage」（位置）の2つの構成要素からなるドイツ語の複合語である。この単語をHTML上に直接書いてブラウザに任せると、次のような結果になる。

f "と "l "がつながっているのはドイツ語の文法に反するため、2文字の間に強制的な接続解除を挿入する必要があり、以下のような効果があります。

注意すべきは、すべてのブラウザがandに対応しているわけではないことです。現在、Chrome (44.0.2403.125) はこの2文字に対してハイフネーションやディスジャンクションの制御ができませんが、Safari (8.0.6) は有効なハイフネーション制御が可能です。

最後に、Unicodeには組版に使えるスペースに様々な特徴がありますが、理論的にはスペースは組版に使うべきではなく、CSSで制御すべきものであることを強調しておきます。スペースがタイポグラフィのために考慮されるべきなのは、CSSを使うのが不便な特別な場合（例えば、EMLの場合）だけである。

以上、HTMLにおける各種スペースの特徴や表現について少し紹介しました（推奨）。もし、何か質問があれば、メッセージを残してください。ここでまた、スクリプトハウスのウェブサイトをサポートしていただき、本当にありがとうございます