30

I have a sketch that I want to put up on my website, and I also intend to write a short play at some point which I'd also want to make freely available.

I'm trying to work out the best way of representing this in HTML. I basically need two columns - one for the character speaking, and one for the text. Each speech obviously needs to line up with the speaker though. In other words, something like this:

    Jeff        This sure is a nice website we've got now.

    Joel        It certainly is. By the way, working at FogCreek rocks.

    Jeff        Of course it does. Have you played Rock Band yet? It's
                 a lot of fun.

(Well it's better than lorem ipsum...)

I know how I could do this with HTML tables (with one table row per speech) but that seems pretty ugly, and everyone certainly seems to be keen on using CSS to represent non-tabular data. I can't see how this really counts a tabular data - my use of "row" and "column" earlier was to do with the layout rather than the fundamental data.

So, any ideas? I think most of the script websites I've seen (not many, admittedly) either use <pre> like my example above, or don't bother trying to keep the normal script format, instead just prefixing each paragraph with the speaker's name. (See the podcast wiki for an example of this style.) I'm having trouble working out even what HTML elements I should be using to represent this, frankly - a dictionary definition list with the speaker as the term and the speech as the definition is probably the closest I've thought of, but that feels like abuse.

0

12 Answers 12

34

More proper (semantically) and shorter would be to use definition lists:

dl {
  overflow: hidden;
}

dl dt {
  float: left;
  width: 30%;
}

dl dd {
  float: left;
  width: 70%;
}
<dl>
  <dt>Jeff</dt>
  <dd>This sure is a nice website we've got now.</dd>
  <dt>Joel</dt>
  <dd>It certainly is. By the way, working at FogCreek rocks.</dd>
  <dt>Jeff</dt>
  <dd>Of course it does. Have you played Rock Band yet? It's a lot of fun.</dd>
</dl>

5
  • 7
    I don't really agree that that's necessarily semantically proper. An actual definition list doesn't have an extended series of multiple definitions for the term "Jeff".
    – chaos
    Jan 14, 2009 at 7:46
  • Thinking about this some more, I'd say the same thing if the <dl> element were called <al>, association list, but not if it were <pl>, paired list.
    – chaos
    Jan 14, 2009 at 7:48
  • Sure, but unfortunatelly HTML doesn't have the <al> or <pl> tags implemented. There's so much things missing in HTML.. :) Jan 14, 2009 at 8:30
  • 11
    Chaos, I would tend to agree, but consider that the HTML 4.01 spec (for instance) actually says that "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words." Jan 14, 2009 at 15:02
  • Why do you float both dt and dd Oct 27, 2019 at 17:18
11

I'd say

<dialog>
  <dt>Jeff
  <dd>This sure is a nice website we've got now.
  <dt>Joel
  <dd>It certainly is. By the way, working at FogCreek rocks.
  <dt>Jeff
  <dd>Of course it does. Have you played Rock Band yet? It's a lot of fun.
</dialog>

as defined in HTML5.

Of course, you'll need a <script>document.createElement('dialog');</script> to get IE to do something sensible and a dialog { display:block; } in your CSS to get it to work completely.

4
  • Wow - that's really cool! Now, how many current browsers support it?
    – Jon Skeet
    Jan 14, 2009 at 20:48
  • Like it or not, I'd suggest that this supports the initial suggested use in the w3 specs of DL. No? Jan 14, 2009 at 23:33
  • 3
    I don’t know what kind of history this had, but it’s not appropriate now.
    – Ry-
    Jan 29, 2014 at 0:27
  • At present, dialog represents a UI element in which a user interacts (e.g. modal dialog box). Sep 4, 2018 at 7:34
10

My favourite example of marking up something like this is one of Tantek's XHTML compounds http://tantek.com/presentations/2005/03/elementsofxhtml/ (check out the conversation bit)

In summary it goes like so:

<ol>
  <li><cite>Jeff</cite>
    <blockquote><p>This sure is a nice website we've got now.</p><blockquote>
  </li>
  <li><cite>Joel</cite>
    <blockquote><p>It certainly is. By the way, working at FogCreek rocks.</p></blockquote>
  </li>
  ...etc...
</ol>

Not sure how you'd mark up stage directions etc... Maybe you'll end up creating a new microformat :)

Also that markup has some ideal CSS hooks, with discrete LInes unlike a definition list.

2
  • Beat me to the cite, blockquote combination. I wasn't going to add a list though, although that is exactly what it is, a list of lines.
    – John_
    Jan 14, 2009 at 10:50
  • The cite and blockquote elements are specifically noted as "not appropritate" for conversations in the latest HTML 5.2 spec. See examples of how to represent a conversation. Sep 4, 2018 at 7:37
8

I second the heresy :-)

Always good to consider CSS before resorting to tables - but often tables really are the best fit. It looks like it in this case.

The only additional consideration would be accessibility. I've heard that tables make it harder for text reader software to process tables, but I don't see why this would be the case (feel free to comment here if you know more).

One other thing - I presume you'd be holding the raw data in some other format first - perhaps a database, or xml or some other structured text?

In any case, getting it into an xml format and tranforming that to html with xslt can be quite liberating when it comes to playing with this stuff.

4

Please avoid the "sledge hammer syndrome" (if your only tool is a hammer, you try to treat every problem like a nail). HTML is a representation language, not a source language.

So my suggestion is to write the play in something which can represent your thoughts best (not necessarily XML) and then convert that to HTML. For my own works, I'm using a recursive XML parser which can fall out of XML parsing for certain elements:

<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>

My parser will invoke a custom parser to parse the content of <content>. In my case, it will create an intermediate XML tree:

<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>

This tree is then converted into HTML, TeX, PDF, whatever.

[EDIT] My strategy to come up with a compact language works like this: I start with XML. After a while, I look at the XML and try to see patterns. Then I think how I could express these patterns in a more compact way 1.) as XML, 2.) as XML text (with custom markup) and 3.) as something else entirely. When an idea hits me, I write a parser for the new format.

Frankly, writing parsers which can turn something into XML for automatic background processing is a minor task, today.

2
  • +1 for HTML just being the representation. I'm not sure what the best source language is at this point - but I will need to know what HTML to generate at some point. Of course, with an appropriate source language I can try all the ideas given here fairly easily...
    – Jon Skeet
    Jan 14, 2009 at 10:23
  • @Jon: There are three people on this planet who can design a good language. One of them is Guido van Rossum and the other two isn't me or you ;) Jan 14, 2009 at 11:10
4

IMO that actually is tabular data. First column is speaker, second column is text.

If you want to be fashionable and aggressively eschew tables, though, what I believe is compliant with what the Web mavens are dictating this season is a structure like:

<div class="play">
  <div class="line">
    <div class="speaker">Jeff</div>
    <div class="text">This sure is a nice website we've got now. </div>
  </div>
  <div class="line">
    <div class="speaker">Joel</div>
    <div class="text">It certainly is. By the way, working at FogCreek rocks.</div>
  </div>
</div>

Then you control how that lays out with appropriate CSS.

If it looks like you're basically writing XML and using CSS to specify how it lays out, well, that's because that's what the Web mavens believe you should be doing, AFAICT.

14
  • That leads to an interesting idea, actually - XML + XSLT. <speech><speaker>Jeff</speaker><text>Foo</text></speech>. Hmm. Next job: a WYSIWYG app for it... otherwise I can see the creative flow getting somewhat interrupted :)
    – Jon Skeet
    Jan 14, 2009 at 7:37
  • (I can use the XSLT to create tables instead of huge numbers of divs, of course.)
    – Jon Skeet
    Jan 14, 2009 at 7:39
  • @Jon Skeet: Not unreasonable. May be just as well to have your play editing interface store in a database, output whatever final form is useful, and skip the XSLT, though.
    – chaos
    Jan 14, 2009 at 7:50
  • @Eran Galperin: Yup. But it's the magically politically approved divs, not the evil counterrevolutionary tables, so it's Right and Good. (Can you tell I think some people are a bit snooty and prima-donnaish with their knee-jerk "eww, tables" diatribes? Yeah, I thought you could.)
    – chaos
    Jan 14, 2009 at 7:52
  • I don't agree. The same structure (two columns) can be implemented using semantic tags with much less markup, easily. Jan 14, 2009 at 7:55
4

I would use headers and paragraphs.

With the following styles it would arrange as you presented it:

.play h2 {
  float: left;
  clear: left;
  width: 100px;
  margin: 0;
}

.play p {
  margin-left: 100px;
}
<div class="play">
  <h2>Jeff</h2>
  <p>This sure is a nice website we've got now.</p>

  <h2>Joel</h2>
  <p>It certainly is. By the way, working at FogCreek rocks.</p>

  <h2>Jeff</h2>
  <p>Of course it does. Have you played Rock Band yet? It's<br /> a lot of fun.</p>
</div>

3

HTML 5.2 recommendation for conversations

authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

Example conversation with minimal markup

<article class=stage-script>
  <h1>Water Cooler Talk at FogCreek</h1>

  <p><b>Jeff</b> This sure is a nice website we've got now.

  <p><b>Joel</b> It certainly is. By the way, working at FogCreek rocks.

  <p><b>Jeff</b> Of course it does. Have you played Rock Band yet? It's a lot of fun.

  <p><i>Joel and Jeff walk into the sunset</i>
</article>

CSS for the conversation

.stage-script > p > b:first-child {
    display: inline-block;
    width: 5em;
}
.stage-script > p > b:first-child::after {
    content: ':';
}
2

Tables is the way to go.

Anything else like messing around with <div>s and css or XSLT is just reinventing the <table> but with a c**p syntax.

I would go for three or four fixed width colums. (Any non-trivial play is going to need stage directions, special effects, sound effects etc.).

6
  • Stage directions etc are generally represented in the same column as the speech, but in italics. It does sound like tables may well be the best way to go though.
    – Jon Skeet
    Jan 14, 2009 at 8:22
  • Oh, but now I've read all the other answers a couple of times, it's getting less clear...
    – Jon Skeet
    Jan 14, 2009 at 8:25
  • 1
    Don't let the anti-table bullies scare ya. If the situation calls for a GOTO, then by God it calls for a GOTO.
    – chaos
    Jan 14, 2009 at 8:38
  • 1
    I see no advantage to avoiding tables here. I would, however, recommend using <th> elements for your names, as they are to the speech what headers are to numbers in a numeric grid. Jan 14, 2009 at 8:38
  • @chaos: The pro/anti table debate is so frequently miscast - tables are a perfectly acceptable solution to a range of problems. The troubles arise when people start to use tables as a means of layout control where the content has no earthly relationship with a table. It's all about the semantics.
    – annakata
    Jan 14, 2009 at 9:19
2

You're not going to get a definitive answer to this question as HTML has many gaps, one of which is this - there are some very solid articles dotted around the web about his subject and a good place to start would be Bruce Lawson's article from 2006.

Considering that there is no answer to the question, the best we can do is look at what elements that are available to us and make our own compromises based upon our (and the communities) interpretation of the guidelines.

I personally like the cite/blockquote and data list route. I know that data lists smack of none semantic markup, but I truly believe that the intent of data lists isn't to list data definitions purely in a dictionary fashion, but to pair data where uls and ols can't.

I've spent a lot of time thinking about semantics, and one thing I (as well as most others in the field) am sure of when looking at all questions of markup is that tables are not the answer to 99.9% of markup questions (if it's not tabular data where you can use th, caption then tables should really be dropped from your inventory). That said, I would also say that exclusively using divs is also probably not the right answer.

I very much doubt that the up-votes in this question will reflect the best approach, but will more likely reflect an agreement to the approach base upon the voters current knowledge and use of HTML.

1
  • The cite and blockquote elements are specifically noted as "not appropritate" for conversations in the latest HTML 5.2 spec. Sep 4, 2018 at 7:29
0

I would just use div elements in this case, with nice classes describing the domain. You could argue up and down about using all kinds of HTML elements that give a better semantic meaning of intent, but for instance in the case of the dialog element, that is not intended for writing dialogs between characters in a play, it is however intended to present a dialog box to the user for interacting. But the fact that you can change and style that element to your hearts desire in CSS is nifty - but I would not recommend doing so.

The reason for that is simply that unless you are careful, you override that behavior and appearance for every such element. Let's say this is an interactive application for playwrights, you may want to include dialog boxes in addition to the "dialog" in the play.

I propose this solution:

.character{
  display: block;
  float: left;
}

.line{
  margin-bottom: 20pt;
  width: 400px;
  margin-left: 50pt;
}

With the following HTML:

<div class="character">Jeff</div>
<div class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet? 
  <br/>It's a lot of fun.</div>

Running JSFiddle: https://jsfiddle.net/quz9cj2f/6/

Now you can actually implement some standard play formatting, that I nicked from this place: http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.direction:before{
  margin-left: 2.75in;
  content: "(";
}
.direction:after{
  content: ")";
}
.line {
  margin-bottom: .3in;
}

With this HTML:

<div class="play">
  <div class="character">Jeff</div>
  <div class="direction">JEFF is enthusiastic!</div>
  <div class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div class="direction">Jumping continuously</div>
  <div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

Working JSFiddle: https://jsfiddle.net/quz9cj2f/9/

Or you could go all in and use CSS attribute selectors and create a custom attributes for the meta information:

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.line[direction]:before{
  margin-left: 2.75in;
  content: "(" attr(direction) ")";
  display: block;
}

.line {
  margin-bottom: .3in;
}

Now you have gotten rid of the extra elements, and added the meta info as attributes - now you could quite easy transform this from some kind of nice data structure from JSON or XML or other interchange formats into this:

<div class="play">
  <div class="character">Jeff</div>
  <div direction="Enthusiastic" class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

https://jsfiddle.net/quz9cj2f/11/

-2

If you want to do it semantically, I would use labels, something like:

<div class="script">
<label for="Jeff1">Jeff<label>
<div id="Jeff1">
  <p>This sure is a nice website we've got now.</p>
</div>

<label for="Joel1">Joel</label>
<div id="Joel1">
  <p>It certainly is.</p>
  <p>By the way, working at FogCreek rocks.</p>
</div>

<label for="Jeff2">Jeff</label>
<div id="Jeff2">
  <p>Of course it does.</p>
  <p>Have you played Rock Band yet? It's a lot of fun.</p>
</div>

</div>

That degrades pretty nicely and I think the label is a bit more appropriate for what you're trying to do. And then, in your style sheet, I would style it something like Eran Galperin's example CSS.

The other suggestion I would have, if you're serious about this, would be to look further into how dead tree scripts are written and do your utmost to preserve their style. This will help ensure that it looks familiar (read professional) to your audience.

3
  • I'm serious enough to have a look at some of the scripts I've got knocking around and try to work out any kinks. I'm not serious enough to spend hours and hours on it :) I like the look of this apart from having to have a separate ID for each speech - that doesn't sound ideal to me :(
    – Jon Skeet
    Jan 14, 2009 at 10:22
  • You can do without ids and leave the for attribute out of the divs.
    – tsimon
    Jan 15, 2009 at 9:34
  • 3
    That's definitely an abuse of the label element which is designed to give a description to a form input.
    – steveax
    Apr 22, 2013 at 6:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.