在HTML中表示舞台脚本的最佳方法是什么？

Question

我有一个草图,我想把它放在我的网站上,我也打算在某些时候写一个短片,我也想免费提供.

我正在尝试找出用HTML表示这种方法的最佳方法.我基本上需要两列 - 一个用于角色讲话,一个用于文本.每个演讲显然都需要与演讲者对话.换句话说,这样的事情:

    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>像我上面的例子一样使用,或者不打算尝试保持正常的脚本格式,而只是在每个段落前加上说话者的名字.(请参阅播客维基以获取此样式的示例.)我甚至无法确定我应该用什么HTML元素来表示这一点,坦率地说 - 一个字典定义列表,其中发言人为术语,语音为定义可能是我想到的最接近的,但这感觉就像是虐待.

Answer 1

更合适(语义)和更短的是使用定义列表:

dl {
  overflow: hidden;
}

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

dl dd {
  float: left;
  width: 70%;
}

Answer 2

我会说

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

如HTML5中所定义.

当然,你需要一个<script>document.createElement('dialog');</script>让IE做一些合理的事情,并dialog { display:block; }在你的CSS中让它完全发挥作用.

Answer 3

我最喜欢标记这样的东西的例子是Tantek的XHTML化合物之一http://tantek.com/presentations/2005/03/elementsofxhtml/(查看对话位)

总之它是这样的:

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

不确定你如何标记舞台指示等...也许你最终会创建一个新的微格式:)

此外,该标记具有一些理想的CSS挂钩,与定义列表不同,具有离散LI.

Answer 4

我是第二个异端邪说:-)

在使用表之前总是考虑使用CSS - 但通常表最适合.在这种情况下看起来像它.

唯一的额外考虑因素是可访问性.我听说表格使得文本阅读器软件更难以处理表格,但我不明白为什么会出现这种情况(如果您了解更多,请随时在此处发表评论).

另一件事 - 我认为你首先要用其他格式保存原始数据 - 可能是数据库,xml或其他结构化文本？

在任何情况下,将其转换为xml格式并使用xslt将其转换为html在玩这些内容时可能会非常自由.