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」、または「前行」を持っている場合それは
- を述べて。
- すべてのタブ(U + 0009)は、次のタブストップを使用して次のグリフの開始エッジを並び替える水平シフトとしてレンダリングされます。タブ停止は、ブロックの開始コンテンツエッジからブロックのフォントにレンダリングされるスペース(U + 0020)の幅の8倍のポイントで発生します。
- 行末のスペース(U + 0020)に 'white-space'が 'normal'、 'nowrap'、または 'pre-line'に設定されている場合は、それも削除されます。
- 行末の空白(U + 0020)またはタブ(U + 0009)に「空白」が「事前折り返し」に設定されている場合、UAはそれらを視覚的に崩壊させることがあります。 (「空白」が「正常」である場合)
このナイーブな読み取りは、最初、空間ので、行の先頭又は端部が除去されること、ことを示します私のスニペットは後にスペースを作らなくてはなりません。しかし、そうではありません。
何が起こっているのですか?
私の現在の理論は、<br>
が密かに "文字"としてカウントされ、最初のスニペットで後続のスペースがその行の "終わり"にならないようにすることです。しかし、私は本当に分かりません。
編集:明確にするには、
を使用して自由にスペースを作成する方法を知っています。私の質問は、(いくつかの仕様に関して)上記の振る舞いを引き起こすルールについてです。
https://drafts.csswg.org/css-text/#white-space-phase-1、現在の仕様で、いくつかの洞察 – sideshowbarker
@Vuckoを提供するかもしれない:それはそれはDOMインスペクタに表示される方法です、ではないことですかレンダリングされる。 – BoltClock
@sideshowbarker:良い悲しみ。 CSSテキストの専門用語の量は、CSS2.1のテキストを子供の本のように読み込ませます。 – BoltClock