Indent paragraph except for first line?

[Firas]

Hi,

Is there a CSSish way to indent a paragraph except for the first line?

I tried

p:first-line {
text-indent: 0em;
}

p {
margin-left: 3em;
}

But it didn't work in IE6 or Firebird. Is it supposed to work in theory?

This is the page I'm working on:

http://s88900951.onlinehome.us/scrap...akespeare.html

[Evertjan.]

Firas wrote on 28 nov 2003 in comp.infosystems.www.authoring.stylesheets:

p:first-line {
text-indent: 0em;
}

p {
margin-left: 3em;
}

p {margin-left: 3em;}
p:first-line {margin-left: 0em;}
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Evertjan.]

Evertjan. wrote on 28 nov 2003 in
comp.infosystems.www.authoring.stylesheets:

p {margin-left: 3em;}
p:first-line {margin-left: 0em;}

Sorry, I pressed "send" bedfore I finished testing.

This does not work.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[JustAnotherGuy]

Evertjan. wrote:

Firas wrote on 28 nov 2003 in comp.infosystems.www.authoring.stylesheets:

p:first-line {
text-indent: 0em;
}

p {
margin-left: 3em;
}

p {margin-left: 3em;}
p:first-line {margin-left: 0em;}

Yeah, typing error, the above is what I meant I tried :)

[Evertjan.]

Evertjan. wrote on 28 nov 2003 in
comp.infosystems.www.authoring.stylesheets:

Evertjan. wrote on 28 nov 2003 in
comp.infosystems.www.authoring.stylesheets:

p {margin-left: 3em;}
p:first-line {margin-left: 0em;}

Sorry, I pressed "send" bedfore I finished testing.

This does not work.

But this does:

<style>
p {margin-left: 3em;text-indent: -3em;}
</style>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Christoph Paeper]

*Firas* <fi***********@hotmail.com>:

Is there a CSSish way to indent a paragraph except for the first line?

p:first-line {text-indent: 0em;}
p {margin-left: 3em;}

'text-indent' always applies to only the first line. For hanging indent
you'd have to use a negative value:

p {text-indent: -3em; margin-left: 3em;}

--
"I didn't have the time to write a short letter, so I wrote a long one instead."
Mark Twain

[JustAnotherGuy]

Christoph Paeper wrote:

*Firas* <fi***********@hotmail.com>:

Is there a CSSish way to indent a paragraph except for the first line?

p:first-line {text-indent: 0em;}
p {margin-left: 3em;}

'text-indent' always applies to only the first line. For hanging indent
you'd have to use a negative value:

p {text-indent: -3em; margin-left: 3em;}

Thanks.

There wouldn't be a way to impose that behaviour on a line because it
starts with <span class="speaker"> right? The only way to make the
effect exclusive to certain paragraphs is to mark them as <p
class="quote"> or something, and put p.quote
{margin-left:3em;text-indent: -3em} in the CSS?

[Steve Pugh]

JustAnotherGuy <no******@sorry.com> wrote:

Christoph Paeper wrote:

*Firas* <fi***********@hotmail.com>:

Is there a CSSish way to indent a paragraph except for the first line?

p:first-line {text-indent: 0em;}
p {margin-left: 3em;}

'text-indent' always applies to only the first line. For hanging indent
you'd have to use a negative value:

p {text-indent: -3em; margin-left: 3em;}

There wouldn't be a way to impose that behaviour on a line because it
starts with <span class="speaker"> right?

Right. CSS doesn't (at least at present) have any way to affect a
parent depending on its children.
The only way to make the
effect exclusive to certain paragraphs is to mark them as <p
class="quote"> or something, and put p.quote
{margin-left:3em;text-indent: -3em} in the CSS?

If you don't want to change your HTML then you may want to consider
the following -

p {margin-left: 3em;}
span.speaker {position: relative; left: -3em;}

This leaves a gap but might be acceptable.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[David Dorward]

JustAnotherGuy wrote:

There wouldn't be a way to impose that behaviour on a line because it
starts with <span class="speaker"> right? The only way to make the
effect exclusive to certain paragraphs is to mark them as <p
class="quote"> or something

Correct - there aren't any selectors that can influence an element based on
its decendents. (Decendents based on ancestors can be done, but not the
other way around)

--
David Dorward http://dorward.me.uk/

[Jukka K. Korpela]

"Evertjan." <ex**************@interxnl.net> wrote:

p {margin-left: 3em;}
p:first-line {margin-left: 0em;}
Sorry, I pressed "send" bedfore I finished testing.

This does not work.

Right, or at least it should not work, since by the CSS specification,
there is just a small collection of properties that apply to
a :first-line pseudo-element, and margin properties aren't among them.

So the use of the text-indent property for p, as discussed elsewhere in
the thread, is the right way.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Anne van Kesteren]

JustAnotherGuy wrote:

There wouldn't be a way to impose that behaviour on a line because it
starts with <span class="speaker"> right? The only way to make the
effect exclusive to certain paragraphs is to mark them as <p
class="quote"> or something, and put p.quote
{margin-left:3em;text-indent: -3em} in the CSS?

If you quote people. You better of using either <blockquote> or <q>, in
this case (with a speakers and a quote) it is IMO better to use a <dl>.
Like this:

<dl>
<dt>Speaker</dt>
<dd>Quote</dd>
<dt>Speaker 2</dt>
<dd>Quote</dd>
<!-- etc. -->
</dl>
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[JustAnotherGuy]

Anne van Kesteren wrote:

If you quote people. You better of using either <blockquote> or <q>, in
this case (with a speakers and a quote) it is IMO better to use a <dl>.
Like this:

<dl>
<dt>Speaker</dt>
<dd>Quote</dd>
<!-- etc. -->
</dl>

/me runs off to replace <p class=".."> with <p><q>, loads page, and
suddenly realizes that of course margin-left and text-indent don't apply
to <q> anyway.

Tricky stuff, this semantics thing.

<dl><dt><dd> totally throws off the meaning, right? So I guess the
'proper way' would be:

<p class="quote"><q><span="speaker">Romeo: </span>: Have not saints
lips, and holy palmers too? </q></span></p>

That way I'd get hanging indentation, ability to change font-weight of
the speaker, and embed the information that it's a quote.

I don't really care about real-world implementation concerns here; just
finding a way to procrastinate. But they should've had a
PlayMarkupLanguage or something anyway.

(btw the page is now at
http://s88900951.onlinehome.us/scrap...are/index.html)

PS. oh god, Firebird takes the liberty of putting ""'s around the quote.
blockquote time.

[Anne van Kesteren]

JustAnotherGuy wrote:

Anne van Kesteren wrote:

If you quote people. You better of using either <blockquote> or <q>,
in this case (with a speakers and a quote) it is IMO better to use a
<dl>. Like this:

<dl>
<dt>Speaker</dt>
<dd>Quote</dd>
<!-- etc. -->
</dl>
/me runs off to replace <p class=".."> with <p><q>, loads page, and
suddenly realizes that of course margin-left and text-indent don't apply
to <q> anyway.

Tricky stuff, this semantics thing.

<dl><dt><dd> totally throws off the meaning, right?

Not really:
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/lists.html#h-10.3>

"Another application of DL, for example, is for marking up dialogues,
with each DT naming a speaker, and each DD containing his or her words."

So I guess the 'proper way' would be:

<p class="quote"><q><span="speaker">Romeo: </span>: Have not saints
lips, and holy palmers too? </q></span></p>
Instead of <span class="speaker"> you are better of using <cite> ;-)

That way I'd get hanging indentation, ability to change font-weight of
the speaker, and embed the information that it's a quote.

I don't really care about real-world implementation concerns here; just
finding a way to procrastinate. But they should've had a
PlayMarkupLanguage or something anyway.

(btw the page is now at
http://s88900951.onlinehome.us/scrap...are/index.html)

PS. oh god, Firebird takes the liberty of putting ""'s around the quote.
blockquote time.

It should be possible to turn it off with CSS. Though I'm not sure if
that was buggy in Mozilla, can't remember.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Owen Jacobson]

JustAnotherGuy wrote:

PS. oh god, Firebird takes the liberty of putting ""'s around the
quote. blockquote time.

That's not accidental:
<http://www.w3.org/TR/html4/struct/text.html#edef-Q>

"Visual user agents must ensure that the content of the Q
element is rendered with delimiting quotation marks."

This is being changed in XHTML2, but that is some time off in the
future.

[Anne van Kesteren]

Owen Jacobson wrote:

This is being changed in XHTML2, but that is some time off in the
future.

Not really. XHTML2 introduces a new element, <quote>, which hasn't got
any style by default (that is recommended by the W3C).
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[JustAnotherGuy]

Owen Jacobson wrote:

JustAnotherGuy wrote:

PS. oh god, Firebird takes the liberty of putting ""'s around the
quote. blockquote time.

That's not accidental:
<http://www.w3.org/TR/html4/struct/text.html#edef-Q>

"Visual user agents must ensure that the content of the Q
element is rendered with delimiting quotation marks."

This is being changed in XHTML2, but that is some time off in the
future.

I can wait!
Just kidding. I think I've found my solution. Basically the whole dialog
quotes Shakespeare anyway, so it goes:

<blockquote>
[...]
<p><span class="speaker">Juliet: </span> Ay, pilgrim, lips that they
must use in prayer.</p>
[...]
</blockquote>

Apparently blockquote takes the text-indent property and so on.
Actually, seems to take them and pass them on to the <p>'s within it.
Way cool.

Only thing left to mull over is whether
<dl><dt>speaker</dt><dd>dialogue</dd></dl> is better than
<p><span>speaker</span>dialogue</p> for the dialogue itself.

[Anne van Kesteren]

JustAnotherGuy wrote:

Owen Jacobson wrote:

JustAnotherGuy wrote:

PS. oh god, Firebird takes the liberty of putting ""'s around the
quote. blockquote time.
That's not accidental:
<http://www.w3.org/TR/html4/struct/text.html#edef-Q>

"Visual user agents must ensure that the content of the Q
element is rendered with delimiting quotation marks."

This is being changed in XHTML2, but that is some time off in the
future.

I can wait!
Just kidding. I think I've found my solution. Basically the whole dialog
quotes Shakespeare anyway, so it goes:

<blockquote>
[...]
<p><span class="speaker">Juliet: </span> Ay, pilgrim, lips that they
must use in prayer.</p>
[...]
</blockquote>

I'm note sure if the speaker him/her-self can be within the <blockquote>
tag for correct semantics. I do know it should be within <cite> and
not within <span>, example:

<blockquote cite="http://orginal-location.ext/of-the-quote">
<p><cite>Someone:</cite> "What are you talking about?"</p>
<blockquote>
Apparently blockquote takes the text-indent property and so on.
Actually, seems to take them and pass them on to the <p>'s within it.
Way cool.

Only thing left to mull over is whether
<dl><dt>speaker</dt><dd>dialogue</dd></dl> is better than
<p><span>speaker</span>dialogue</p> for the dialogue itself.

The W3C says this is correct. And since you can use <p> within <dd> I
don't see a reason not to. It should be pretty styleable too.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Jukka K. Korpela]

Anne van Kesteren <ma**@annevankesteren.nl> wrote:

Just kidding. I think I've found my solution. Basically the whole
dialog quotes Shakespeare anyway, so it goes: - -

I'm note sure if the speaker him/her-self can be within the
<blockquote> tag for correct semantics.

Of course it can - well, not the tag, but the _element_. What is quoted
here is a text by Shakespeare, so <blockquote> is OK for the entire
passage. The words of the characters could be regarded as quotations of
their (fictitional) utterance, so one _could_ use inner <blockquote>
elements as well, and _then_ the question raises whether the name of
the character (a citation) should be outside the blockquote or before
it. Well, that's an open question, and using CSS you could deal with
either solution. If you put the speaker's name before the blockquote,
you could float: left the element in which the name resides.
Only thing left to mull over is whether
<dl><dt>speaker</dt><dd>dialogue</dd></dl> is better than
<p><span>speaker</span>dialogue</p> for the dialogue itself.

The W3C says this is correct.

The HTML specification by the W3C is self-contradictory, so you can
hardly use it as an effective argument in a case where the topic is
that very contradiction. You can just choose whether you use semantic
(logical) markup, in which <dl> is a definition list, as _defined_ in
the specification, or use tag soup, in which you can use any tag for
anything as long as it gives you the visual impression you like, on the
browser(s) of your current choice, as suggested in the _descriptive_
vague prose of the specification. In the latter case, you can even use
<dl><dd>text</dd></dl> to mean 'indent' (which is just as illogical as
reading <blockquote> as 'indent', of course).

But as regards to CSS, <dl> mostly gives you headache. It's poorly
documented what browsers actually do with it by default, i.e. what the
imaginary browser style sheet might contain, so you can't really know
even the starting point of styling. Besides, implementations often
behave oddly when you try to style <dl> elements. It's generally best
to use _simple_ markup (such as just <p>) when in doubt, if only for
the reason that browsers probably handle things better when you apply
CSS to simple markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Stan Brown]

In article <b3**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, Firas
<fi***********@hotmail.com> wrote:

Is there a CSSish way to indent a paragraph except for the first line?

I tried

p:first-line {
text-indent: 0em;
}

p {
margin-left: 3em;
}

Too elaborate. "text-indent" _is_ a first-line property, so for a
hanging indent do

p { margin-left: 3em; text-indent:-3em }

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Marek Mänd]

David Dorward wrote:

JustAnotherGuy wrote:

There wouldn't be a way to impose that behaviour on a line because it
starts with <span class="speaker"> right? The only way to make the
effect exclusive to certain paragraphs is to mark them as <p
class="quote"> or something

Correct - there aren't any selectors that can influence an element based on
its decendents. (Decendents based on ancestors can be done, but not the
other way around)

One of the very weaknesses of CSS I truly believe.

* Make the background of table row (TR element) yellow, when there is a
visited link in that table row.

* Dont display whole container element (borders fancy background and
that) when it doesnt contain image (IMG) with attributes...

etc

also such as
* display something based on some other elements presentational
properties except property... and property...

* make new CSS class by inheriting properties from CSS class ...
It is a myth of modern era, that you have full control on the page using
CSS only and the advocates of CSS havent made complex layouts. Mostly
you see nowadays are diletantic personal pages advocating CSS, the
advocates itsselves mostly arent professionals, but college kids who
just have little bit fun with web pages.
With position CSS attribute there is also fun. position fixed.
well thats nice, but WHERE were the peoples minds when they invented
fixed - WHERE IS FIXED-Y and FIXED-X position attributes, which by my
imagination should fix element only by one dimension....

--
Marek Mänd
Estonia

[Alan J. Flavell]

On Sun, 30 Nov 2003, Marek Mänd wrote:

It is a myth of modern era, that you have full control on the page using
CSS only
It's been a myth seen to greater or lesser extent throughout the life
of the WWW, that the author has "full control of the page", by any
means whatever. Even formats which aim at full control (used to be
postscript, nowadays PDF or Flash) can't achieve that, and certainly
not formats which are designed to be repurposed in different browsing
situations, as HTML is (with optional stylesheet(s), natch).
and the advocates of CSS havent made complex layouts.
I'd venture the hypothesis that "complex layouts" aren't suited to the
WWW, no matter _how_ you build them. In one sense, Google's home page
is the most successful web page on the WWW. No doubt each of us could
make suggestions for improving its internals, but a "complex layout"
it is not, and it wouldn't be improved by giving it one. IMHO,
anyway.
Mostly you see nowadays are diletantic personal pages advocating
CSS, the advocates itsselves mostly arent professionals, but college
kids who just have little bit fun with web pages.

Run out of valid technical material, have we? Got to descend to the
level of a pissing contest, have we?

[JustAnotherGuy]

Marek Mänd wrote:

It is a myth of modern era, that you have full control on the page using
CSS only and the advocates of CSS havent made complex layouts. Mostly
you see nowadays are diletantic personal pages advocating CSS, the
advocates itsselves mostly arent professionals, but college kids who
just have little bit fun with web pages.

I guess my existence proves your point, but how about http://www.wired.com?

[Christoph Paeper]

*Marek Mänd* <ca********@mail.ee>:

David Dorward wrote:

Correct - there aren't any selectors that can influence an element based on
its decendents.
One of the very weaknesses of CSS I truly believe.

There are several proposals for CSS 3: Selectors to make this possible,
among them ':has()' and ':matches()' ('<' won't make it AFAIK). However, any
solution would make applying styles slower, because the tree had to be used
in both directions instead of just downwards as today. Such is okay for
languages like XSLT, but in oppose CSS is usually applied at run-time.
* Make the background of table row (TR element) yellow, when there is a
visited link in that table row.
A solution to the issue that ':nth-child(odd)' and ':nth-child(even)' shall
solve is requested more often, though.
* Dont display whole container element (borders fancy background and
that) when it doesnt contain image (IMG) with attributes...
I can't see a usecase for this.
* display something based on some other elements presentational
That would be handy for user stylesheets (like e.g. @style(position: fixed)
{position: absolute !important}), but even more computing intense.
* make new CSS class by inheriting properties from CSS class ...
That's almost always possible already, i.e. unneeded, by clever selector
choice and order.
It is a myth of modern era, that you have full control on the page using
CSS only
A myth I've not heard claimed by someone I regard as qualified.
In most cases you've got (more than) enough control, though.
the advocates of CSS havent made complex layouts.
We're now in the time where even people advocate CSS who only c&p, yes. That
doesn't mean that "complex" layouts weren't possible. Most of the issues are
mere browser bugs.

At the moment the usual page to shut rants like yours down is
<http://csszengarden.com>, although there's quite some hackery used around
there.
WHERE IS FIXED-Y and FIXED-X position attributes, which by my
imagination should fix element only by one dimension....

ww*******@w3.org

Fixed positioning is only seldom a good idea of course.

--
"For every human problem, there is a neat, simple solution;
and it is always wrong." H. L. Mencken