Re: [CSS21] display:run-in clarifications

Here is proposed text to replace the first paragraph and the numbered 
list in 9.2.3 
http://www.w3.org/TR/2009/CR-CSS2-20090423/visuren.html#run-in

--------------------------------------------------------------------------

A run-in element A behaves as follows:

   1. If A has any children[1] that inhibit run-in behavior (see below),
      or if it has any :before or :after pseudo-elements[4] that inhibit
      run-in behavior, then A is rendered as if it had 'display: block'.

   2. Let B be the first of A's following siblings[2] that is neither
      floating nor absolutely positioned[3] nor has 'display: none'. If
      B exists and has a specified value for 'display' of 'block'
      or 'list-item', then A is rendered as an 'inline' element at the
      start of B's principal box[5]. Note: A is rendered before
      B's ':before' pseudo-element, if any. See 12.1[4].

   3. Otherwise, A is rendered as if it had 'display: block'.

[Definition:] An element or pseudo-element C inhibits run-in behavior if 
one or more of the following are true. (Note that the definition is 
recursive.)

   a. C is not floating and not absolutely positioned[3] and the
      specified value of its 'display' is one of 'block', 'list-item'
      or 'table'.

   b. C is not floating and not absolutely positioned[3] and it has one
      or more children that inhibit run-in behavior.

   c. C is not floating and not absolutely positioned[3] and it has
      a :before pseudo element[4] that inhibits run-in behavior.

   d. C is not floating and not absolutely positioned[3] and it has
      an :after pseudo element[4] that inhibits run-in behavior.

[1] conform.html#child
[2] conform.html#sibling
[3] visuren.html#absolutely-positioned
[4] generate.html#before-after-content
[5] visuren.html#principal-box

--------------------------------------------------------------------------



ISSUE I: The above implies that a run-in followed by a table is simply 
displayed as a block before the table rather than as an inline element 
in the first suitable cell of the table. Trying to make the run-in 
appear inside the table seems difficult and not needed. But it may be 
that Konqueror and Safari are currently trying to do just that 
(unsuccessfully).

Test: http://www.w3.org/Style/Examples/015/run-in-12.xhtml



ISSUE II: The above also implies that the following code does not make 
any run-ins:

    <div>
      <h2 style="display: run-in>Am I run-in?</h2>
      <h2 style="display: run-in>Am I run-in?</h2>
    </div>

One could instead say that a run-in before a run-in always becomes 
inline in the second element, no matter whether that second run-in 
itself is displayed inline or as a block. MacIE appears to do this.

Test: http://www.w3.org/Style/Examples/015/run-in-15.xhtml
Test: http://www.w3.org/Style/Examples/015/run-in-17.xhtml



ISSUE III: An element can only become a run-in in a *sibling* element, 
in other words, the following does not produce run-ins. I found no 
implementation that tried to do this differently, so this seems OK.

    <div>
      <h2 style="display: run-in">Am I run-in?</h2>
    </div>
    <p>Text text text...</p>

Test: http://www.w3.org/Style/Examples/015/run-in-07.xhtml



ISSUE IV: An element becomes run-in in a block, regardless of whether 
that block has any text content. E.g.,

    <h2 style="display: run-in">Make me run-in</h2>
    <div>
    <p>Text text text...</p>
    </div>

is technically a run-in (viz., in the DIV), but doesn't look like one:

    Make me run in

    Text text text...

Prince puts the run-in in the P instead:

    Make me run in Text text text...

You can improve the look and make the P inline with the help of some 
clever selectors. That is probably good enough.

Test: http://www.w3.org/Style/Examples/015/run-in-13.xhtml



ISSUE V: A float or an absolutely positioned element inside a run-in or 
after a run-in does not stop the run-in from displaying as a run-in. 
Konqueror and Safari behave as specified, Opera and IE do not, and 
Prince is sometimes like the first (test 4 & 5), sometimes like the 
latter (test 8), and in one case it found a third way: when the run-in 
is followed by an absolutely positioned element, it puts the run-in in 
that positioned element (test 9).

Test: http://www.w3.org/Style/Examples/015/run-in-04.xhtml
Test: http://www.w3.org/Style/Examples/015/run-in-05.xhtml
Test: http://www.w3.org/Style/Examples/015/run-in-08.xhtml
Test: http://www.w3.org/Style/Examples/015/run-in-09.xhtml



ISSUE VI: Level 3 has several more values for 'display' and allows 
elements with vertical and horizontal text to be interleaved. We can 
deal with that in detail in the Box Module, but as a sanity check, 
let's look how run-in would behave with those new features:

  - 'compact': for the purpose of determining run-in rendering, it is
    exactly like 'inline'.

  - 'ruby' and related values: ditto.

  - a template from Template Layout without the 'inline' keyword: for
    the purpose of determining run-in rendering, it is exactly
    like 'table'.

  - a template from Template Layout with the 'inline' keyword: for
    the purpose of determining run-in rendering, it is exactly
    like 'inline-table'.

  - a horizontal run-in followed by a vertical block or vice versa:
    the run-in is rendered as a block.



I've made a handful more test cases at 
http://www.w3.org/Style/Examples/015/




Bert

PS. This relates to http://wiki.csswg.org/spec/css2.1#issue-128
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Thursday, 20 August 2009 18:34:12 UTC