Broken Rights
Published 17 years, 5 months pastOnce I got a look at the markup of my latest Vitamin piece, “Stand Up For Your Rights!“, I winced. Four paragraphs, with each alternating bit of dialogue separated by a line break? Ay caramba!
And yet, I’m not sure I could have done better, structurally speaking. The only semi-reasonable alternative that comes to mind is a set of four blockquotes with paragraphs instead of line breaks, but that doesn’t work for me. They are, after all, invented conversations. I’m not quoting anything.
Maybe paragraphed text with a div, possibly classed, for each section (yes, all right, each division) of the article would have been a better choice. Or maybe not. What do you think?
Comments (28)
I wouldn’t say that what you’ve done is structurally wrong. In this context, I would think about it as almost an excerpt from a book. You’ve got paragraphs of text and new lines for each alternating person’s speech.
Also, I’ve noticed a typo near the bottom, “…how CSS works and how it comapres to older forms of layout…”
In English, aren’t new bits of dialogue supposed to be in new paragraphs? I think all those br tags should be p tags instead.
Each line of dialog should be a paragraph, and since you don’t want to divide the sections with “So you want to be a…” headings, I would separate them with <hr style=”border:none;” />
I”ve taken to marking up conversations in general as ordered lists, so that would be four lists in your case. I wouldn”t use any additional tags to mark them up;
qis vaguely plausible, but carries the same implications asblockquote, which don”t feel right, as you said.Even though you aren’t aren’t quoting someone (per se), you are quoting a (make believe) conversation. Fiction or non, it exists none the less.
Either way, the line breaks are sad.
Yeah, I would probably do it as an ordered list too. But I don’t think *anything* would feel quite right with what we’ve got available to us currently.
I’d probably go for an ordered list, semantically speaking – it does have a specific order. Tantek’s dialogue markup from WE05 was pretty cool, but in this case you’re not showing attribution for each line so the embedded DL is probably overkill.
I think you’re right that they’re not really quotes as such.
I’ve only felt vaguely uncomfortable about using
blockquotefor “invented” conversations. I rationalize it as quoting my imagination.I suspect that someone will rip that rationalization apart, so:
Well, I think they really should have been paragraphs in the sense that if the conversation were writtten in prose form, they would each be their own paragraph. That being said, I think what we’re running into here is an area I’ve often considered lacking in CSS. Specifically, there’s very little fine-grain control over the beginning and endings of lines. For instance, I believe (though I’m having a hard time tracking it down), the
<br>element is recommended to be rendered in CSS via using the::beforeand the obscure unicode newline entity — which, in my experience, really doesn’t even work properly.I’ve always thought it would solve a lot of problems if we could specify something like
line-break: [before|after|both|none], which would apply to inline-level elements and allow them to begin or end (or both) a line. This would be great for formatting things like definition lists or even simple<label> <input>pairs in a way that is much more explicit and versatile than what we have now.For instance, you could have used the
<q>element to wrap each line, allowing each one to begin a new line and had the blocks of dialogue wrapped in their own paragraphs. Of course, you still could have by setting the<q>elements to display:block, but then you’d have to deal with the issues of nested block-level elements when what you really want is just to have logical line endings.Yeah, I think one paragraph per quotation, classed as per the person speaking. All of these should be organised under blockquotes, and then the four sections put into classed divs. :-)
I think the use of lists is a bit exaggerated these days. Are lists just a matter of sequence? Or is list markup only for the texts that we humans clearly consider as lists?
I have never thought of conversations as lists before.
If a conversation is an ordered list, then one could say that all texts where order is important is a ordered list: Novels, articles, speeches, and almost all writings.
Mark: I think you want
display:blockanddisplay:inline-block. Unfortunately, browser support for the latter is absent.However, it presentation doesn”t seem to be the question here – it seems to me Eric was asking how to mark up this sort of narrative semantically, not how to sprinkle it with markup hooks for a stylesheet.
I found it hard to read. There are misleading visual cues to track new paragraphs and speaker changes. If there is a need to keep it compact by not putting a visual space between paragraphs, then the first line of each speaker change should be indented. It’s funny and it makes your point, but it’s a struggle to translate the formatting into the conversation you want us to hear in our heads automatically as we read it.
If it were in a book, each would be a paragraph. I would do it all with p’s if it were up to me.
Don’t overthink this. Vitamin’s line breaks are wrong; these are all separate paragraphs.
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.
I don’t know… HTML and XHTML don’t seem to have any provision for dialogue, as if the originator(s) didn’t think the web would present such a style; the proper tags aren’t really there, which is (as I see it) Eric’s point: it’s an oversight in the spec.
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.
Sorry, that second paragraph should read thusly:
It’s been a while since I have typed code into WordPress…
Definitely each passage should be a paragraph, as they would be in any printed dialog. I’m ambivalent about wrapping each block in its own div, but it certainly wouldn’t be “wrong.” The one thing I would add to make the four sections distinctly separate would be subheads like “On Farming…” or “On Web Design…” before each section.
Very timely piece, BTW. I was just having this same discussion with one of my project managers. :)
Arrrrrrrrrrggggghhhhhhh!!!
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.
Aristotle: Nope, both
display:blockanddisplay:inline-block, while very useful (the latter more in principle than practice thanks to weak support) don’t achieve the same effect as the line control I was discussing. Display block forces the element to create it’s own containing block and has potentially undesired consequences such as interfering with floated elements that follow it (something that wouldn’t happen with a<br>element).inline-blockdoesn’t create any line-breaks, which is useful in many situations, but not this one.Anyhow, as for Eric’s intent, I did mention that my thoughts on the semantic structure in the first line of my comment.
I’ve opened some books to see how typographically they handle dialogues and conversations.
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:
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.
Eh, nit-picky as I am, I think this situation is fine. Surely you have bigger fish to fry!
I’m in agreement with one of the other comments: invented or not, they are still (implied)conversations being quoted. Sure, there’s nothing to cite as source, but if you’re so inclined, you could always cite=”no real source”. It would certainly help readability both for sighted users and for screen readers. As it stands now, there’s not much break between each line of dialogue and it’s difficult to read.
I’ve struggled with how to represent dialogue on many occasions. As Will Kessel says above, the underlying markup just isn’t there. Is this an argument for a microformat?
In Robert Bringhurst’s The Elements of Typographic Style, on p.81 he says:
“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.
I have a similar question I’ve wrestled with a number of times. When displaying a page of products for an online store, it is common to display:
– an image of the product
– the title
– a short description
– the price
– a link to purchase or see a detailed view of the product
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?
Definition list? I think the HTML spec did suggest it could be used for tight label/value pairs, possibly even using dialogue as an example.
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.
I’m in the “separate <P>s for each line of dialogue, wrapped in a <blockquote>s for each conversation but if you can’t accept using <blockquote>s for imaginary quotes then separate each conversation with a styled <hr>” camp.
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.