RE: Ignoring empty paragraphs

Jason Orendorff writes:
> There is already a CSS property 'empty-cells' that affects how empty
> table cells are rendered.  Perhaps there should be an
> 'empty-elements' property:
> 
>   P { empty-elements: ignore; }
> 
> Or an ":empty" pseudo-class:
> 
>   P:empty { display: none; }

This is not necessary. Empty elements are 'ignored' by CSS, at least
with all current implementation's (except Netscape 4, which is so
completely broken that it will give different margins depending on
whether or not you include end tags on elements such as P) UA style
sheets. 

Margins collapse vertically in CSS (although they aren't really margins
at all (more offsets), since the margin isn't part of the element). So
assuming a UA style sheet with P {margin: 1em 0} or ANYELEMENT {margin:
1em 0}, then 
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
Text

would be rendered in the same way as

<p>
text

, since all of the 'margins' collapse.
 
> The bit about empty paragraphs being "ignored" should probably be
> removed.

I agree. I think the HTML specificiation is trying to say that margins
should be  collapsed, but it doesn't take into consideration such things
as test 6 on this page:

http://richinstyle.com/test/application/sibling2.html

, which I believe was the reason for the post (the test tests that P + P
is not matched by <p><p>Content), or other things such as P elements
with properties that mean that they are not empty at all:

P:before {content: 'This isn\'t empty, since it contains generated
content'}

, or at CSS3:

P {content: 'This isn\'t empty either'}

or something I use quite often (except using DIVs instead of Ps because
of what the spec says):

<p style="height: 10px; background: red">
, which isn't empty at all.

If you wanted the empty P elements to be rendered, I don't see why that
shouldn't be allowed; for example, if you have P {margin: 1em 0}, you
could have P + P {padding: .5em 0 0; margin: 0 0 1em}, P:subject + P
{padding: 0 0 .5em; margin: 1em 0 0} (subject is from the CSS3 selectors
WD; at CSS2 this could be achieved with a little more effort: P
{padding: .5em 0} H1 + P, H2 + P, H3 + P, H4 + P, H5 + P, H6 + P, DIV +
P, ADDRESS + P, TABLE + P, BLOCKQUOTE + P, P:first-child, OL + P, UL +
P, DIR + P, MENU + P), which would give equivalent rendering for proper
content, where people use margins coorectly, except it wouldn't collapse
margins, since padding does not collapse:

+-----+
|     | P box
+-----+ 
The space between the two P's is determined by max(P(1)_margin_bottom +
P(2)_margin_top)
+--------------------------------------------------------+ 
|Since padding is inside the P box, it does not collapse |
|- only offsets (margins) collapse                       | P box
+--------------------------------------------------------+

This issue is symptomatic of a more general problem of the two specs not
being in harmony - many of the things in HTML were deprecated in favour
of style sheets without CSS providing equivalent functionality (this is
important so that HTML formatting attributes can be described using CSS;
for example, the start and value attributes). Similarly, the HTML way of
doing things doesn't always match the CSS way....

------------------------------------------------------------------
Please visit RichInStyle com.
If it's style-related, it's here. And now:
MySite v2 - offer your users a choice between predefined styles or
they can create their own, with control over font sizes, colors,
background colors, background images, borders, margins, line heights,
add a custom style rule, font faces, link underlining, etc.

Download now FREE: http://richinstyle.com/free/mysite.html.