HTML でさまざまなスペースの特徴と表現を探る (推奨)

I. 概要

HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用されることがあります。最も一般的な状況は、比較的独立した単語を区切るためにテキストの段落間にスペースを挿入することです。ただし、このような状況では、通常のスペース（半角スペース、つまり英語入力方式でキーボードから直接入力したスペース）を直接使用することは通常ありません。これは、このようなスペースを連続して入力して空白スペースを作成すると、最終的な Web ページに表示される実際の空白スペースのサイズが 1 つのスペースのサイズにすぎないためです。したがって、通常は半角スペースを置き換えるために使用されます。複数のスペースを連続して入力すると、対応する数の空白スペースが生成されます。実際、Unicode に加えて、Unicode では HTML エンティティ フォームなど、さまざまな特性を持つ多数のスペース文字も定義されています。この記事では、比較的注目されていないこれらのスペースとその特性について説明します。

2. UnicodeのHTMLエンティティフォームにスペースがある

以下は、HTML エンティティ フォームでの Unicode のスペースと、その結果生じる空白の効果です。

これらのスペースは、その特性に応じて 3 つのカテゴリに分類できます。

1. 改行なし

ノーブレークスペースは 1 種類のみで、その最も重要な特徴は、ブラウザによって途中で中断できると判断されないことであり、これがノーブレークスペースの作成の主な目的でもあります。以下に簡単な紹介をします。

は、改行なしスペースを表すために使用されるエンティティです。基本的には標準スペースですが、主な違いは、ブラウザーが、このスペースがある位置でテキストの行を改行 (または折り返し) してはならないことです。

たとえば、「これは改行なしスペースのテストです」という文章で、単語間に半角スペースが使用され、その文章が幅が足りないコンテナ内に配置されている場合、幅が足りないため「スペース」という単語が独自の行に折り返されます。

「breaking」と「space」を同時に折り返したい場合は、「breaking」と「space」の間の半角スペースを次のように置き換えるだけです。

「-」などの一般的な文字は、ブラウザによって単語の区切り文字として引き続き認識され、「breaking」と「space」は接続されていて中断されないため、ブラウザはそれらを完全な単語と認識し、位置が許せば同時に次の行に移動することがわかります。

英語のテキストの長い段落ですべてスペースを使用すると、ブラウザはどの文字が単語の始まりと終わりであるかを正しく識別できないことに注意してください。したがって、word-wrap や word-break などの CSS プロパティを使用して単語の区切りや改行を制御する方法に関係なく、単語の途中で単語が分割されるのを避けるのは難しく、多くの場合、望ましい結果にはなりません。したがって、段落内の異なる単語の間に連続するスペースが多数ある場合は、単語間の間隔が通常どおり確保されるように、連続するスペースの最初のスペースとして通常の半角スペースを使用することをお勧めします。

2. フォントサイズに応じて空白スペースを生成する

このタイプのスペースには 3 つのスペース文字が含まれており、これらの 3 つのスペースは、さまざまなフォント サイズ (つまり、1/2 em、1em、1/6em (場合によっては 1/5em に設計されている)) に応じて対応する空白サイズを生成します。空白のサイズは次の図に示されています。

中国語は等幅フォントであるため、生成される空白スペースのサイズは中国語の文字のサイズと明確な比例関係にあります (一方は中国語の文字の半分の幅に等しく、もう一方は中国語の文字の幅に等しい)。そのため、このタイプのスペースは、たとえば、組版を制御するのに非常に適しています。

3. ゼロ幅合字はスペースを制御する

つまり、 ‌ と ‍ 、これら 2 つのスペース文字は空白を生成せず、文字が接続されているかどうかを制御することしかできません。これら 2 つの文字は「非印刷文字」（または「制御文字」）でもあります。つまり、印刷効果には影響せず、文字の特性を制御するためにのみ使用されます。いわゆる合字は西洋フォントでは一般的な現象で、2 つの別々の文字をつなげて新しい文字を形成できることを意味します。たとえば、ドイツ語では、「f」と「l」をつなげると新しい文字が作成され、単語全体の意味が変わったり、文法的に正しくなくなったりします。例えば：

Auf‌lage (編集) はドイツ語の合成語で、「auf」(約) と「lage」(場所) の 2 つの要素で構成されています。ドイツ語の文法では、合成語の要素の境界をハイフンで区切ることはできないため、「f」と「l」の間にハイフンを入れることはできません。この単語を HTML に直接記述し、ブラウザーで直接制御すると、次の効果が得られます。

「f」と「l」がつながっていますが、これはドイツ語の文法仕様に準拠していません。そのため、2 つの文字の間に強制的にハイフン以外の文字が挿入されます。効果は次のようになります。

すべてのブラウザが ‌ と ‍ を感知するわけではないことに注意してください。現在、Chrome (44.0.2403.125) では、これら 2 つの文字を制御してハイフネーションまたは非ハイフネーションを生成することはできませんが、Safari (8.0.6) ではハイフネーションを効果的に制御できます。

最後に、Unicode にはタイプセットに使用できるさまざまな特性を持つスペースがありますが、理論的にはスペースをタイプセットに使用すべきではないことを強調しておくことが重要です。タイプセットは CSS によって制御する必要があります。タイプセットに使用されるスペースはコンテンツに属しておらず、コンテンツと混在しているため、実際には維持するのが非常に困難です。 CSS を使用するのが不便な特別な場合 (EML など) にのみ、タイプセットにスペースを考慮する必要があります。

以上が、私が皆さんに紹介した HTML のさまざまなスペースの特徴と表現です (推奨)。皆さんのお役に立てれば幸いです。ご質問があれば、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。