代码之家 › 专栏 › 技术社区 › Jon Skeet

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

html-table layout css html

Jon Skeet · 技术社区 · 17 年前

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

    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>

12 回复 | 直到 9 年前

mplungjan 6 年前

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

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>

Ms2ger 17 年前

我得说

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

roborourke 17 年前

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

philsquared 17 年前

在使用表格之前最好先考虑CSS,但表通常是最合适的。在这种情况下看起来是这样的。

还有一件事——我想您应该先以其他格式保存原始数据——可能是数据库、xml或其他结构化文本?

Aaron Digulla 17 年前

请避免“大锤综合症”(如果你唯一的工具是锤子,你会试图像对待钉子一样对待每一个问题)。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>

[编辑]我提出精简语言的策略是这样的:我从XML开始。过了一会儿,我查看XML并尝试查看模式。然后我想如何以更简洁的方式表达这些模式1.)作为XML,2.)作为XML文本(带有自定义标记),3.)完全作为其他内容。当我想到一个想法时,我会为新格式编写一个解析器。

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

Barnee Emily 13 年前

这实际上是表格数据。第一列是演讲者,第二列是文本。

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

mplungjan 6 年前

我会使用标题和段落。

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

James Anderson 17 年前

桌子是最好的选择。

我会选择三到四根固定宽度的柱子。(任何非平凡的戏剧都需要舞台指导、特效、音效等)。

Tim Cooper 14 年前

你不会得到这个问题的明确答案,因为HTML有很多漏洞,其中之一是——在网上有一些关于他的主题的非常可靠的文章,一个好的开始是 Bruce Lawson's article from 2006 .

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

cite blockquote ul s和 ol 我们不能。

我花了很多时间思考语义,在研究所有标记问题时,我(以及该领域的大多数其他人)确信的一件事是,表并不是99.9%标记问题的答案(如果不是可以使用的表格数据的话) th , caption 那么,表应该真的从您的库存中删除)。也就是说,我也会说 div s也可能不是正确的答案。

我非常怀疑这个问题中的up投票是否会反映出最好的方法,但更可能反映出选民对基于HTML的当前知识和使用的方法的一致性。

Clint Pachl 7 年前

HTML 5.2推荐的 conversations

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>

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

Espen 9 年前

我会用 div 不用于编写剧本中角色之间的对话,但其目的是向用户呈现一个对话框,以便进行交互。但事实上,你可以改变和风格的元素,你的心在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>

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

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

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

<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

tsimon 17 年前

如果你想在语义上这样做,我会使用标签,比如:

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

如果你对此很认真的话,我的另一个建议是进一步研究死树脚本是如何编写的,并尽最大努力保持它们的风格。这将有助于确保它看起来熟悉(阅读专业)您的观众。