I agree with Tor Erik Alræk (#11) that using ordered lists would be a tad overkill. I see each conversation as mini-chapters rather than a structured list.

You’ve have to include the speaker’s name (in the <dt>) for every line, but that might be helpful to the reader. And it can be hidden with CSS.

I guess each “scene” would be one list.

To me, from a purely structural point of view, this seems to be an unordered list of items to be displayed. Practically speaking however, it seems unreasonable to try and get that whole list of elements to display properly using <span> tags with classes inside of a single <li> tag for each product.

What I tend to do is wrap each product in a <div> and give each element a heading or paragraph tag depending on its importance.

Does anyone any thoughts or a better solution for this?

“5.2.3 Use the em dash to introduce speakers in narrative dialogue.

“The em dash, followed by a thin space (M/5) or word space, is the normal European method of marking up dialogue, and it is much less fussy than quotation marks…”

On low-resolution monitors, small marks such as curly quotes are just fuzzy blobs. The clarity of an em dash is particularly desirable in such situations.

This, of course, only applies to the visual presentation of the piece. I tend to agree with the others that hold that the paragraph tag is probably the best way to separate each line. A div separating each block, with a visual separator between each block, would certainly help.

I appreciate your attention to detail. Too many web “designers” give short shrift to legibility & readability on the web.

It depends if there is an actual indication of the person speaking (“Look, a bird!”, said Eric) or if the dialogue is impersonal.

When it is impersonal, there often is a tab at the first line of each phrase, and there are no white spaces in between, so it seems that it isn’t a paragraph structure.

Even if the conversation is fictional, I would say that these are quotes or citations from fictional persons. Looking at the specs I would say that this line could be of value:

These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don’t require paragraph breaks.

I quess that the q-tag would be the proper mark-up structure, and every new q-tag should be indented and starting at a new line to get the mark-up right.

Unfortunatly the q-tag is not rendered very well often and I haven’t got a single clue how to indicate which person is speaking for non-visual rendering; I guess that you want to give each quotation its own voice in case of a conversation. I don’t know if this feature would be mark-up or layout strictly speaking.

I do agree though that it is hard given the limited options we have to do this properly.

Anyhow, as for Eric’s intent, I did mention that my thoughts on the semantic structure in the first line of my comment.

Using existing tags and current CSS solutions, the br tag does seem to ba a little weak; p tags seem to be a better solution. I think I would div the conversation and then style the ps so that the first line indents; further, I might tighten the p”s line-height property, or increase the p”s vertical margins to help guide the eye better.

Now you know why I don’t comment on people’s blogs too often: too much of a PIA. Sorry, Eric, it’s not your fault.

Very timely piece, BTW. I was just having this same discussion with one of my project managers. :)

Using existing tags and current CSS solutions, the tag does seem to ba a little weak; tags seem to be a better solution. I think I would the conversation and then style the s so that the first line indents; further, I might tighten the ‘s line-height property, or increase the “s vertical margins to help guide the eye better.

It’s been a while since I have typed code into WordPress…

Using existing tags and current CSS solutions, the tag does seem to ba a little weak; tags seem to be a better solution. I think I would the conversation and then style the s so that the first line indents; further, I might tighten the line-height property, or increase the ‘s vertical margins to help guide the eye better.

You could then use the to visually separate the conversations, or (better) use a faint gray border-bottom on each to give a more subtle visual cue (less markup).

This way, you could wrap up the entire block of conversation in a couple of CSS rules, short and sweet.

You want separation between different sections of the article? That’s what a horizontal rule is for.

It would be done exactly the same way a printed publication.