2015-09-10 10 views
15

HTML空白処理モデルをよりよく理解しようとしています。今私は2つのHTMLスニペットを比較しています:HTML空白:前後の空白<br>

<div>a <br>z</div> 

<div>a<br> z</div> 

renered最初のスニペットを、2本のラインが得られます"a ""z"を(したがって、最初の行は、末尾のスペースがあります。)

2つ目のスニペットは、"a""z"という2つの行を生成します。 2行目にはスペースがありません。

私の質問は:なぜですか?私は現在この参考書としてhttp://www.w3.org/TR/CSS2/text.html#white-space-modelを使用しています。行の先頭にスペース(U + 0020)は、それが削除され、「正常」に設定する「ホワイトスペース」、「NOWRAP」、または「前行」を持っている場合それは

  1. を述べて。
  2. すべてのタブ(U + 0009)は、次のタブストップを使用して次のグリフの開始エッジを並び替える水平シフトとしてレンダリングされます。タブ停止は、ブロックの開始コンテンツエッジからブロックのフォントにレンダリングされるスペース(U + 0020)の幅の8倍のポイントで発生します。
  3. 行末のスペース(U + 0020)に 'white-space'が 'normal'、 'nowrap'、または 'pre-line'に設定されている場合は、それも削除されます。
  4. 行末の空白(U + 0020)またはタブ(U + 0009)に「空白」が「事前折り返し」に設定されている場合、UAはそれらを視覚的に崩壊させることがあります。 (「空白」が「正常」である場合)

このナイーブな読み取りは、最初、空間ので、行の先頭又は端部が除去されること、ことを示します私のスニペットは後にスペースを作らなくてはなりません。しかし、そうではありません。

何が起こっているのですか?

私の現在の理論は、<br>が密かに "文字"としてカウントされ、最初のスニペットで後続のスペースがその行の "終わり"にならないようにすることです。しかし、私は本当に分かりません。

編集:明確にするには、&nbsp;を使用して自由にスペースを作成する方法を知っています。私の質問は、(いくつかの仕様に関して)上記の振る舞いを引き起こすルールについてです。

+0

https://drafts.c​​sswg.org/css-text/#white-space-phase-1、現在の仕様で、いくつかの洞察 – sideshowbarker

+0

@Vuckoを提供するかもしれない:それはそれはDOMインスペクタに表示される方法です、ではないことですかレンダリングされる。 – BoltClock

+0

@sideshowbarker:良い悲しみ。 CSSテキストの専門用語の量は、CSS2.1のテキストを子供の本のように読み込ませます。 – BoltClock

答えて

2

良い質問!私はChromeとFirefoxの両方で動作を確認し、そしてそれはまたwhite-space: pre-line条件で通常の改行によってトリガーだとして、それは、<br>とは何の関係もないことが確認されました:

<div style="white-space:pre-line">a 
z</div> 

私はsent an email to the list上の明確化を求めてきました実装に合わせるために仕様を変更する必要があるかどうか、ブラウザにバグをファイルして仕様に合わせるかどうかを調べることができます。