0

Question:

Which part of the official CSS spec (from csswg.org or w3.org) describes the behavior when a space is inserted at the beginning of innerHTML?

In the following experiment, Chrome produces a different result from JsFiddle. Who is correct?

Thanks! enter image description here

Results in Chrome/Firefox/Edge:

enter image description here

Results in JsFiddle/CodePen:

https://jsfiddle.net/emmaJsFiddle/g6qjy8fd/11/

enter image description here

Appendix 2: Source Code:

<html>
    <head>
        <style>
            section { height: 120px; background: gray; width: 100px; font-size: 100px;}
            div { display: inline-block; }
            .a { background: red ; height: 50px; width: 20px}
            .b { background: cyan; height: 50px; width: 20px}
        </style>
    </head>
    <body>
        <section> <div class="a"></div><div class="b"></div></section>
    </body>
</html>
Emma
  • 316
  • 1
  • 7
  • You might find something usefull here: https://www.w3.org/TR/css-text-3/#white-space-rules – SeoFernando Jul 02 '23 at 21:25
  • 1
    "Chrome produces a different result from JsFiddle" — That doesn't really make sense. JsFiddle just serves a web page to Chrome (or whatever browser you are using). The browser is still responsible for the rendering. If you're comparing "parsing plain HTML" and "modifying HTML with JS" then say *that* and provide the [mcve] **here** and not linked on a third party website (Stackoverflow supports [inline demos](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)). – Quentin Jul 02 '23 at 21:26
  • (Looks as JSFiddle … there's no JS in your link. What does `innerHTML` have to do with it?) – Quentin Jul 02 '23 at 21:27
  • 2
    Oh. Your HTML has no Doctype and is running in [Quirks mode](https://stackoverflow.com/questions/1695787/what-is-quirks-mode). JSFiddle doesn't make that error. [Use a validator](https://validator.w3.org/). – Quentin Jul 02 '23 at 21:31
  • Hi @SeoFernando, thanks, so which part of that spec addresses the question here? Thanks! – Emma Jul 02 '23 at 21:31
  • Hi @Quentin, `Oh. Your HTML has no Doctype and is running in Quirks mode. JSFiddle doesn't make that error. ` - I have added to JsFiddle. Same Result. – Emma Jul 02 '23 at 21:33
  • @Emma — I said JSFiddle **doesn't** make that error. Adding a second Doctype on top of the one that JSFiddle *already inserts automatically* isn't going to make a difference. – Quentin Jul 02 '23 at 21:34
  • Hi @Quentin, `"Chrome produces a different result from JsFiddle" — That doesn't really make sense. JsFiddle just serves a web page to Chrome...` - JsFiddle has its own rendering frame. Although it's displayed in Chrome, it uses a different rendering engine internally. As of 2023, it's the most popular online web IDE, so its behavior kind of holds some weight. – Emma Jul 02 '23 at 21:39
  • 1
    "Although it's displayed in Chrome, it uses a different rendering engine internally." — No, it doesn't. (It's technically possible for a site like that to implement its own rendering engine (e.g. with JS +``) and serve up an HTML document containing that web app which then renders your HTML … but that would be ludicrously inefficient and JSFiddle doesn't). – Quentin Jul 02 '23 at 21:39
  • Hi @Quentin, `(Looks as JSFiddle … there's no JS in your link. What does innerHTML have to do with it?` - innerHTML just describes the part of the HTML text that is located directly after the opening tag. Do you have a better terminology? Thanks. – Emma Jul 02 '23 at 21:41
  • "Contents of the (something that identifies that specific start tag you are talking about)" – Quentin Jul 02 '23 at 21:42
  • Hi @Quentin, `"Although it's displayed in Chrome, it uses a different rendering engine internally." — No, it doesn't...` - ok, that's fine. I still would like to know why Chrome ignores the leading space. Thanks. – Emma Jul 02 '23 at 21:44
  • 1
    Again: When you test it *outside of JSFiddle* you **failed to include the Doctype** which triggered Quirks mode which screwed up your CSS. – Quentin Jul 02 '23 at 21:45
  • Hi @Quentin, `When you test it outside of JSFiddle you failed to include the Doctype which triggered Quirks mode...` - Thanks! It works after I added DocType to Chrome. Do you have any links to the documetation for Quicks Mode to explain this behaviour? – Emma Jul 02 '23 at 21:52
  • 1
    Yes. See the earlier comment where I provided one. Also your favourite Internet search engine. – Quentin Jul 02 '23 at 21:52
  • Hi @Quentin, thanks, I was unable to find the spacing behaviour for QuickMode using my favorite search engine. I am hoping someone can post a answer here with a direct link to the spacing behaviour in QuickMode. – Emma Jul 02 '23 at 21:56
  • @Emma [Quirks mode spec](https://quirks.spec.whatwg.org/#the-blocks-ignore-line-height-quirk) – Alohci Jul 02 '23 at 22:24

1 Answers1

1

This section explains that the calculation of the line box's height ignores line-height in certain cases (such as when the content is composed of inline elements only):

https://quirks.spec.whatwg.org/#the-blocks-ignore-line-height-quirk

Quote from whatwg.org:

3.4. The blocks ignore line-height quirk In quirks mode and limited-quirks mode, for a block container element whose content is composed of inline-level elements, the element’s line-height must be ignored for the purpose of calculating the minimal height of line boxes within the element.

Arial
  • 326
  • 2
  • 11