meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Broken Rights

Once 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?

28 Responses»

    • #1
    • Comment
    • Mon 23 Oct 2006
    • 2316
    Paul Armstrong wrote in to say...

    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…”

    • #2
    • Comment
    • Mon 23 Oct 2006
    • 2331
    Noah Tye wrote in to say...

    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.

    • #3
    • Comment
    • Mon 23 Oct 2006
    • 2344
    Justin Watt wrote in to say...

    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;” />

    • #4
    • Comment
    • Mon 23 Oct 2006
    • 2358
    Aristotle Pagaltzis wrote in to say...

    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; q is vaguely plausible, but carries the same implications as blockquote, which don”t feel right, as you said.

    • #5
    • Comment
    • Tue 24 Oct 2006
    • 0035
    Noel Jackson wrote in to say...

    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.

    • #6
    • Comment
    • Tue 24 Oct 2006
    • 0044
    John Hoare wrote in to say...

    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.

    • #7
    • Comment
    • Tue 24 Oct 2006
    • 0142
    Ben Buchanan wrote in to say...

    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.

    • #8
    • Comment
    • Tue 24 Oct 2006
    • 0147
    Mark Jaquith wrote in to say...

    I’ve only felt vaguely uncomfortable about using blockquote for “invented” conversations. I rationalize it as quoting my imagination.

    I suspect that someone will rip that rationalization apart, so:

    Me: LA LA LA LA I CAN’T HEAR YOU LA LA

    • #9
    • Comment
    • Tue 24 Oct 2006
    • 0318
    Mark Kawakami wrote in to say...

    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 ::before and 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.

    • #10
    • Comment
    • Tue 24 Oct 2006
    • 0408
    Philip Withnall wrote in to say...

    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. :-)

    • #11
    • Comment
    • Tue 24 Oct 2006
    • 0456
    Tor Erik Alræk wrote in to say...

    I”ve taken to marking up conversations in general as ordered lists, so that would be four lists in your case.

    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.

    • #12
    • Comment
    • Tue 24 Oct 2006
    • 0650
    Aristotle Pagaltzis wrote in to say...

    Mark: I think you want display:block and display: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.

    • #13
    • Comment
    • Tue 24 Oct 2006
    • 0823
    Virginia wrote in to say...

    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.

    • #14
    • Comment
    • Tue 24 Oct 2006
    • 0848
    Nathan wrote in to say...

    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.

    • #15
    • Comment
    • Tue 24 Oct 2006
    • 0905
    Mike Mariano wrote in to say...

    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.

    • #16
    • Comment
    • Tue 24 Oct 2006
    • 1049
    Will Kessel wrote in to say...

    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.

    • #17
    • Comment
    • Tue 24 Oct 2006
    • 1054
    Will Kessel wrote in to say...

    Sorry, that second paragraph should read thusly:

    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…

    • #18
    • Comment
    • Tue 24 Oct 2006
    • 1055
    Porter wrote in to say...

    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. :)

    • #19
    • Comment
    • Tue 24 Oct 2006
    • 1058
    Will Kessel wrote in to say...

    Arrrrrrrrrrggggghhhhhhh!!!

    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.

    • #20
    • Comment
    • Tue 24 Oct 2006
    • 1146
    Mark Kawakami wrote in to say...

    Aristotle: Nope, both display:block and display: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-block doesn’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.

    • #21
    • Comment
    • Tue 24 Oct 2006
    • 1148
    Martijn ten Napel wrote in to say...

    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:

    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.

    • #22
    • Comment
    • Tue 24 Oct 2006
    • 1241
    Amber wrote in to say...

    Eh, nit-picky as I am, I think this situation is fine. Surely you have bigger fish to fry!

    • #23
    • Comment
    • Tue 24 Oct 2006
    • 1422
    John Lascurettes wrote in to say...

    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.

    • #24
    • Comment
    • Tue 24 Oct 2006
    • 1637
    Martin Sutherland wrote in to say...

    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?

    • #25
    • Comment
    • Tue 24 Oct 2006
    • 1740
    Adrienne wrote in to say...

    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.

    • #26
    • Comment
    • Tue 24 Oct 2006
    • 1815
    David Ellenwood wrote in to say...

    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?

    • #27
    • Comment
    • Tue 24 Oct 2006
    • 2051
    pauldwaite wrote in to say...

    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.

    • #28
    • Comment
    • Mon 30 Oct 2006
    • 1835
    Michael McCorry wrote in to say...

    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.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


October 2006
SMTWTFS
September November
1234567
891011121314
15161718192021
22232425262728
293031  

Sidestep

Feeds

Extras