html - 用 HTML 表示舞台脚本的最佳方式是什么？

Question

我有一个草图想放在我的网站上，我还打算在某个时候写一个短剧，我也想免费提供。

我正在尝试找出用 HTML 表示它的最佳方式。我基本上需要两列 - 一列用于说话的 Angular 色，一列用于文本。不过，每次演讲显然都需要与演讲者保持一致。换句话说，像这样:

    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.

(好吧，这比 lorem ipsum 好...)

我知道如何使用 HTML 表格(每次演讲一个表格行)来做到这一点，但这看起来很丑陋，而且每个人似乎都热衷于使用 CSS 来表示非表格数据。我看不出这究竟是如何计算表格数据的——我之前使用“行”和“列”是为了处理布局而不是基本数据。

那么，有什么想法吗？我想我见过的大多数脚本网站(诚然，不多)要么使用 <pre>就像我上面的例子，或者不要费心去尝试保持正常的脚本格式，而只是在每个段落前加上演讲者的名字。 (有关这种风格的示例，请参阅播客 wiki。)坦率地说，我什至无法确定我应该使用哪些 HTML 元素来表示这一点 - 一个字典定义列表，其中 speaker 作为术语，speech 作为定义这可能是我想到的最接近的，但感觉就像虐待。

Answer 1

更恰当(语义上)和更短的是使用定义列表:

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>