Behavior of first-line

[Abe Kornelis]

Hello,

My pages contain paragraphs that are 'remarks'. These are intended to
have the first line underlined, (this is the word 'note' or 'remark'),
followed by the text of the remark, which should be indented. Strange
enough the underline works as intended, but the indentation gets
swapped; i.e. the first line gets indented, but the remainder doesn't.
To see it on the complete page, please check:
http://www.hlasm.com/english/course1.htm

My style sheet contains the following:
<quote>
/* remarks: underline first line and indent remainder */
p.remark {
text-indent : 2% }
p.remark:first-line {
text-decoration : underline;
text-indent : 0% }
</quote>

A sample bit of html that uses this is:
<quote>
<p class="remark"> Note 1<br />
This course covers the Assembler and the application-programmer
oriented hardware instructions that have been available from the
introduction of the S/360 and that were added over the first 20 years
or
so of the architecture. It is estimated that 90% of existing
Assembler
applications use only the instructions covered in this course.</p>
</quote>

Probably I'm missing something pretty obvious. Any hint to help me
repair the lay-out would be highly appreciated. Thanks in advance.

Abe F. Kornelis.

[Steve Pugh]

a.********@pink roccade.com (Abe Kornelis) wrote:

My pages contain paragraphs that are 'remarks'. These are intended to
have the first line underlined, (this is the word 'note' or 'remark'),
followed by the text of the remark, which should be indented. Strange
enough the underline works as intended, but the indentation gets
swapped; i.e. the first line gets indented, but the remainder doesn't.
To see it on the complete page, please check:
http://www.hlasm.com/english/course1.htm

p.remark {
text-indent : 2% }
p.remark:fir st-line {
text-decoration : underline;
text-indent : 0% }

text-indent only applies to the first line anyway.
http://www.w3.org/TR/CSS21/text.html...ef-text-indent

So you want something like this:
p.remark {
text-indent : -2%;
padding-left: 2%;
}
p.remark:first-line {
text-decoration : underline;
}

cheers,
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/>

[Steve Pugh]

a.********@pink roccade.com (Abe Kornelis) wrote:

My pages contain paragraphs that are 'remarks'. These are intended to
have the first line underlined, (this is the word 'note' or 'remark'),
followed by the text of the remark, which should be indented. Strange
enough the underline works as intended, but the indentation gets
swapped; i.e. the first line gets indented, but the remainder doesn't.
To see it on the complete page, please check:
http://www.hlasm.com/english/course1.htm

p.remark {
text-indent : 2% }
p.remark:fir st-line {
text-decoration : underline;
text-indent : 0% }

text-indent only applies to the first line anyway.
http://www.w3.org/TR/CSS21/text.html...ef-text-indent

So you want something like this:
p.remark {
text-indent : -2%;
padding-left: 2%;
}
p.remark:first-line {
text-decoration : underline;
}

cheers,
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/>

[Abe Kornelis]

Steve,

thanks, I'll give it a try...

Abe.

[Abe Kornelis]

Steve,

thanks, I'll give it a try...

Abe.

[Jukka K. Korpela]

a.********@pink roccade.com (Abe Kornelis) wrote:

My pages contain paragraphs that are 'remarks'. These are intended to
have the first line underlined, (this is the word 'note' or
'remark'),
Underline should rarely be used for anything but links on the Web. It
is natural to expect that underlined "Note 1" is a link to something,
probably an unabridged version of the note. (We would expect the color
to be special too, but it is so common these days that authors mess
around with link colors that we expect a text to be link if it is
underlined, even if it has the same color as surrounding text.) Using
italics would be bettter.
followed by the text of the remark, which should be indented.
So it should look a bit like "Note" were a heading for the subsequent
text, right?
<p class="remark"> Note 1<br />
This course covers the Assembler and the application-programmer - - applications use only the instructions covered in this course.</p>

Whenever an author types <br> (or the kewl & pointless variant <br />),
he should take a BReak and think about what he is really doing.

It really looks like "Note 1" should be a heading, so

<div class="remark"> <h3>Note 1</h3>
<p>This course - -.</p></div>

might be the best markup, maybe with

..remark h3 { font-size: 100%; font-weight: normal; font-style: oblique;
margin: 1.3em 0 0 0; }
..remark p { margin: 0 0 1em 1em; }

(I would use the em unit rather than percentage when specifying the
indentation. When the canvas is narrow, e.g. 2% of the width gets
rather small and looks more like an error than an intentional stylistic
effect.)

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

[Jukka K. Korpela]

a.********@pink roccade.com (Abe Kornelis) wrote:

My pages contain paragraphs that are 'remarks'. These are intended to
have the first line underlined, (this is the word 'note' or
'remark'),
Underline should rarely be used for anything but links on the Web. It
is natural to expect that underlined "Note 1" is a link to something,
probably an unabridged version of the note. (We would expect the color
to be special too, but it is so common these days that authors mess
around with link colors that we expect a text to be link if it is
underlined, even if it has the same color as surrounding text.) Using
italics would be bettter.
followed by the text of the remark, which should be indented.
So it should look a bit like "Note" were a heading for the subsequent
text, right?
<p class="remark"> Note 1<br />
This course covers the Assembler and the application-programmer - - applications use only the instructions covered in this course.</p>

Whenever an author types <br> (or the kewl & pointless variant <br />),
he should take a BReak and think about what he is really doing.

It really looks like "Note 1" should be a heading, so

<div class="remark"> <h3>Note 1</h3>
<p>This course - -.</p></div>

might be the best markup, maybe with

..remark h3 { font-size: 100%; font-weight: normal; font-style: oblique;
margin: 1.3em 0 0 0; }
..remark p { margin: 0 0 1em 1em; }

(I would use the em unit rather than percentage when specifying the
indentation. When the canvas is narrow, e.g. 2% of the width gets
rather small and looks more like an error than an intentional stylistic
effect.)

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