30

私は自分のウェブサイトに掲載したいスケッチを持っています。また、いつか自由に利用できるようにしたい短編を書くつもりです.

これを HTML で表現する最善の方法を見つけようとしています。基本的に 2 つの列が必要です。1 つはキャラクターの会話用、もう 1 つはテキスト用です。ただし、各スピーチは明らかにスピーカーと一致する必要があります。つまり、次のようなものです。

    ジェフ これは確かに私たちが今持っている素晴らしいウェブサイトです.

    ジョエル 確かにそうです。ところで、FogCreek 岩で働いています。

    ジェフ もちろんそうです。ロックバンドを演奏したことはありますか？これは
                 とても楽しいこと。

（まぁ、ローレム・イプサムよりはマシですが…）

HTML テーブル (スピーチごとに 1 つのテーブル行) でこれを行う方法は知っていますが、それはかなり見苦しく、誰もが CSS を使用して非テーブル データを表現することに熱心であるようです。これが表形式のデータを実際にどのようにカウントするのかわかりません。以前の「行」と「列」の使用は、基本データではなくレイアウトに関係していました。

それで、何かアイデアはありますか？私が見たスクリプト Web サイトのほとんど (確かに多くはありません) は<pre>、上記の例のように使用しているか、通常のスクリプト形式を維持しようとせずに、各段落の前に話者の名前を付けているだけだと思います。(このスタイルの例については、ポッドキャスト 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で定義されているとおりです。

もちろん、<script>document.createElement('dialog');</script>IE に適切な処理をさせるには が必要であり、dialog { display:block; }完全に動作させるには CSS に が必要です。

于 2009-01-14T19:41:23.150 に答える
10

このようなものをマークアップする私のお気に入りの例は、TantekのXHTMLコンパウンドの1つです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フックがあり、定義リストとは異なり、個別のラインがあります。

于 2009-01-14T10:45:00.750 に答える
8

私は異端を支持します:-)

テーブルに頼る前に CSS を検討することは常に良いことですが、多くの場合、実際にはテーブルが最適です。この場合はそのように見えます。

唯一の追加の考慮事項はアクセシビリティです。表を使用すると、テキスト リーダー ソフトウェアが表を処理するのが難しくなると聞いたことがありますが、なぜそうなるのかわかりません (詳しく知りたい場合は、ここにコメントしてください)。

もう1つ-生データを最初に他の形式で保持していると思います-おそらくデータベース、xml、またはその他の構造化テキストですか?

いずれにせよ、それを xml 形式に変換し、それを xslt で html に変換することは、このようなもので遊ぶことになると非常に自由になる可能性があります。

于 2009-01-14T09:00:16.233 に答える
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 を見てパターンを調べてみました。次に、これらのパターンをよりコンパクトな方法で表現する方法を考えます。アイデアが浮かんだら、新しい形式のパーサーを書きます。

率直に言って、自動バックグラウンド処理のために何かを XML に変換できるパーサーを作成することは、今日では些細な作業です。

于 2009-01-14T09:04:04.603 に答える
4

実際には表形式のデータであるIMO。最初の列はスピーカー、2 番目の列はテキストです。

ただし、ファッショナブルで積極的にテーブルを避けたい場合は、今シーズンの Web 専門家が指示していることに準拠していると私が信じているのは、次のような構造です。

<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 に答える
2

HTML には多くのギャップがあるため、この質問に対する決定的な答えを得ることはできません。その 1 つがこれです。Web には、彼の主題に関する非常に堅実な記事が点在しており、Bruce Lawson の記事から始めるのに適しています。 2006 .

質問に対する答えがないことを考えると、私たちができる最善のことは、私たちが利用できる要素を見て、私たち (およびコミュニティ) のガイドラインの解釈に基づいて独自の妥協をすることです.

個人的にはcite/blockquoteとデータリストルートが好きです。私は、データ リストにセマンティック マークアップがまったくないことを知っていますが、データ リストの目的は、データ定義を純粋に辞書形式でリストすることではなく、uls とols ができないデータをペアにすることであると心から信じています。

私はセマンティクスについて多くの時間を費やしてきましたが、マークアップに関するすべての問題を調べたときに私 (およびこの分野の他のほとんどの人) が確信していることの 1 つは、テーブルはマークアップに関する質問の 99.9% に対する答えではないということです (を使用できるのが表形式のデータでない場合はth、caption実際にはインベントリからテーブルを削除する必要があります)。とはいえ、 sだけを使用することdivもおそらく正しい答えではないでしょう。

この質問の賛成票が最善のアプローチを反映しているとはとても思えませんが、有権者の現在の知識と HTML の使用に基づくアプローチへの同意を反映している可能性が高いです。

于 2009-01-14T22:25:41.740 に答える
2

テーブルは行く方法です。

<div> や css や XSLT をいじるのは、単に <table> を再発明するだけですが、ac**p 構文を使用します。

固定幅の列を 3 つまたは 4 つ使用します。（重要な演劇には、舞台演出、特殊効果、効果音などが必要になります）。

于 2009-01-14T07:50:59.197 に答える
0

I would just use div elements in this case, with nice classes describing the domain. You could argue up and down about using all kinds of HTML elements that give a better semantic meaning of intent, but for instance in the case of the dialog element, that is not intended for writing dialogs between characters in a play, it is however intended to present a dialog box to the user for interacting. But the fact that you can change and style that element to your hearts desire in CSS is nifty - but I would not recommend doing so.

The reason for that is simply that unless you are careful, you override that behavior and appearance for every such element. Let's say this is an interactive application for playwrights, you may want to include dialog boxes in addition to the "dialog" in the play.

I propose this solution:

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

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

With the following 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>

Running JSFiddle: https://jsfiddle.net/quz9cj2f/6/

Now you can actually implement some standard play formatting, that I nicked from this place: 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;
}

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

Working JSFiddle: https://jsfiddle.net/quz9cj2f/9/

Or you could go all in and use CSS attribute selectors and create a custom attributes for the meta information:

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

Now you have gotten rid of the extra elements, and added the meta info as attributes - now you could quite easy transform this from some kind of nice data structure from JSON or XML or other interchange formats into this: 

<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 に答える