What's The Best Way To Represent A Stage Script In Html?

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

Solution 1:

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

dl {
  overflow: hidden;
}

dldt {
  float: left;
  width: 30%;
}

dldd {
  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>

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.

Solution 5:

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: <<TIdiot.>></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.