30

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

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

    Jeff 这确实是我们现在拥有的一个不错的网站。

    乔尔 当然是。顺便说一句，在 FogCreek 工作。

    杰夫 当然可以。你玩过摇滚乐队吗？它是
                 多开心。

（嗯，它比 lorem ipsum 更好......）

我知道如何使用 HTML 表格（每个演讲一个表格行）来做到这一点，但这看起来很丑陋，而且每个人似乎都热衷于使用 CSS 来表示非表格数据。我看不出这是如何真正计算表格数据的——我之前对“行”和“列”的使用是与布局有关，而不是与基本数据有关。

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

4

12 回答 12

34

更合适（语义上）和更短的是使用定义列表：

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>

于 2009-01-14T07:42:29.607 回答
11

我会说

<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中定义的那样。

当然，你需要 a<script>document.createElement('dialog');</script>让 IE 做一些明智的事情，并dialog { display:block; }在你的 CSS 中让它完全工作。

于 2009-01-14T19:41:23.150 回答
10

我最喜欢这样标记的示例是 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 钩子，与定义列表不同，具有离散的 LInes。

于 2009-01-14T10:45:00.750 回答
8

我支持异端：-)

在使用表格之前考虑 CSS 总是好的——但通常表格确实是最合适的。在这种情况下看起来像。

唯一的额外考虑是可访问性。我听说表格使文本阅读器软件更难处理表格​​，但我不明白为什么会这样（如果您了解更多，请随时在此处发表评论）。

另一件事——我想你会首先以其他格式保存原始数据——可能是数据库、xml 或其他结构化文本？

无论如何，在玩这些东西时，将其转换为 xml 格式并使用 xslt 将其转换为 html 可能会非常自由。

于 2009-01-14T09:00:16.233 回答
4

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。

于 2009-01-14T07:35:06.063 回答
4

我会使用标题和段落。

使用以下样式，它会在您呈现时排列：

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

.play p {
  margin-left: 100px;
}
<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>

于 2009-01-14T07:41:31.790 回答
4

请避免“大锤综合症”（如果您唯一的工具是锤子，那么您会尝试像钉子一样对待每一个问题）。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 以进行自动后台处理的解析器是一项小任务。

于 2009-01-14T09:04:04.603 回答
3

对话的 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: ':';
}
于 2018-09-04T08:21:10.440 回答
2

表是要走的路。

像使用 <div>s 和 css 或 XSLT 之类的其他任何事情都只是重新发明了 <table>，但使用了 ac**p 语法。

我会选择三到四个固定宽度的列。（任何不平凡的戏剧都需要舞台指导、特效、音效等）。

于 2009-01-14T07:50:59.197 回答
2

你不会得到这个问题的明确答案，因为 HTML 有很多差距，其中之一就是这个 - 网络上散布着一些关于他的主题的非常可靠的文章，一个好的起点是Bruce Lawson 的文章来自2006 年。

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

我个人喜欢cite/blockquote和数据列表路由。我知道数据列表没有语义标记，但我真的相信数据列表的目的不是纯粹以字典方式列出数据定义，而是在uls 和ols 不能的地方配对数据。

我花了很多时间思考语义，在查看所有标记问题时，我（以及该领域的大多数其他人）确信的一件事是表格不是 99.9% 标记问题的答案（如果它不是您可以使用的表格数据th，caption那么表格应该真的从您的库存中删除）。也就是说，我还要说专门使用divs 也可能不是正确的答案。

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

于 2009-01-14T22:25:41.740 回答
0

在这种情况下，我将只使用div元素，以及描述域的好类。您可以上下争论使用各种 HTML 元素来提供更好的意图语义含义，但例如在dialog元素的情况下，它不是用于在戏剧中的角色之间编写对话，但是它是有意的向用户显示一个对话框以进行交互。但是，您可以在 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/

于 2016-10-24T23:38:49.107 回答
-2

如果你想在语义上做到这一点，我会使用标签，比如：

<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 的样式。

如果您对此很认真，我的另一个建议是进一步研究死树脚本的编写方式，并尽最大努力保持其风格。这将有助于确保您的观众看起来熟悉（阅读专业）。

于 2009-01-14T10:05:22.767 回答