conversations的HTML 5.2建议

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>
   <dt>Jeff</dt>
   <dd>This sure is a nice website we've got now.</dd>
</dl>


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做一些合理的事情，并在CSS中使用dialog { display:block; }来让它完全正常工作。

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在玩这些内容时可能会非常自由。

Answer 5

IMO实际上是表格数据。第一列是发言者，第二列是文本。

如果你想成为时尚并且积极地避开桌子，我认为这与网络专家本赛季所要求的一致是一个结构：

<div class="play">
  <div class="line">
    <div class="speaker">Jeff</div>
    <div class="text">This sure is a nice website we've got now. </div>
  </div>
  <div class="line">
    <div class="speaker">Joel</div>
    <div class="text">It certainly is. By the way, working at FogCreek rocks.</div>
  </div>
</div>

然后你用适当的CSS来控制它的布局。

如果看起来你基本上是在编写XML并使用CSS来指定它的排列方式，那就是因为这就是Web专家认为你应该做的事情，AFAICT。

Answer 6

我会使用标题和段落。

<div class="play">
    <h2>Jeff</h2>        
    <p>This sure is a nice website we've got now.</p>

    <h2>Joel</h2>
    <p>It certainly is. By the way, working at FogCreek rocks.</p>

    <h2>Jeff</h2>        
    <p>Of course it does. Have you played Rock Band yet? It's<br />
    a lot of fun.</p>
</div>

使用以下样式时，它会按照您的介绍进行排列：

.play h2 {
    float:left; 
    clear:left;
    width:100px;
    margin:0;
}
.play p {
    margin-left:100px;
}

Answer 7

请避免使用“大锤综合症”（如果你唯一的工具是锤子，你会试着像钉子一样对待每一个问题）。 HTML是表示语言，而不是源语言。

所以我的建议是将剧本写成可以最好地代表你的想法（不一定是XML），然后将其转换为HTML。对于我自己的作品，我使用的是递归XML解析器，它可能不属于某些元素的XML解析：

<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>

我的解析器将调用自定义解析器来解析<content>的内容。在我的例子中，它将创建一个中间XML树：

<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>

然后将此树转换为HTML，TeX，PDF等等。

[编辑]我提出一种紧凑语言的策略是这样的：我从XML开始。过了一会儿，我查看XML并尝试查看模式。然后我想我如何能够以更紧凑的方式表达这些模式1.）作为XML，2。）作为XML文本（使用自定义标记）和3.）作为完全不同的东西。当一个想法袭击我时，我会为新格式编写一个解析器。

坦率地说，编写可以将某些内容转换为XML以进行自动后台处理的解析器是一项次要任务。

Answer 8

表格是要走的路。

使用＆lt; div＆gt; s和css或XSLT搞乱其他任何事情只是重新发明＆lt; table＆gt;但是用c ** p语法。

我会选择三到四个固定宽度的柱子。（任何非平凡的游戏都需要舞台指示，特效，音效等。）

Answer 9

你不会得到这个问题的明确答案，因为HTML有很多空白，其中一个是这个 - 网上有一些关于他的主题的非常扎实的文章，一个好的起点是{ {3}}

考虑到问题没有答案，我们能做的最好的事情就是根据我们（和社区）对指南的解释，查看我们可以使用的元素并做出自己的妥协。

我个人喜欢cite / blockquote和数据列表路线。我知道数据列表没有任何语义标记，但我真的相信数据列表的意图不是纯粹以字典方式列出数据定义，而是将数据配对ul s和{{1}不能。

我花了很多时间考虑语义，有一点我（以及该领域的大多数其他人）确信在查看标记的所有问题时，表格不是99.9％的答案。标记问题（如果不是表格数据，您可以使用ol，th，那么表格应该从您的广告资源中删除。也就是说，我也会说完全使用caption s也可能不是正确答案。

我非常怀疑这个问题中的最高票数将反映最佳方法，但更有可能反映出基于选民当前知识和使用HTML的方法的协议。

Answer 10

conversations的HTML 5.2建议

鼓励
作者使用p元素和标点符号标记对话。建议出于样式目的需要标记发言人的作者使用span或b。带有i元素的文字段落可用于标记舞台方向。

以最少的标记进行对话的示例

<article class=stage-script>
  <h1>Water Cooler Talk at FogCreek</h1>

  <p><b>Jeff</b> This sure is a nice website we've got now.

  <p><b>Joel</b> It certainly is. By the way, working at FogCreek rocks.

  <p><b>Jeff</b> Of course it does. Have you played Rock Band yet? It's a lot of fun.

  <p><i>Joel and Jeff walk into the sunset</i>
</article>

对话的CSS

.stage-script > p > b:first-child {
    display: inline-block;
    width: 5em;
}
.stage-script > p > b:first-child::after {
    content: ':';
}

Answer 11

在这种情况下我会使用 div 元素，并使用描述域的好类。你可以争论使用各种HTML元素来提供更好的意图语义，但是例如在对话框元素的情况下，那就是不是但是，为了在游戏中的角色之间编写对话，它旨在向用户呈现用于交互的对话框。但事实上，你可以在CSS中改变和塑造这个元素的心愿是很好的 - 但我不建议这样做。

原因很简单，除非你小心，否则你会覆盖每个这样的元素的行为和外观。假设这是一个剧作家的交互式应用程序，除了播放中的“对话框”之外，您可能还想要包含对话框。

我建议这个解决方案：

.character{
  display: block;
  float: left;
}

.line{
  margin-bottom: 20pt;
  width: 400px;
  margin-left: 50pt;
}

使用以下HTML：

<div class="character">Jeff</div>
<div class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet? 
  <br/>It's a lot of fun.</div>

运行JSFiddle：https://jsfiddle.net/quz9cj2f/6/

现在你可以实际实现一些标准的播放格式，我从这个地方开始编辑：http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.direction:before{
  margin-left: 2.75in;
  content: "(";
}
.direction:after{
  content: ")";
}
.line {
  margin-bottom: .3in;
}

使用此HTML：

<div class="play">
  <div class="character">Jeff</div>
  <div class="direction">JEFF is enthusiastic!</div>
  <div class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div class="direction">Jumping continuously</div>
  <div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

使用JSFiddle：https://jsfiddle.net/quz9cj2f/9/

或者您可以全力以赴并使用CSS属性选择器并为元信息创建自定义属性：

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.line[direction]:before{
  margin-left: 2.75in;
  content: "(" attr(direction) ")";
  display: block;
}

.line {
  margin-bottom: .3in;
}

现在你已经摆脱了额外的元素，并添加了元信息作为属性 - 现在你可以很容易地将它从JSON或XML或其他交换格式的某种好的数据结构转换成：

<div class="play">
  <div class="character">Jeff</div>
  <div direction="Enthusiastic" class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

https://jsfiddle.net/quz9cj2f/11/

Answer 12

如果你想在语义上这样做，我会使用标签，例如：

<div class="script">
<label for="Jeff1">Jeff<label>
<div id="Jeff1">
  <p>This sure is a nice website we've got now.</p>
</div>

<label for="Joel1">Joel</label>
<div id="Joel1">
  <p>It certainly is.</p>
  <p>By the way, working at FogCreek rocks.</p>
</div>

<label for="Jeff2">Jeff</label>
<div id="Jeff2">
  <p>Of course it does.</p>
  <p>Have you played Rock Band yet? It's a lot of fun.</p>
</div>

</div>

这很好地退化了，我认为标签更适合你想要做的事情。然后，在你的样式表中，我将它设置为类似Eran Galperin的示例CSS。

如果你对这个问题很认真的话，我会提出另一个建议，那就是进一步研究死树脚本的写法，并尽最大努力保持自己的风格。这将有助于确保您的观众熟悉（阅读专业）。

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

12 个答案:

conversations的HTML 5.2建议

以最少的标记进行对话的示例

对话的CSS