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

问题描述 投票:28回答:12

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

我正在尝试找出用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存有好...)

我知道如何使用HTML表格(每个语句有一个表格行),但这看起来非常难看,而且每个人似乎都热衷于使用CSS来表示非表格数据。我无法看到这对表格数据有多重要 - 我之前使用的“行”和“列”与布局而不是基本数据有关。

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

html css layout html-table
12个回答
8
投票

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

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

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

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

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


1
投票

HTML 5.2 recommendation for conversations

鼓励作者使用p元素和标点符号标记对话。鼓励使用spanb的作者需要为造型目的标记扬声器。包含在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: ':';
}

0
投票

我会在这种情况下使用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/


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

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


34
投票

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

<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%;
}

12
投票

我会说

<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; }来让它完全发挥作用。


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挂钩,与定义列表不同,具有离散LI。


4
投票

我会使用标题和段落。

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

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以进行自动后台处理的解析器是一项次要任务。


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。


2
投票

表格是要走的路。

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

我会选择三到四个固定宽度的列。 (任何非平凡的比赛都需要舞台指示,特效,音效等)。


1
投票

你不会得到这个问题的明确答案,因为HTML有很多空白,其中一个就是这个 - 网上有一些关于他的主题的非常扎实的文章,一个好的起点是Bruce Lawson's article from 2006

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

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

我花了很多时间考虑语义,有一点我(以及该领域的大多数其他人)确信在查看标记的所有问题时,表格不是99.9%标记问题的答案(如果它不是表格数据,你可以使用thcaption然后表格应该从你的库存中删除)。也就是说,我也会说完全使用divs也可能不是正确答案。

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

热门问题
推荐问题
最新问题