html - 文の間隔

Question

([X]HTML+CSS を使用して) 文の間に追加する必要がある追加のスペースを表示する最良の方法は何ですか?

<p>Lorem ipsum.  Dolor sit amet.</p>
               ^^ wider than word spacing

HTML と XML はどちらも空白の折りたたみを必要とするため、上記の 2 つのスペースは単一のスペースとして動作する必要があります。

どのようなオプションがありますか? 以下にいくつかの明白なものがありますが、他には何がありますか? (CSS3 には何かありますか?) 異なるブラウザー間を含め、これらに存在する場合、どのような欠点がありますか? (以下の非改行スペースは行の折り返しとどのように相互作用しますか?)

• ..ipsum.  Dolor..
• ..ipsum.  Dolor..
• ..ipsum.  Dolor..

---

これがタイプライターのために発明されたと主張する FUD がネット上にたくさんありますが、米国独立宣言などの文書でそれを見ることができます。(もちろん、200 年以上前のすべての規則に従うべきではないことも理解しています。DoI は、これがタイプライターや等幅フォントよりも前からあることを示す便利な例にすぎません。) または、追加のスペースが気を散らすと主張するタイポグラファー —変更後背景色なので、例は他のものにはなりません!

率直に言えば、追加のスペースを使用するかどうかについての意見や議論は歓迎しますが (これはプログラミングとは関係ありません)、それは私が求めていることではありません。これが要件であると仮定すると、それを実装する最良の方法は何ですか?

Answer 1

white-space: pre-wrapテキストを折り返しながら、一連のスペースを保持するために使用できます。

<p style="white-space: pre-wrap;">Lorem ipsum.  Dolor sit amet.</p>

これは、IE 8 モードの IE 8 まで IE ではサポートされず、Firefox では 3.0 までサポートされていません。

1 つまたは 1 つの幅のスペースに orを使用することもできます。これらがどの程度広くサポートされているかはわかりませんが、Mac OS X 上の最新の WebKit と Firefox で動作するようです。 emen

2 文字のシーケンスは 、そのスペースでの改行を防ぎます。それが 改行しないスペースです。このシーケンスA sentence.  Another.により、 が 2 行目に表示され、テキストがわずかにインデントされますが、これはおそらく望ましくありません。このシーケンスA sentence.  Another.は、行を分割し、余分なインデントを追加せずに正常に機能しますが、両端揃えのテキストで 行末に を使用すると、その行が適切に揃えられなくなります。 のような誰かの名前を書く場合Mr. Torvalds、または で終わる略語を書く場合を対象としています。この場合.、人々が混乱したり、文が終わったと考えたりするのを避けるために、複数の行に分割してはならないという表記規則があります。

したがって、シーケンスの使用 は望ましくありません。これは文体上の効果であるため、 を使用することをお勧めしwhite-space: pre-wrapます。サポートされていないプラットフォームでは、スタイルが理想的とは言えません。

edit : コメントで指摘されているように、white-space: pre-wrapでは機能しませんtext-align: justify。ただし、BrowserShotsを使用してさまざまなエンティティのサンプラーをテストしました(不快な広告、やや不安定で遅いですが、無料の価格ではかなり便利なサービスです)。かなり多種多様なプラットフォーム上でかなり多種多様なブラウザのように見えます. 、ボックスとして。BrowserShots では、必要なブラウザーと OS の組み合わせを正確に選択することはできないため、XP で IE 6 を選択して違いがあるかどうかを確認することはできません。したがって、Win2K (およびおそらく XP) で IE 6 が壊れた状態で生活できる限り、これはもっともらしい答えです。  

別の可能な解決策は、「.」文字の組み合わせのカーニング ペアを持つフォントを検索 (または作成) して、それらをより広くカーニングすることです。この@font-face時点で、IE 5.5 までの IE を含むすべての主要なブラウザーでサポートされているため (ただし、IE は他のブラウザーとは異なる形式を使用します)、実際には独自のフォントを使用することが合理的になり、そうでない場合はユーザーの既定のフォントにフォールバックします。サポートされているため、何も壊れません。

最後の可能性としては、CSS 委員会にスタイル機能を追加してもらい、文末の間隔を広くしたい (これは、ピリオドとそれに続くスペースによって決定されます。頭字語と略語には . より広いスペースを取得しないようにするため)。CSS 委員会は現在、より高度なタイポグラフィのサポートを追加することについて議論しているため、そのような機能について議論を始めるには今が良い時期かもしれません.

Answer 2

「時代遅れ」で「モノスペースのみ」の否定論者のすべてのために - 本を読んでください。プロの出版社は、 昔から文間にシングルを使用してきました。これが、モノスペース 2 スペース標準の由来です。事実に基づかないレトリックを吐き出すのではなく、歴史から学びましょう。 ただし、ほとんどのブラウザではan の方が見栄えが良いことは認めざるを得ません: は幅が広すぎます。この段落の読みやすさについてどう思いますか? Stackoverflow のエディターでは一部の HTML が許可されており、私は すべての文の間に使用しています。

Answer 3

各文をスパンでラップし、おそらくスパンのスタイルを設定します。（素晴らしい解決策ではありません）。

Answer 4

あなたの目標がデフォルトのブラウザーの空白実装をオーバーライドして「適切な」文の間隔を提供することである場合、適切な間隔を構成するものについて実際にいくつかの議論があることをそこに捨てたかっただけです。ダブルスペースの「標準」は、タイプライターがモノスペース フォントを使用していた時代からの持ち越しである可能性が高いようです。お金の見積もり:

結論: プロのタイプセッター、デザイナー、およびデスクトップ パブリッシャーは、1 つのスペースのみを使用する必要があります。タイプライティング、電子メール、ターム ペーパー (使用しているスタイル ガイドで規定されている場合)、または個人的な通信用にダブル スペースを保存します。他のすべての人のために、気分が良くなるものは何でもしてください。

これが厳密な要件である場合を除き、「修正」しようとする価値はないようです。（これはあなたが述べた質問自体に対する回答ではないことは承知していますが、この情報に多くの時間を費やすという決定に影響を与える可能性があるため、この情報を認識していることを確認してください。）

Answer 5

 意味的に言えば、使用する正しい文字ではありません。これは非改行スペースです: 改行として使用されないスペースです。おそらく、 a または singleのスペースを使用するか 、または (私の個人的な推奨事項) ページの時代遅れのダブルスペース スタイルを気にしないでください。

Answer 6

  正当化を妨害するため、考えられる最悪の方法です。提案されているように事前にラップすると、大まかな制御が可能になりますが、正当化できません。&thinspace; のような他のスペース エンティティがあります。&nspace; と、Unicode のスペース文字の束と同様に、より適切な制御を提供し、正当性を壊してはなりません。私の意見では、これらのエンティティは CSS 以外の最良のソリューションです。

より適切に制御するには、CSS ソリューションが必要です。当然の選択ですが、文をまたがるか、文間のスペースをまたがることができます。後者はもっと間違っているように思えますが、特に一般的な 2 つのスペースを入力する習慣がある場合は、簡単に達成できます。すべてのピリオド-スペース-スペースを検索して、スペースの周りのスパンに置き換えるだけです。ブロガーのためにオンザフライでこれを行うJavaScriptがいくつかあります。

ボックス モデル (padding-right) は使用しないでください。完全に揃えられたテキストの右マージンが壊れてしまうためです (完全に揃えられていなくても、行が「早く」折り返されます)。文間のスペースにまたがっている場合は、これらの要素の単語の間隔を変更するだけです。文を折り返す場合は、段落またはその他のコンテナーの単語間隔を大きくして、文を通常の状態に戻すか、after セレクターを使用してワンステップで行うことができます。

.your_sentence_class:after { content:" "; 単語間隔:0.5em; }