Display spaces in the browser

Question

I recently edited another user's code, and I noticed that spaces were used something like this:

<div>Some text &nbsp; &nbsp; &nbsp; Some other text</div> 

Naturally, I assumed that the browser will combine the extra spaces, so in reality these are just four spaces. Testing this out - though it's actually 7 spaces (at least in chrome)! This is because the browser displays both the spaces between spaces and nbsp; spaces nbsp; .

So my question is when will the browser display empty space, and when will it be? In other words, when will one whitespace be displayed against an ignored one?

JSFiddle Demo: http://jsfiddle.net/L7x7t/3/

Answer 1

Browsers collapse only consecutive space characters. Text processing is mainly determined by the CSS specification, not the HTML specification (with exceptions); regarding the collapse of spaces, section 16.6.1 of CSS2.1 contains information. In particular:

any space (U + 0020) that follows another space (U + 0020) - even the space in front of the built-in, if this space also has a "white space" set to "normal", "nowrap" or "pre-line" '- deleted.

Since there is an inextricable space that separates every two space characters that would otherwise be consecutive (and inextricable spaces are not considered “regular” space characters), the browser does not have the ability to collapse any of them, and therefore render them all in sequence.

The behavior in browsers is basically identical, with the exception of a nasty bug in Chrome regarding the "space before inline" part .

Answer 2

As far as I know, the rule is simple: more than 1 white space, one after the other, is always displayed as 1 white space. If you want to display more, you need to use the   .

So, if you have some code ([spaces] here are standard spaces)

 [whitespace][whitespace] 

the browser displays only one space

but if you

 [whitespace] [whitespace] 

the browser will display 3 white spaces, because regular white spaces are separated by optional  

This rule does not apply to the version of the entity, therefore, if you have

    

2 white spaces will be created

Answer 3

From the W3C Recommendation:

4.7. White space handling in attribute values

When user agents process attributes, they do so in accordance with section 3.3.3 of [XML]:

Separate the top and trailing spaces. Match sequences of one or more space characters (including line breaks) into a single interlayer space. Spaces between tags see Section 3.2. Criteria 9:

3.2. User Agent Alignment

[1-8 snipped]

• White space is processed in accordance with the following rules. The following characters are defined in space characters [XML]:

SPACE () HORIZONTAL TABULATION () CARRIAGE RETURN () LINE FEED () The XML processor normalizes the end-line codes of various systems into a single LINE FEED character, which is transmitted before the application.

The user agent must use the CSS definition to handle whitespace [CSS2]. Note that CSS2's recommendation does not explicitly address the issue of handling spaces in non-Latin character sets. This will be discussed in a future version of CSS, after which this link will be updated.

See also section C.15:

P .15. White space characters in HTML and XML

Some characters that are legal in HTML documents are illegal in an XML document. For example, in HTML a Formfeed character (U + 000C) is treated as a space, in XHTML, because of the XML characters of the characters, it is illegal.