Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 533
Jon Skeet Avatar asked Jan 14 '09 07:01

Jon Skeet


People also ask

Where should I put script in HTML?

In HTML, JavaScript code is inserted between <script> and </script> tags. You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.

How do you write JavaScript in HTML?

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.


1 Answers

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>
like image 175
Deniss Kozlovs Avatar answered Sep 19 '22 15:09

Deniss Kozlovs