Search code examples
htmlfirebugdom

HTML DOM: do carriage returns/tabs translate to spaces?

Please take a look at this image:

On the top left, notice how HelloWorld does not have a space between them, while Foo Bar does. The right side shows the mark up; there is no space after Foo or before Bar; just a carriage return and a few tabs. The bottom left shows what the DOM is (per Firebug).

Question: what is there a space between Foo and Bar?

NOTE: here it is on JSFiddle, but it seems to have converted the tabs into spaces: http://jsfiddle.net/sM6rk/

Original mark up (again, tabs turned into spaces):

<html>
    <head>
    </head>
    <body>
        <p>Hello<em>World</em></p>
        <p>Foo
            <em>Bar</em>
        </p>
    </body>
</html>
Solution

  • The CSS spec explains the presentation of the white-space processing model, specifically:

    1. [..snip..]
    2. [..snip..]
    3. If 'white-space' is set to 'normal' or 'nowrap', linefeed characters are transformed for rendering purpose into one of the following characters: a space character, a zero width space character (U+200B), or no character (i.e., not rendered), according to UA-specific algorithms based on the content script.
    4. If 'white-space' is set to 'normal', 'nowrap', or 'pre-line', every tab (U+0009) is converted to a space (U+0020) any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.