Compact <dl>

Andre Majorel

I'm trying to make a compact <dl> class à la troff .TP where you
have

Term Definition of the term.

Longer Term
Definition of the longer term.

i.e. if the <dt> text is shorter than the margin-left, the <dd>
is on the same line. Otherwise, the <dd> goes on the next line.

I've tried various things along the lines of DL.compact > DT {
display: compact; } but Mozilla insists on putting a line break
between the <dt> and <dd>.

Term
Definition of the term.

Is the defect in Mozilla or in my CSS skills ?

--
André Majorel <URL:http://www.teaser.fr/~amajorel/>
Agree with them now, it will save so much time.

Jul 20 '05 #1

Brian

Andre Majorel wrote:

I'm trying to make a compact <dl> class à la troff .TP where you
have

Term Definition of the term.

Longer Term
Definition of the longer term.

i.e. if the <dt> text is shorter than the margin-left, the <dd>
is on the same line. Otherwise, the <dd> goes on the next line.
It's too late to test, so you'll have to test this yourself. Assign a
width to <dt> (in em units) and float it left. If your terms are all 1
word, that's all you should have to do. However, if they contain
spaces, you'll need to look into support for css word break control.
Or use &nbsp; in place of normal spaces.
I've tried various things along the lines of DL.compact > DT {
display: compact; }
I don't know what display: compact is. I have yet to come across it.
but Mozilla insists on putting a line break
between the <dt> and <dd>.

<dd> is block level, so it does not sit next to <dt> by default.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #2

Neal

On Wed, 04 Feb 2004 04:33:39 GMT, Brian
<us*****@julietremblay.com.invalid-remove-this-part> wrote:

Andre Majorel wrote:

I'm trying to make a compact <dl> class à la troff .TP where you
have

Term Definition of the term.

Longer Term
Definition of the longer term.

i.e. if the <dt> text is shorter than the margin-left, the <dd>
is on the same line. Otherwise, the <dd> goes on the next line.

It's too late to test, so you'll have to test this yourself. Assign a
width to <dt> (in em units) and float it left. If your terms are all 1
word, that's all you should have to do. However, if they contain spaces,
you'll need to look into support for css word break control. Or use
&nbsp; in place of normal spaces.

One problem - if there are several <dt>'s, you need to set widths for
each, that's cumbersome.Unless you have a lot of short terms, it might
work, but you'll have to test it in a lot of browsers to be sure one
doesn't indent differently. The <dd> indent as tested on IE6 is only
2.5em, but I see in Opera 7.23 it's a little different. I suspect other
browsers will handle it their own way.

Aha - Brian, the float works well in Opera, but in IE the <dd> is a little
too far to the right. Seems like there's a tiuny bit of padding between
the first character of the <dd> and the left border, but padding-left: 0;
has no effect...

To the original poster: what was wrong with the usual display of the
definition list? Is this on-the-same-line rendering necessary or just that
it looks cool?

See, the hassle is that it's not like the <dt> element is over once the
last character is done, the box of the <dt> extends the whole line. (Set
visible borders on dt and see for yourself.) That's a feature, actually -
block elements are rectangles with a width as long as one line would be
before it wraps, and that's a good thing we rely on all the time. The
trick you have to do here is set a new width for the <dt> in question so
you can scoot the <dd> up next to it. As you can see, it's harder than it
looks.

Between the varying size of the indent we find on the <dd> and the weird
behavior when we start floating this stuff around, we get in a mess of
trouble, and with all these uncontrollable variables it might be wiser to
leave it to the browser to render than to risk an unfortunate rendering.

Jul 20 '05 #3

Andre Majorel

In article <op**************@news.rcn.com>, Neal wrote:

On Wed, 04 Feb 2004 04:33:39 GMT, Brian
<us*****@julietremblay.com.invalid-remove-this-part> wrote:

Andre Majorel wrote:

I'm trying to make a compact <dl> class à la troff .TP where you
have

Term Definition of the term.

Longer Term
Definition of the longer term.

i.e. if the <dt> text is shorter than the margin-left, the <dd>
is on the same line. Otherwise, the <dd> goes on the next line.
It's too late to test, so you'll have to test this yourself. Assign a
width to <dt> (in em units) and float it left. If your terms are all 1
word, that's all you should have to do. However, if they contain spaces,
you'll need to look into support for css word break control. Or use
&nbsp; in place of normal spaces.

Thanks. I did

DL.compact > DT { float: left }

I now have

Term Definition of the term

Longer TermDefinition of the term. The first line of
the definition is shifted, but the following
lines are properly aligned.

It's not ideal, but at least it solves the main problem. I'd
love to be able to specify that the <dd> be put on a different
line instead, but I have no clue how to do that (I'm a CSS
newbie).
One problem - if there are several <dt>'s, you need to set widths for
each, that's cumbersome.Unless you have a lot of short terms, it might
work, but you'll have to test it in a lot of browsers to be sure one
doesn't indent differently. The <dd> indent as tested on IE6 is only
2.5em, but I see in Opera 7.23 it's a little different. I suspect
other browsers will handle it their own way.

Aha - Brian, the float works well in Opera, but in IE the <dd> is a
little too far to the right. Seems like there's a tiuny bit of padding
between the first character of the <dd> and the left border, but
padding-left: 0; has no effect...

To the original poster: what was wrong with the usual display of the
definition list? Is this on-the-same-line rendering necessary or just
that it looks cool?
I have many short (term, definition) pairs, where the total
length is way less than 80 columns. The default style inserts
unnecessary line breaks. It's less readable, you see less of the
document at a time, you get to scroll and lot and, if you print
it, you waste more trees.
See, the hassle is that it's not like the <dt> element is over once
the last character is done, the box of the <dt> extends the whole
line. (Set visible borders on dt and see for yourself.) That's a
feature, actually - block elements are rectangles with a width as long
as one line would be before it wraps, and that's a good thing we rely
on all the time. The trick you have to do here is set a new width for
the <dt> in question so you can scoot the <dd> up next to it. As you
can see, it's harder than it looks.

Between the varying size of the indent we find on the <dd> and the
weird behavior when we start floating this stuff around, we get in a
mess of trouble, and with all these uncontrollable variables it might
be wiser to leave it to the browser to render than to risk an
unfortunate rendering.

Thanks. I *think* I understand what you're saying (I'm a newbie,
remember). The varying default indent is not an issue, as I
override DD.compact { margin-left } anyway. Weird behaviour *is*
an issue. With Galeon (= Mozilla), if the zoom factor is not
100, each <dt> is rendered indented further to the right,
starting where the previous <dt> ended.

dt1 dd1
dt2 dd2
dt3dd3
dt4dd4
dt5dd5

And, yes, the <dt>s and <dd>s are explicitly closed. Back to
<table>s ? I hope not...

<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
DT {
margin-bottom: 1em;
margin-top: 1em;
display: list-item;
list-style-image: none;
list-style-position: inside;
list-style-type: disc;
}
DD {
margin-bottom: 1em;
margin-top: 1em;
}

DL.compact {
margin-bottom: 1em;
margin-top: 1em;
}
DL.compact > DT {
float: left;
margin-bottom: 0;
margin-top: 0;
list-style-type: none;
}
DL.compact > DD {
margin-bottom: 0;
margin-top: 0;
margin-left: 8em;
}
</style>

--
André Majorel <URL:http://www.teaser.fr/~amajorel/>
Agree with them now, it will save so much time.

Jul 20 '05 #4

Christoph Paeper

*Andre Majorel*:

Term Definition of the term.
Longer Term
Definition of the longer term.

I've tried various things along the lines of DL.compact > DT {
display: compact; } but Mozilla insists on putting a line break
between the <dt> and <dd>.

Did you also provide a 'margin-left' for the 'dd's where the 'dl' can
reside?
However, support for CSS's "display:compact" is far worse than for HTML's
"<dl compact>", i.e. AFAIK only in Opera. I once tried to simulate something
similar in the thread starting with
<mid:b6**************************@posting.google.c om>
(<http://groups.google.com/groups?selm...79907%40postin
g.google.com>).

--
Only wimps use tape backup: _real_ men just upload their important stuff on ftp,
and let the rest of the world mirror it. (Linus Torvalds)

Jul 20 '05 #5