2015-09-10 30 views
15

Sto cercando di capire meglio il modello di elaborazione degli spazi bianchi HTML. In questo momento sto confrontando due frammenti di codice HTML:Spazio vuoto HTML: spazi prima e dopo <br>

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

e

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

Il primo frammento, quando renered, produce due linee: "a " e "z" (Così la prima linea ha uno spazio finale.)

Il secondo snippet produce due righe: "a" e "z". Non c'è spazio principale sulla seconda riga.

La mia domanda è: perché? Attualmente sto usando questo http://www.w3.org/TR/CSS2/text.html#white-space-model come riferimento. Si afferma

  1. Se uno spazio (U + 0020) all'inizio di una riga ha 'white-space' impostato a 'normale', 'nowrap', o 'pre-line', viene rimosso .
  2. Tutte le schede (U + 0009) vengono visualizzate come uno spostamento orizzontale che allinea il bordo iniziale del glifo successivo con il successivo punto di tabulazione. I punti di tabulazione si verificano in punti multipli di 8 volte la larghezza di uno spazio (U + 0020) visualizzati nel carattere del blocco dal bordo del contenuto iniziale del blocco.
  3. Se uno spazio (U + 0020) alla fine di una riga ha lo "spazio bianco" impostato su "normale", "nowrap" o "pre-line", viene rimosso anche.
  4. Se gli spazi (U + 0020) o schede (U + 0009) alla fine di una riga hanno 'spazio bianco' impostato su 'pre-wrap', gli UA potrebbero comprimerli visivamente.

Una lettura naive di questo indicherebbe che, poiché uno spazio che all'inizio o fine di una riga deve essere rimosso (ove 'white-space' è 'normale'), la prima delle i miei frammenti non dovrebbero comportare uno spazio finale. Ma non è questo il caso.

Quindi cosa sta succedendo?

La mia teoria corrente è che lo <br> è segretamente contato come un "carattere" che, nel primo frammento, impedisce che lo spazio finale si trovi alla "fine" della sua linea. Ma davvero non ne ho idea.

MODIFICA: per essere chiari, so come usare &nbsp; per creare spazi a volontà. La mia domanda è su quale regola (rispetto ad alcune specifiche) induce il comportamento di cui sopra.

+0

https://drafts.csswg.org/css-text/#white-space-phase-1, la specifica attuale, potrebbe fornire alcuni approfondimenti – sideshowbarker

+0

@Vucko: Ecco come appare nell'ispettore DOM, non come è reso. – BoltClock

+0

@sideshowbarker: buon dolore. La quantità di gergo nel testo css rende il testo CSS2.1 letto come un libro per bambini. – BoltClock

risposta

2

Buona domanda! Ho confermato il comportamento sia in Chrome e Firefox, e ha confermato che non ha nulla a che fare con <br>, come è innescato anche da un'interruzione di riga ordinario white-space: pre-line condizioni:

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

Sono sent an email to the list chiedere chiarimenti su questo problema, e chiedendo se dovremmo cambiare le specifiche per far corrispondere le implementazioni, o file bug sui browser per abbinare le specifiche.