What's the best way to represent a stage script in HTML?

what'd
whatsapp app
what w
how to pronounce what
what's
what c
what does
what p

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.

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.

What, what definition: 1. used to ask for information about people or things: 2. used in questions that show you are…. Learn more. Quickly send and receive WhatsApp messages right from your computer.

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>

Drake - Nice For What, Many are reporting experiencing more vivid dreams than usual. Cath Pound asks psychotherapist Philippa Perry how art can help us  What definition, (used interrogatively as a request for specific information): What is the matter? See more.

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.

what, What that is exactly may depend on your view of him and the current pandemic. Maybe he's a figure out of an Ayn Rand novel standing up against  whatever: adverb at all , of any description , of any kind or sort , whatsoever , whichever

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.

WHAT, Here's what's getting more expensive. By David Goldman, CNN Business. Updated 10:01 AM ET, Thu May 14, 2020. Coronavirus threatens meat supply chain  10 synonyms of what from the Merriam-Webster Thesaurus, plus 20 related words, definitions, and antonyms. Find another word for what.

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.

What do our dreams mean? - BBC Culture, Quickly send and receive WhatsApp messages right from your computer. WhatsApp Messenger: More than 2 billion people in over 180 countries use WhatsApp to stay in touch with friends and family, anytime and anywhere. WhatsApp is free and offers simple, secure, reliable messaging and calling, available on phones all over the world.

What happened to Elon Musk? - CNN, Exposing corruption and holding the corrupt to account can only happen if we understand the way corruption works and the systems that enable it. What is  This is the ORIGINAL "What What (In the Butt)" video. The South Park version aired over a year after we made this video. There's been a lot of confusion about this. We can assure you, we are not

Grocery prices are soaring. Here's what's getting more expensive , Seen a font in use and want to know what it is? Upload an image to WhatTheFont to find the closest matches in our database.

WhatsApp Web, Find out what your public IPv4 and IPv6 address is revealing about you! My IP address information shows your location; city, region, country, ISP and location on a map.

Comments
  • 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".
  • 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.
  • Sure, but unfortunatelly HTML doesn't have the <al> or <pl> tags implemented. There's so much things missing in HTML.. :)
  • 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."
  • Why do you float both dt and dd
  • Wow - that's really cool! Now, how many current browsers support it?
  • Like it or not, I'd suggest that this supports the initial suggested use in the w3 specs of DL. No?
  • I don’t know what kind of history this had, but it’s not appropriate now.
  • At present, dialog represents a UI element in which a user interacts (e.g. modal dialog box).
  • 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.
  • 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.