Re: Clarification needed for inline boxes containing block boxes

2009/2/26 Masataka Yakura <myakura.web@gmail.com>:
>> And yet. According to current HTML spec:
>> http://www.w3.org/TR/html401/sgml/dtd.html#inline
>>
>> SPAN are not allowed to contain block elements such as
>> DIV. In the same way as P's cannot contain DIVs.
>>
>> So I think that the behavior in this case should be
>> consistent with these cases:
>>
>> <p style="padding: 0 20px; background: green; border: 2px solid
>> red">aaa<div>bbb</div></p>
>>
>> <p style="padding: 0 20px; background: green; border: 2px solid
>> red">aaa<div>bbb</div>ccc</p>
>
> that's true that span cannot contain block elements (like div) inside,
> but a whole different story.
> and changing that span to p goes off in completely different directions.
Exactly, the fact that <span> (or <p>) is not allowed inside <div> (as
elements, not boxes), is something that HTML5 could fix, not a CSS
problem.

> i slightly modified the testcase (see below). hope that helps.
>
> data:text/html,<!DOCTYPE html><span style="padding: 0 20px;
> background: green; border: 2px solid red">aaa<span
> style="display:block">bbb</span></span>

Sure it helps, because it focuses on CSS issues instead of parsing
issues (when I first saw Gecko example, I thought that it was
autoclosing <span>). Probably using XML helps too.

> --
> Masataka Yakura
> <myakura.web@gmail.com>
>
>

In addition, I expect that an inline box cannot contain a block box in
any case. Three resolutions are therefore possibile:

1) the content of the block-level element is pulled outside the inline
box, rendered it, then reordered, breaking the inline element "aaa
ccc" in two inline boxes "[aaa" and "ccc]", that are in turn wrapped
into their own line box and anonymous block box. The resulting inline
boxes should look exactly as they were contiguous in DOM, but owned by
different line boxes (ie with a line break inside the inline box).
This means that we have three block boxes, one of them is explicit,
the others are anonymous. Each one contains one line box, that in
turns contains exactly one inline box. Two of them are explicit and
connected with the inline element (element and boxes are not the
same), one is anonymous and created by block-level element's content.
2) the used value for display in the outer element is block
Border is applied to the the whole element, the same for background
and padding. Anonymous block boxes are created around "aaa" and "ccc"
as usual.
3) the computed value for display in the inner element is inline-block
Content is rendered in only one line box (or more precisely, the
inline-block belongs to the line box, but creates a line box inside it
and an inline box for "bbb"), background is propagated to the element,
border wraps everything. Block level element is shrinked to fit.

I personally don't like n° 1, because it breaks parent-child
relationship (the boxes generated by the inline-level element are not
ancestors of the block box, although the inline-level element is
parent of the block-level one in the DOM).
I don't find 2) implementable, because block boxes very deep in the
DOM could break the rendering.
Instead I think that 3) is easy to implement, in the spec and in code,
and meets author expectations (if I want a block inside an inline, I
probably want a block in the same line). So I personally support 3)

Giovanni

Received on Thursday, 26 February 2009 14:40:14 UTC