HTML 5 における会話文のマークアップについて

一時期は、 dialog 要素と dl 要素でマークアップできると言われていた会話文ですが、 terkel.jpさんのところでも、 指摘されているとおり、HTML 5 の仕様では、 「dl 要素は同じ内容を持つ dt 要素が複数存在すべきではない。」となっているので、 dl 要素で会話文をマークアップできません (dt 要素に発言者を入れると、同じ人が発言したときに dt 要素の内容が重複するため)。

では、どうやって会話文をマークアップすればいいでしょうか、自分なりに考えてみました。 現行 dialog および dl 要素の代わりに、 p 要素を使うことが提案されているため、それをベースに考えます。 会話文をマークアップする際に、マークアップしないといけない構造は、 話者と話した内容です。ですから、パッと思いつくとすると以下のようなマークアップになると思います。

<p class="chat">
  <span class="speaker">A</span>
  <span class="utterance">やあ、お元気ですか。</span>
</p>
<p class="chat">
  <span class="speaker">B</span>
  <span class="utterance">うん、元気だよ。そっちはどうだい？</span>
</p>

このマークアップの難点は、話者をアイコン画像で表示したい時に、下の例のようにアイコンの右上から話した内容が始まらず、右下から始まってしまう点にあります。こうなると、会話文が 2 行になるとアイコン画像の横に文字が入るスペースがあるのに、アイコン下に文字が入ってしまいます。

じゅげむ　じゅげむ　ごこうのすりきれ　かいじゃりすいぎょの　すいぎょうまつ　うんらいまつ　ふうらいまつ　くうねるところにすむところ　やぶらこうじのぶらこうじ　ぱいぽ　ぱいぽ　ぱいぽのしゅーりんがん　しゅーりんがんのぐーりんだい　ぐーりんだいのぽんぽこぴーの　ぽんぽこなーの　ちょうきゅうめいのちょうすけ

この対処法としては、暫定案ですが、 p.chat 要素の class 要素に、 話者のクラス(A さんであれば、 A クラス)を作って CSS の background で画像を表示する方法があると思います。 以下が、その場合のサンプルコードです。

<style type="text/css">
.chat {
    padding-left: 60px;
    margin-bottom: 20px;
}

.A { background: url("Aさんの 50x50px のアイコン画像の URL") no-repeat top left;}
.B { background: url("Bさんの 50x50px のアイコン画像の URL") no-repeat top left;}

.speaker { display: none; }
.utterance:before { content: "「";}
.utterance:after { content: "」";}

</style>

<p class="chat A">
  <span class="speaker">A</span>
  <span class="utterance">やあ、お元気ですか。</span>
</p>
<p class="chat B">
  <span class="speaker">B</span>
  <span class="utterance">うん、元気だよ。そっちはどうだい？</span>
</p>

この解決策によって、右下から会話が始まらないで済むようになります。 ただし、この方法は、予め話者と話者のアイコンが分かっておらず、 動的に変更する必要がある場合、マークアップが面倒になります。 float および position プロパティを使う方法も考えられますが、どれも一長一短です。 この記法の気に入っているところは、シンプルで直感的な構造であり、 スタイルシートをオフにしても、きちんと話者と話した内容が表示されるところです。

とりあえず、今は、このマークアップで進めて、また良い方法が見つかり次第、 このページに追記していきたいと思います。