A robust approach to "literary paragraphs"?

After noticing that IE 7 beta supports selectors like p+p, I started
wondering how to achieve a simple rendering of paragraphs so that
1) there is no vertical spacing between paragraphs (i.e. the usual
equivalent of an empty line is suppressed)
2) a paragraph has a suitable first-line indentation to indicate the start
of a new paragraph
3) the first paragraph in a sequence of paragraphs has no first-line
indentation, however.

This is easy to achieve if we drop 3) or implement it in a clumsy way, using
a class attribute for such paragraphs. But how to avoid such clumsyness?

Of course we could use just

p { margin: 0; }
p+p { text-indent: 1.2em; }

but this would not degrade gracefully on old browsers: they would render p
elements with no spacing between them and with no first-line indent. The
user would have great difficulties in seeing where a new paragraph starts.

If we regard it as acceptable to drop 3) on old browsers such as IE 6 and
older that do not support advanced selectors, I think we use the following:

p { margin: 0; }
p, p+p { text-indent: 1.2em; }
*+p { text-indent: 0; }

On IE 6, all paragraphs have a first-line indentation, whereas on more
standards-conforming browsers, the additional rules suppress the indentation
for any paragraph that is not immediately preceded by another paragraph.

Jukka K. Korpela wrote:

After noticing that IE 7 beta supports selectors like p+p, I started
wondering how to achieve a simple rendering of paragraphs so that
1) there is no vertical spacing between paragraphs (i.e. the usual
equivalent of an empty line is suppressed)
2) a paragraph has a suitable first-line indentation to indicate the
start of a new paragraph
3) the first paragraph in a sequence of paragraphs has no first-line
indentation, however.

This is easy to achieve if we drop 3) or implement it in a clumsy way,
using a class attribute for such paragraphs. But how to avoid such
clumsyness?

Does IE7 have :first-child?

Of course we could use just

p { margin: 0; }
p+p { text-indent: 1.2em; }

but this would not degrade gracefully on old browsers: they would render
p elements with no spacing between them and with no first-line indent.
The user would have great difficulties in seeing where a new paragraph
starts.

If we regard it as acceptable to drop 3) on old browsers such as IE 6
and older that do not support advanced selectors, I think we use the
following:

p { margin: 0; }
p, p+p { text-indent: 1.2em; }
*+p { text-indent: 0; }

On IE 6, all paragraphs have a first-line indentation, whereas on more
standards-conforming browsers, the additional rules suppress the
indentation for any paragraph that is not immediately preceded by
another paragraph.

It seems to me that in a conforming browser the first paragraph in the
body or in a div wouldn't match *+p because * doesn't match a null
element, so the indentation wouldn't be eliminated.

Deciding to do something for the good of humanity, Harlan Messinger
<hmessinger.removethis (AT) comcast (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

It seems to me that in a conforming browser the first paragraph in the
body or in a div wouldn't match *+p because * doesn't match a null
element, so the indentation wouldn't be eliminated.

IMHO there should generally be another element preceding the paragraph,
such as a heading. There may be exceptions of course.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

In article <IT5ag.5310$Zl6.3724 (AT) reader1 (DOT) news.jippii.net>,
"Jukka K. Korpela" <jukka.k.korpela (AT) kolumbus (DOT) fi> wrote:

After noticing that IE 7 beta supports selectors like p+p, I started
wondering how to achieve a simple rendering of paragraphs so that
1) there is no vertical spacing between paragraphs (i.e. the usual
equivalent of an empty line is suppressed)
2) a paragraph has a suitable first-line indentation to indicate the start
of a new paragraph
3) the first paragraph in a sequence of paragraphs has no first-line
indentation, however.

[...]

degrade gracefully on old browsers [that do not support adjacent selectors - st]

Assuming I correctly understood what you want, I'd probably go no
further than something like this:

P {margin-top: 1em; margin-bottom: 0}
P+P {margin-top: 0; text-indent: 1.2em}

Browsers that don't support adjacent selectors should then indicate new
paragraphs by an 'empty line'. IMO this is more than good enough for
IE6, but if you must, feed it an extra p {text-indent: 1.2em} through
IE's single useful feature, conditional comments. That way you don't
bother more--CSS-compliant browsers with unnecessary rules and you keep
your CSS cleaner and thus easier to maintain.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>

"Sander Tekelenburg" <user (AT) domain (DOT) invalid> wrote:
41971A.04123216052006 (AT) textnews (DOT) euro.net...

Assuming I correctly understood what you want, I'd probably go no
further than something like this:

P {margin-top: 1em; margin-bottom: 0}
P+P {margin-top: 0; text-indent: 1.2em}

That's one possible approach, but it doesn't quite achieve the desired
rendering even on conforming browsers. I don't want to have an empty line
before a paragraph. Such spacing is one of the basic typographic flaws in
the default rendering in web browsers. A paragraph that does not follow
another paragraph typically follows a heading, or sometimes a table, a block
quotation, a list, or some other block. Whether vertical spacing is needed
depends on the _preceding_ element, not on the paragraph. In particular, by
typographic rules, there should be no big gap between a heading and the
first paragraph under it, since the heading as a heading _for_ the text that
follows.

Browsers that don't support adjacent selectors should then indicate new
paragraphs by an 'empty line'. IMO this is more than good enough for
IE6,

Perhaps it's better than enough for IE 6, but what about the billion or so
users of IE 6? If there's a relatively _simple_ way to achieve the desired
rendering of paragraphs, I'd prefer using it even though it's a bit more
complicated than needed for conforming browsers. My technique was based on
the idea that I accept suboptimal rendering in the sense that all paragraphs
have first-line indent. Assuming that you wish to use "literary paragraphs"
in the first place, this should be more acceptable fallback than falling
back to default rendering.

but if you must, feed it an extra p {text-indent: 1.2em} through
IE's single useful feature, conditional comments. That way you don't
bother more--CSS-compliant browsers with unnecessary rules and you keep
your CSS cleaner and thus easier to maintain.

I'm afraid the "conditional comments" hack doesn't help keeping CSS code
cleaner. But perhaps more importantly, how would that help here? Since IE 6
does not support adjacent selectors, I would still be in square 1, wondering
how to differentiate between "starting paragraphs" (i.e., <p> element not
immediately preceded by a <p> element) and "continuation paragraphs".

"Harlan Messinger" <hmessinger.removethis (AT) comcast (DOT) net> wrote:

Does IE7 have :first-child?

So it seems. That's good news (though not an immediate relief - it will
probably be at least year 2009 before the great majority of IE users has
moved to IE 7).

p { margin: 0; }
p, p+p { text-indent: 1.2em; }
*+p { text-indent: 0; }
- -
It seems to me that in a conforming browser the first paragraph in the
body or in a div wouldn't match *+p because * doesn't match a null
element, so the indentation wouldn't be eliminated.

That's true. A <p> element as the first child of <body> would be an oddity,
but in a <div>, <blockquote>, or <td> it would be quite normal. So
apparently my last rule should be augmented to

*+p, p:first-child { text-indent: 0; }

The author would need to take care of paragraph rendering if he e.g. groups
consecutive <p> elements into a <div> without adding headings. Such markup
isn't usually a good idea, but there might be reasons. On the other hand,
the <div> would normally have a class attribute anyway, say <div
class="important"> or <div class="preliminary">, and it would be
straightforward to add some simple rule, as soon as you've decided what the
rendering should be. This could mean adding vertical margins, or just making
the first paragraph in a <div> and the first paragraph after it appear as
"continuation paragraphs", e.g. augmenting my second rule to

p, p+p, div.preliminary p, div.preliminary + p { text-indent: 1.2em; }

"Jukka K. Korpela" <jukka.k.korpela (AT) kolumbus (DOT) fi> wrote

"Sander Tekelenburg" <user (AT) domain (DOT) invalid> wrote:
41971A.04123216052006 (AT) textnews (DOT) euro.net...

Assuming I correctly understood what you want, I'd probably go no
further than something like this:

P {margin-top: 1em; margin-bottom: 0}
P+P {margin-top: 0; text-indent: 1.2em}

That's one possible approach, but it doesn't quite achieve the desired
rendering even on conforming browsers. I don't want to have an empty line
before a paragraph. Such spacing is one of the basic typographic flaws in
the default rendering in web browsers.

Browsers that don't support adjacent selectors should then indicate new
paragraphs by an 'empty line'. IMO this is more than good enough for
IE6,

Perhaps it's better than enough for IE 6, but what about the billion or so
users of IE 6? If there's a relatively _simple_ way to achieve the desired
rendering of paragraphs, I'd prefer using it even though it's a bit more
complicated than needed for conforming browsers.
but if you must, feed it an extra p {text-indent: 1.2em} through
IE's single useful feature, conditional comments. That way you don't
bother more--CSS-compliant browsers with unnecessary rules and you keep
your CSS cleaner and thus easier to maintain.

I'm afraid the "conditional comments" hack doesn't help keeping CSS code
cleaner.

How about this

p {margin: 0}
p+p, * html p {text-indent: 1.2em}

The extra * html p adds the indent to paragraphs in older browsers.

Martin

In article <ykeag.72$Dc2.56 (AT) reader1 (DOT) news.jippii.net>,
"Jukka K. Korpela" <jukka.k.korpela (AT) kolumbus (DOT) fi> wrote:

"Sander Tekelenburg" <user (AT) domain (DOT) invalid> wrote:
41971A.04123216052006 (AT) textnews (DOT) euro.net...

Assuming I correctly understood what you want, I'd probably go no
further than something like this:

P {margin-top: 1em; margin-bottom: 0}
P+P {margin-top: 0; text-indent: 1.2em}

[...] I don't want to have an empty line
before a paragraph.

Ah, right. Makes sense.

[...] Whether vertical spacing is needed
depends on the _preceding_ element, not on the paragraph. In particular, by
typographic rules, there should be no big gap between a heading and the
first paragraph under it, since the heading as a heading _for_ the text that
follows.

Agreed. I just have a hard time finding the motivation to bother to
achieve such subtleties in user-agents that make that unnecessarily
difficult. I haven't ever seen a Windows machine rendering fonts
anywhere nearly as readable as on Macs. The default Windows font
rendering hurts my eyes (I can understand that so many Windows users
print everything, instead of read from screen). If users are happy with
that, surely they don't care about these sort of more advanced
typography issues?

[...] IMO this is more than good enough for IE6,

Perhaps it's better than enough for IE 6, but what about the billion or so
users of IE 6?

To paraphrase Rijk paraphrasing Alan: if they'd care, wouldn't they have
upgraded to a better tool?

[...]

I'm afraid the "conditional comments" hack doesn't help keeping CSS code
cleaner. But perhaps more importantly, how would that help here? Since IE 6
does not support adjacent selectors, I would still be in square 1, wondering
how to differentiate between "starting paragraphs" (i.e., <p> element not
immediately preceded by a <p> element) and "continuation paragraphs".

I meant it would help in the sense that you could keep the 'regular' CSS
file clean while throwing as many workarounds at IE<7 as you'd like.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>