Design dilemma: Table, here? or CSS?

[tlvp]

In dramatic dialogue like the following, I'd like all the *lines* to share
one left margin and all the *characters' names* to share that vertical as a
common right margin:

...
Iago: My noble Lord —
Othello: What dost thou say, Iago?
Iago: Did Michael Cassio,
When you wooed my lady, know of your love?
Othello: He did, from first to last. Why dost thou ask?
Iago: But for a satisfaction of my thought —
No further harm.
...

(apologies if this NNTP ASCII rendering doesn't quite achieve that).

I can see achieving that on a web page by using a table -- one row per
'speech', with each row having two cells: the left one with align attribute
set = "right", the right one with align attribute set = "left".

How would one use CSS to achieve a similar end? CSS details most welcome.

TIA. If this is better for ciwas, I'll follow. And cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[dorayme]

In article <15jp2x9or2d7o$.1h17f1kfhyibp$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> In dramatic dialogue like the following, I'd like all the *lines* to share
> one left margin and all the *characters' names* to share that vertical as a
> common right margin:
>

What does the "that" refer to? You would normally use "that" in such a
request when you have either previously identified something to which
it clearly refers to.

...

> I can see achieving that on a web page by using a table -- one row per
> 'speech', with each row having two cells: the left one with align attribute
> set = "right", the right one with align attribute set = "left".
>
> How would one use CSS to achieve a similar end? CSS details most welcome.
>

CSS is not the opposite of HTML tables. Are you asking how to CSS
style (as opposed to HTML attribute style) a table or are you asking
how to avoid HTML tables for your task?

> TIA. If this is better for ciwas, I'll follow. And cheers, -- tlvp

It is a CSS question (of some kind at least), why are you wondering?

--
dorayme

[Jukka K. Korpela]

2013-03-24 1:26, tlvp wrote:

> In dramatic dialogue like the following, I'd like all the *lines* to share
> one left margin and all the *characters' names* to share that vertical as a
> common right margin:

[...]

>
> I can see achieving that on a web page by using a table -- one row per
> 'speech', with each row having two cells: the left one with align attribute
> set = "right", the right one with align attribute set = "left".

Right. This is the most robust way. The second row does not really need
the align attribute, since align="left" is the default (unless you set
dir="rtl", which you won't, for English text). It's also the way that
will most probably get flamed by "modern" "web designers". It’s simple
and works on all browsers, but their dogmas include “thou shalt not use
<table>” or, in some sects, “thou shalt not use <table> for layout”
(where “for layout” probably covers almost anything but statistical
tables and relatives).

But if you don’t need to care about flames, then there’s just a minor
problem: it’s a bit dull to have so many class attributes. For some
broken browsers, adding

<col align="right">
<col>

right after the <table> tag would take care of the alignment. The
problem with this is that by HTML specs, it should not work, and in
practice it does not work in modern browsers. This has a complicated
background, so let’s skip to the solution:

> How would one use CSS to achieve a similar end? CSS details most welcome.

Using a <table> element as outlined but without class attributes, you
can handle the alignment with a simple style sheet:

<style>
td:first-child { text-align: right; }
</style>

You can use this in conjunction with the <col> tags, to cover both
modern and old browsers.

If you do need to care about flames, or if you need to avoid <table> for
other reasons, then you can write e.g.

<div class="dialog">
<p><span class="person">Iago:</span> <span class="text">My noble Lord —
</span></p>
[…]
</div>

with CSS like

<style>
.dialog { display: table; }
.dialog p { display: table-row; margin: 0; }
.dialog .person, .dialog .text { display: table-cell; }
.dialog .person { text-align: right; }
</style>

(You could dispense with the class attributes, except for
class="dialog", by using selectors like
.dialog > p > span:first-child
at the cost of losing the formatting in some old borders that don't grok
such “advanced” CSS.)

This has the problem that old versions of IE (and some other rather old
browsers) do not support display: table and friends. In this case, the
text would still be readable, though without the desired formatting.

Other options include using markup as above but with different styling
(which works on all CSS-enabled browsers) like

<style>
.dialog p { margin: 0; }
.dialog .person { width: 4em; float: left; text-align: right; }
.dialog .text { display: block; margin-left: 4.2em; }
</style>

The main issue with this is that you need to make a guess on the width
of the first “column”. Since this is not table formatting, you cannot
just let the browser decide how wide a column needs to be. But in a
simple case, where the names can be expected to be relatively short,
this is probably tolerable.

A few days ago I would have said that this is pointlessly complicated as
compared with <table>. But now I have been struggling with some non-WWW
use of HTML where I would need to display a <table> as more or less
linearized, i.e. to do the opposite of simulating HTML <table> in CSS.
While rather straighforward in principle, it seems to be problematic in
practice due to limitations in e.g. epub-related software. Using <span>
and <div> in markup might actually be more practical... but I’d had to
do that for some content that is really tabular in nature. (A dialog
isn’t; it *can* be described and marked up as a table, but it is not
*inherently* tabular, I would say.)

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

[Thomas Mlynarczyk]

tlvp schrieb:

> In dramatic dialogue like the following, I'd like all the *lines* to share
> one left margin and all the *characters' names* to share that vertical as a
> common right margin:
>
> ...
> Iago: My noble Lord —
> Othello: What dost thou say, Iago?
> Iago: Did Michael Cassio,
> When you wooed my lady, know of your love?
> Othello: He did, from first to last. Why dost thou ask?
> Iago: But for a satisfaction of my thought —
> No further harm.
> ...

According to the HTML 4.01 specification, a definition list can be used
for marking up dialogues:

<dl>
<dt>Iago:</dt>
<dd>My noble Lord —</dd>
<dt>Othello:</dt>
<dd>What dost thou say, Iago?</dd>
<dt>Iago:</dt>
<dd>Did Michael Cassio,<br>
When you wooed my lady, know of your love?</dd>
<dt>Othello:</dt>
<dd>He did, from first to last. Why dost thou ask?</dd>
<dt>Iago:</dt>
<dd>But for a satisfaction of my thought —<br>
No further harm.</dd>
</dl>

And with the following styles the desired layout can be achieved:

dt { clear: both; float: left; width: 5em; text-align: right; }
dd { float: left; margin-left: 1em; }

(This does not work with IE below 8, but I'm sure that can be fixed.)

Greetings,
Thomas

--
Ce n'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison!
(Coluche)

[Martin Leese]

Thomas Mlynarczyk wrote:

> According to the HTML 4.01 specification, a definition list can be used
> for marking up dialogues:

And in HTML 5, the dl element now represents
an association list of name-value groups,
and is no longer appropriate for marking up
dialogue.

Instead, there was going to be a <dialog>
element, but that has been redeployed for
something else. Today, authors are
encouraged to mark up conversations using <p>
elements and punctuation; visit:
http://www.w3.org/TR/html5/common-idioms.html#conversations

Tomorrow, who knows?

--
Regards,
Martin Leese
E-mail: ple...@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[tlvp]

On Sun, 24 Mar 2013 11:35:35 +1100, dorayme wrote:

> In article <15jp2x9or2d7o$.1h17f1kfhyibp$.d...@40tude.net>,
> tlvp <mPiOsUcB...@att.net> wrote:
>
>> In dramatic dialogue like the following, I'd like all the *lines* to share
>> one left margin and all the *characters' names* to share that vertical as a
>> common right margin:
>>
>
> What does the "that" refer to?

By itself, the "that" has no referent. The phrase "that vertical" refers to
the "one left margin" shared by all the dramatic characters' lines.

> You would normally use "that" in such a
> request when you have either previously identified something to which
> it clearly refers to.

Quite so. Apologies if you still feel I did not do so.

> CSS is not the opposite of HTML tables. Are you asking how to CSS
> style (as opposed to HTML attribute style) a table or are you asking
> how to avoid HTML tables for your task?

Both. Absent any answer, though, I'll stick with the TABLE approach.

>> TIA. If this is better for ciwas, I'll follow. And cheers, -- tlvp
>
> It is a CSS question (of some kind at least), why are you wondering?

Not wondering. Just ready to follow best practice, if pointed to it.

Cheers, and TIA -- tlvp

[tlvp]

On Sun, 24 Mar 2013 14:20:45 +0100, Thomas Mlynarczyk wrote, in re:

... [ dramatic dialogue ] ...

> According to the HTML 4.01 specification, a definition list can be used
> for marking up dialogues:
>
> <dl>
> <dt>Iago:</dt>
> <dd>My noble Lord —</dd>
> <dt>Othello:</dt>
> <dd>What dost thou say, Iago?</dd>
> <dt>Iago:</dt>
> <dd>Did Michael Cassio,<br>
> When you wooed my lady, know of your love?</dd>
> <dt>Othello:</dt>
> <dd>He did, from first to last. Why dost thou ask?</dd>
> <dt>Iago:</dt>
> <dd>But for a satisfaction of my thought —<br>
> No further harm.</dd>
> </dl>
>
> And with the following styles the desired layout can be achieved:
>
> dt { clear: both; float: left; width: 5em; text-align: right; }
> dd { float: left; margin-left: 1em; }

That's a very intriguing approach, Thomas, besten Dank / Dzieki mocno!

> (This does not work with IE below 8, but I'm sure that can be fixed.)

Are IE versions 7 and earlier (and NN 4.73, itd) still relatively common?
If so, perhaps some other more universal approach would be better.

> Greetings,
> Thomas

Cheers, and thanks again, -- tlvp

[tlvp]

On Sun, 24 Mar 2013 10:42:10 +0200, Jukka K. Korpela wrote:

> 2013-03-24 1:26, tlvp wrote:
>
>> In dramatic dialogue like the following, I'd like all the *lines* to share
>> one left margin and all the *characters' names* to share that vertical as a
>> common right margin:
> [...]
>>
>> I can see achieving that on a web page by using a table -- one row per
>> 'speech', with each row having two cells: the left one with align attribute
>> set = "right", the right one with align attribute set = "left".
>

> Right. This is the most robust way. ...

Based on reactions here this far, I'm inclined to follow either this path
of (what to me is) least resistance, or Thomas Mlynarczyk's DL/DT/DD
approach, if that can be rendered more universal than at first appears.

Thanks, in any event, for not instantly and reflexively barring the TABLE
approach, but rather actually approving it :-) .

> ... The second row does not really need

> the align attribute, since align="left" is the default

Of course. I was trying to fill in all the layout details I had in my
mind's eye FBO the readership here, hence included that aspect.

> But if you don’t need to care about flames, ...

Flame is what keeps me warm in winter -- I need warmth where I live.

I'll retain what follows just for my records, no comment thereto here:

> ... then there’s just a minor

Again, my thanks! And my condolences vis-à-vis ePub (and/or Mobi) specs. I
too have been batting my head upon those brick walls, not getting very far,
wishing to recast some nearly CSS-free HTML as Mobi/Kindle and/or ePub.
Still, ciwah is not the proper venue (is it?) for airing those problems.

Cheers, -- tlvp

[tlvp]

On Sun, 24 Mar 2013 09:28:27 -0600, Martin Leese wrote:

> Thomas Mlynarczyk wrote:
>
>> According to the HTML 4.01 specification, a definition list can be used
>> for marking up dialogues:
>
> And in HTML 5, the dl element now represents
> an association list of name-value groups,
> and is no longer appropriate for marking up
> dialogue.

So I should stick with 4.01, if using DL?

> Instead, there was going to be a <dialog>

> element, but ...

Is the punch line here the same as for the "Mother used to love me" joke?

> ... but she died :-{ .

Cheers, -- tlvp

[Thomas Mlynarczyk]

tlvp schrieb:

>> <dl>
>> <dt>Iago:</dt>
>> <dd>My noble Lord —</dd>
>> <dt>Othello:</dt>
>> <dd>What dost thou say, Iago?</dd>
>> <dt>Iago:</dt>
>> <dd>Did Michael Cassio,<br>
>> When you wooed my lady, know of your love?</dd>
>> <dt>Othello:</dt>
>> <dd>He did, from first to last. Why dost thou ask?</dd>
>> <dt>Iago:</dt>
>> <dd>But for a satisfaction of my thought —<br>
>> No further harm.</dd>
>> </dl>

I did some more experimenting, and the following also works in IE 5,6,7:

dt { clear: both; float: left; width: 5em; text-align: right; }

dd { display: block; margin-left: 5em; padding-left: 1em; }

> Are IE versions 7 and earlier (and NN 4.73, itd) still relatively common?

I consider IE5 about to become extinct, IE6 and 7 to follow within 1-2
years, but that's just my personal opinion and others may disagree.
There are developers who already completely ignore anything below IE8.

IE4 and lower as well as NN 4.7x can be considered extinct, I guess. But
even if someone is still using them: With CSS disabled, the unstyled
<dl> will produce a nice layout, well adapted to your purpose.

[tlvp]

On Sun, 24 Mar 2013 22:28:09 +0100, Thomas Mlynarczyk wrote:

> tlvp schrieb:
>
>>> <dl>
>>> <dt>Iago:</dt>
>>> <dd>My noble Lord —</dd>
>>> <dt>Othello:</dt>
>>> <dd>What dost thou say, Iago?</dd>
>>> <dt>Iago:</dt>
>>> <dd>Did Michael Cassio,<br>
>>> When you wooed my lady, know of your love?</dd>
>>> <dt>Othello:</dt>
>>> <dd>He did, from first to last. Why dost thou ask?</dd>
>>> <dt>Iago:</dt>
>>> <dd>But for a satisfaction of my thought —<br>
>>> No further harm.</dd>
>>> </dl>
>
> I did some more experimenting, and the following also works in IE 5,6,7:
>
> dt { clear: both; float: left; width: 5em; text-align: right; }
> dd { display: block; margin-left: 5em; padding-left: 1em; }

Good to know: thanks for carrying out my testing for me :-) .

>> Are IE versions 7 and earlier (and NN 4.73, itd) still relatively common?
>
> I consider IE5 about to become extinct, IE6 and 7 to follow within 1-2
> years, but that's just my personal opinion and others may disagree.

Speaking for myself, I still have IE6 on one XP system and IE 7 on a Vista.

> There are developers who already completely ignore anything below IE8.

Not me: the only IE8 installation here is on one Win 7 system. And there's
no IE later than 8 on any system here.

> IE4 and lower as well as NN 4.7x can be considered extinct, I guess.

I would sort of hope so :-) .

> ... even if someone is still using them: With CSS disabled, the unstyled

> <dl> will produce a nice layout, well adapted to your purpose.

That's the sort of "best of all possible worlds" scenario I'd be glad for.

[dorayme]

In article <1bfozapsii5l$.1hqwrerftds6m$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Sun, 24 Mar 2013 11:35:35 +1100, dorayme wrote:
>
> > In article <15jp2x9or2d7o$.1h17f1kfhyibp$.d...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> In dramatic dialogue like the following, I'd like all the *lines* to share
> >> one left margin and all the *characters' names* to share that vertical as a
> >> common right margin:
> >>
> >
> > What does the "that" refer to?
>
> By itself, the "that" has no referent.

Now and then, "that" does" find itself, poor thing, *on its own*. Like
in a dictionary entry. Though, not to feel too sorry for it, it does
have other nominally lonely other words just above and just below it.

The idea that the meanings of words were the objects they referred to
was criticised for the obvious reason that words like "it" and "and"
and "this" and "that" could hardly refer to any object. Wittgenstein
popularised the idea that meaning was use (dramatically changing what
he had decades earlier thought in the trenches of WW1).

The fact is that "that" in a sentence is never "on its own". It has a
function and needs to clearly refer to something mentioned.

...

>
> Both. Absent any answer, though, I'll stick with the TABLE approach.

Fair enough, probably the easiest way because of the built-in grid DNA
of tables. You have said you can see how to achieve with attributes,
styling with CSS is easy to substitute. A main style you will need is
probably the 'text-align: right;' one.

Guessing at what you want from your example. Given two characters A
and B, you want A's name to appear at far left, The right of B's name
to line up with the right of A's name. The left of all the things that
either says to be lined up neatly on the very same vertical. And now
and then when they talk too much, or to satisfy the logic of poetry,
their speeches to break to the next line...

They say a picture is worth a thousand words. Your example was a good
picture.

Is this what you want:

http://commonreader.com.au/dorayme/iago.html

that has simple enough CSS rather than HTML attributes.

You can perhaps use instead non-table elements styled to display as
tables, table cells etc.

--
dorayme

[Jukka K. Korpela]

2013-03-24 23:28, Thomas Mlynarczyk wrote:

> IE4 and lower as well as NN 4.7x can be considered extinct, I guess. But
> even if someone is still using them: With CSS disabled, the unstyled
> <dl> will produce a nice layout, well adapted to your purpose.

Not really. In modern as well as in ancient browsers, an unstyled <dl>
is displayed so that each <dt> appears on a line of its own, and each
<dd> appears as an indented block. This deviates from a normal layout of
a dialog.

On pragmatic principles, one should use the HTML markup that gives the
most reasonable default (i.e., non-CSS) rendering, unless there is a
functional reason not to use it. (By “functional reason”, I mean the
ways browsers, assistive software, or search engines may handle some
elements.)

And in this case, a table is such markup.

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

[Jukka K. Korpela]

2013-03-24 22:04, tlvp wrote:

> On Sun, 24 Mar 2013 09:28:27 -0600, Martin Leese wrote:
>
>> Thomas Mlynarczyk wrote:
>>
>>> According to the HTML 4.01 specification, a definition list can be used
>>> for marking up dialogues:
>>
>> And in HTML 5, the dl element now represents
>> an association list of name-value groups,
>> and is no longer appropriate for marking up
>> dialogue.
>
> So I should stick with 4.01, if using DL?

"Using HTML 4.01" vs. using some other version of HTML isn't really
relevant. Browsers do not acknowledge HTML versions (contrary to common
claims about doctype strings telling browsers what version of HTML is
used). Each browser consumes tags in its own way; the most realistic
description of this is HTML5 CR *if* you mostly ignore all the new tags
(which are only partly supported by modern browsers).

What each version of HTML says about "semantics" is almost exclusively
just idle talk. For example, in reality, the <dl> element has never
been, and probably will never be, anything but a way to achieve certain
layout, a "variable list" (a list consisting of short items and
associated definitions, descriptions, or notes, presented in a certain
layout suitable for such lists).

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

[Thomas Mlynarczyk]

Jukka K. Korpela schrieb:
[unstyled <dl> will produce a layout well adapted to dialogues]

> Not really. In modern as well as in ancient browsers, an unstyled <dl>
> is displayed so that each <dt> appears on a line of its own, and each
> <dd> appears as an indented block.

I consider this very well suited for the purpose in question.

> This deviates from a normal layout of a dialog.

It does? Maybe. But it is still very usable in this context.

> On pragmatic principles, one should use the HTML markup that gives the
> most reasonable default (i.e., non-CSS) rendering, unless there is a
> functional reason not to use it. (By “functional reason”, I mean the
> ways browsers, assistive software, or search engines may handle some
> elements.)

Yes. Thus, <dl> is very well suited.

> And in this case, a table is such markup.

It is certainly a /possible/ markup, but why bother with something as
complex as a table when a simple and elegant <dl> will do just as fine
if not better? And to re-iterate: in HTML 4.01 <dl> is the intended
element for dialogues. KISS applies.

[Jukka K. Korpela]

2013-03-25 21:09, Thomas Mlynarczyk wrote:

> Jukka K. Korpela schrieb:
> [unstyled <dl> will produce a layout well adapted to dialogues]
>> Not really. In modern as well as in ancient browsers, an unstyled <dl>
>> is displayed so that each <dt> appears on a line of its own, and each
>> <dd> appears as an indented block.
>
> I consider this very well suited for the purpose in question.
>
>> This deviates from a normal layout of a dialog.
>
> It does? Maybe. But it is still very usable in this context.

Can you cite a printed publication that renders a dialog in a manner
described above, i.e. the name of a character on a separate line?

> It is certainly a /possible/ markup, but why bother with something as
> complex as a table when a simple and elegant <dl> will do just as fine
> if not better?

The question was about right-aligning the character name in a column, on
the same line where the text spoken appears. How do you achieve that in
HTML?

> And to re-iterate: in HTML 4.01 <dl> is the intended
> element for dialogues. KISS applies.

There is nothing simple about the mess around in <dl> in HTML 4.01. It
primarily describes <dl> as a definition list, a list of term/definition
pairs, then starts babbling about its use for something completely
different.

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

[Thomas Mlynarczyk]

Jukka K. Korpela schrieb:

> Can you cite a printed publication that renders a dialog in a manner
> described above, i.e. the name of a character on a separate line?

No. (But that doesn't mean such a publication doesn't exist.)

> The question was about right-aligning the character name in a column, on
> the same line where the text spoken appears. How do you achieve that in
> HTML?

You don't. HTML is for marking up structure and semantics, not for
presentation. That's what CSS is for.

> There is nothing simple about the mess around in <dl> in HTML 4.01. It
> primarily describes <dl> as a definition list, a list of term/definition
> pairs, then starts babbling about its use for something completely
> different.

Well,

<dl>
<dt>...</dt><dd>...</dd>
</dl>

is certainly simpler, markup-wise, than

<table>
<tr>
<th>...</th><td>...</td>
</tr>
</table>

which requires at least one more pair of tags and without taking further
"measures" (i.e. styling), the default rendering of the latter is not as
appealing as the former.

I must admit, however, that the W3C's decision to recommend using the
markup of a "definition list" for marking up dialogues is indeed not
very ... intuitive. They probably meant something like "a sequence of
key-value pairs" and couldn't come up with a better name for the thing.

[tlvp]

On Mon, 25 Mar 2013 11:11:15 +1100, dorayme wrote:

> They say a picture is worth a thousand words. Your example was a good
> picture.

Thank you, kind lady.

> Is this what you want:
>
> http://commonreader.com.au/dorayme/iago.html

Indeed, it meets all my requirements :-) -- thank you!

> that has simple enough CSS rather than HTML attributes.

Indeed it does.

> You can perhaps use instead non-table elements styled to display as
> tables, table cells etc.

I have no need to disguise a table, for fun, using non-table elements :-) .
What you provided offers ample example for me to follow, thanks.

Cheers, -- tlvp

[tlvp]

On Mon, 25 Mar 2013 20:09:12 +0100, Thomas Mlynarczyk wrote:

> Jukka K. Korpela schrieb:
> [unstyled <dl> will produce a layout well adapted to dialogues]
>> Not really. In modern as well as in ancient browsers, an unstyled <dl>
>> is displayed so that each <dt> appears on a line of its own, and each
>> <dd> appears as an indented block.
>
> I consider this very well suited for the purpose in question.
>
>> This deviates from a normal layout of a dialog.
>
> It does? Maybe. But it is still very usable in this context.

An illustration of the unstyled dl/dt/dd *look* (though that's not how the
page achieves it):

http://shakespeare.mit.edu/hamlet/hamlet.5.1.html .

Perfectly suitable as a script. Not the look I was after, though :-) .
Equally suitable as a script, yet also not the look I was after:

http://www.opensourceshakespeare.org/views/plays/play_view.php?WorkID=tempest&Act=5&Scene=1&Scope=scene

Tables, a la dorayme and Jukka, and my first inclination, will probably be
my way to go. Thanks to all who've voiced opinions. And cheers, -- tlvp

[Jukka K. Korpela]

2013-03-26 6:31, tlvp wrote:

> An illustration of the unstyled dl/dt/dd *look* (though that's not how the
> page achieves it):
>
> http://shakespeare.mit.edu/hamlet/hamlet.5.1.html .

No, unstyled dl/dt/dd does not bold the dt element contents or leave
empty lines.

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

[Jukka K. Korpela]

2013-03-26 0:16, Thomas Mlynarczyk wrote:

> Jukka K. Korpela schrieb:
>
>> Can you cite a printed publication that renders a dialog in a manner
>> described above, i.e. the name of a character on a separate line?
>
> No. (But that doesn't mean such a publication doesn't exist.)

What it means is that such rendering is not normal, common, usual, or
typical.

>> The question was about right-aligning the character name in a column,
>> on the same line where the text spoken appears. How do you achieve
>> that in HTML?
>
> You don't.

I do, by using <table>.

> HTML is for marking up structure and semantics, not for
> presentation. That's what CSS is for.

I used to preach that gospel too. But in reality, <table> is as
structural and as semantic, or as little structural and semantic, as
<dl>. The <dl> markup does not say anything about the meaning of its
content. And to be exact, it is *less* structural than <table>, as I
will shortly show.

>> There is nothing simple about the mess around in <dl> in HTML 4.01. It
>> primarily describes <dl> as a definition list, a list of
>> term/definition pairs, then starts babbling about its use for
>> something completely different.

You don’t comment on that part of my message, despite quoting it. It
demonstrates how <dl> is semantically empty or, worse, grossly ambiguous.

> Well,
>
> <dl>
> <dt>...</dt><dd>...</dd>
> </dl>
>
> is certainly simpler, markup-wise, than
>
> <table>
> <tr>
> <th>...</th><td>...</td>
> </tr>
> </table>
>
> which requires at least one more pair of tags and without taking further
> "measures" (i.e. styling), the default rendering of the latter is not as
> appealing as the former.

Whether the default rendering is appealing depends on the eye of the
beholder. It is certainly more compact and closer to how dialogs are
normally shown.

All the end tags except </dl> and </table> are optional here, so what
really distinguishes the syntaxes are the <tr> tags that group cells
into rows. And the reason why they have no counterpart in <dl> is simply
that <dl> in inherently less structural. Each set of consecutive <dt>
elements is supposed to relate to the set of consecutive <dd> elements
that follow it. In the most common case, each <dt> pairs with the
following <dd>. So the structure is *implicit*, not expressed in markup.

This also means that you cannot refer to a pair (or group) of <dt> and
<dd> elements as an *element* in CSS or in JavaScript (or with a link).
Due to the syntax of <dl>, you cannot even add extra markup for such
grouping, or for grouping sets of pairs.

Contrast this with the *structure* provided by <tr>, as well as the
possibility of grouping <tr> elements with <tbody>.

> I must admit, however, that the W3C's decision to recommend using the
> markup of a "definition list" for marking up dialogues is indeed not
> very ... intuitive.

The logic of all this becomes clear when you realize that <dl> is layout
concept but they tried to formulate it in terms that sounded more
“semantic” or “logical” or “structural” – creating a semantic, logical,
and structural mess. The note about dialogs may, however, have been just
a wrong idea that someone got when asking “what markup should we use for
dialogs”. No markup was designed for dialogs, but they tried to pretend
that <dl> would be suitable.

> They probably meant something like "a sequence of
> key-value pairs" and couldn't come up with a better name for the thing.

They really meant a “variable list”, a common layout concept (though not
as common as a bulleted list, <ul>, or a numbered list, <ol>).

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

[dorayme]

In article <1gnd35la8ntzr.1...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Mon, 25 Mar 2013 11:11:15 +1100, dorayme wrote:
>
> > They say a picture is worth a thousand words. Your example was a good
> > picture.
>
> Thank you, kind lady.
>

Y should only have look at my beastly posts to know I am no lady but
rather something concocted far from this earth.

> > Is this what you want:
> >
> > http://commonreader.com.au/dorayme/iago.html
>
> Indeed, it meets all my requirements :-) -- thank you!
>
> > that has simple enough CSS rather than HTML attributes.
>
> Indeed it does.
>
> > You can perhaps use instead non-table elements styled to display as
> > tables, table cells etc.
>
> I have no need to disguise a table, for fun, using non-table elements :-) .
> What you provided offers ample example for me to follow, thanks.

I suppose poetry and even poetically structured plays have a quality
to them that cannot be faithfully represented by the usual treatment
we expect of normal prose, namely that the text should be flexible. In
this normal latter requirement, a real HTML table is not always the
most desirable thing to use because cells don't wrap and wrapping is
the great saviour of the narrow viewport.

In other words, the promise of table-like or complicated grid
structure via CSS, is not just a temptation to avoid HTML tables for
the ideal of semantic integrity but more a practical thing in that if
people turn the CSS off or if they have their own styles, they can
still get the message.

I know, it probably does not apply in your case. If a particular
layout, a style, is part of the message then, it is important
obviously to maintain the look of the thing for sighted visitors.

It is an interesting question how to present such a dialog as yours
for the blind visitor. I imagine all sorts of difficulties, but an
HTML table would not exactly alleviate them. I am not suggesting you
use anything other than a table, life is short.

--
dorayme

[tlvp]

On Tue, 26 Mar 2013 07:41:26 +0200, Jukka K. Korpela wrote:

> 2013-03-26 6:31, tlvp wrote:
>
>> An illustration of the unstyled dl/dt/dd *look* (though that's not how the
>> page achieves it):
>>
>> http://shakespeare.mit.edu/hamlet/hamlet.5.1.html .
>
> No, unstyled dl/dt/dd does not bold the dt element contents or leave
> empty lines.

You're right. I exaggerated. But I was thinking of the general layout look,
not its font styling or actual vertical spacing, when I wrote. Sorry.

Cheers, -- tlvp