対訳（原文+訳文）のマークアップ方法

要約：対訳のマークアップ方法について考えてみる

英文を対訳¹ する時、それぞれの文をどうやってマークアップすれば最も妥当なんでしょうか？細かな点ではありますが、視覚・聴覚系UAでのスタイリング² やファインダビリティ向上に結びつけたいところです。

実際の活用例としては、原文または訳文の上にマウスを置いたときに対応する言語の文を表示することを考えています。まぁ、それだけならぶっちゃけ対訳を1パラグラフ毎にdiv要素で括るというのも手もあって、これならHTML4からXHTML1.1までカバーできるのですが、もう少しフラットな書き方はないものかと思って考えてみた次第です。

今回は以下の文をどうマークアップするか考えます。

日本語 (Japanese): 次は上野駅です。JR 線と東京メトロ銀座線・日比谷線は乗り換えです。
英語 (English): Next station is Ueno. Please change here for the JR and Tokyo Metro Ginza and Hibiya Line.

with XHTML 1.1

まず、W3C 国際化ワーキンググループの“Internationalization Best Practices: Specifying Language in XHTML & HTML Content”では様々な言語を話す訪問者達に向けてXHTML文書を書く際の例を示しています。

この例に大枠を沿いつつXHTML~~1.0~~1.1でマークアップするなら、上記文章は以下のように表現できることになります（便宜的にbody要素内のみ記しています）

HTMLソースコード

<body>
<h1 id="t2b170a">対訳の例</h1>
<div xml:lang="ja">
<h2 id="t321370">日本語</h2>
<p>次は上野駅です。JR 線と東京メトロ 銀座線・日比谷線は乗り換えです。</p>
</div>
<div xml:lang="en">
<h2 id="t2d7dcb">English</h2>
<p>Next station is Ueno. Please change here for the JR and Tokyo Metro Ginza and Hibiya Line.</p>
</div>
</body>

このブログのプラグインにより、見出し要素にid属性が自動挿入されるため、XHTML1.0で表記していたコードをXHTML 1.1でのそれに修正しました

しかし、この書き方はよく見ると対訳として適したマークアップではないでしょう。なぜかというと、日本語の文と英語の文との1対1の対応関係が（人間様がわかっても機械的には）わからないからです。

まだ2(1+1)文ならいいかもしれませんが、100文とか200文になったらどうでしょう。また3言語、4言語と増えていっても、機械的に対応できるでしょうか？

そういう場合には、言語毎に別文書を作成してApache側がコンテントネゴシエーションで切り替えるという手もあるでしょうが、今回は対訳のマークアップなので、考えないことにします。

with XHTML 2.0

ということで、XHTML1.0は諦めてXHTML 2.0 Draftで考えてみることにします。XHTML1.1までではrel属性はa要素とlink要素にしか使えないんですが、section要素にはMetainformation Attributes Moduleを使える、つまりそこに含まれるrel属性などを使うことができるので、これを用いれば以下のように表現できると思います（仕様書は読んでみましたが、XHTML2.0Dに精通しているわけではないので誤りがある可能性があります。その際はご指摘いただければ幸いです）

HTMLソースコード

<body>
<h>対訳の例</h>
<section xml:lang="ja" rel="alternate" hreflang="en" href="#p1_1_en" id="p1_1_ja">
<h>日本語</h>
<p>次は上野駅です。JR 線と東京メトロ 銀座線・日比谷線は乗り換えです。</p>
</section>
<section xml:lang="en" rel="alternate" hreflang="ja" href="#p1_1_ja" id="p1_1_en">
<h>English</h>
<p>Next station is Ueno. Please change here for the JR and Tokyo Metro Ginza and Hibiya Line.</p>
</section>
</body>

‥まぁ、ややこしいですよね。もちっとシンプルにできればいいんですが。

with XHTML 1.1

ちなみに、上記をXHTML1.1で擬似的にやるとこうできると思います。

HTMLソースコード

<body>
<h1 id="t04ced6">対訳の例</h1>
<div xml:lang="ja" id="p1_1_ja">
<h2 id="ta0a50d">日本語 <a rel="alternate" hreflang="en" href="#p1_1_en">(to English version)</a></h2>
<p>次は上野駅です。JR 線と東京メトロ 銀座線・日比谷線は乗り換えです。</p>
</div>
<div xml:lang="en" id="p1_1_en">
<h2 id="tcd3841">English <a rel="alternate" hreflang="ja" href="#p1_1_ja">（日本語へ）</a></h2>
<p>Next station is Ueno. Please change here for the JR and Tokyo Metro Ginza and Hibiya Line.</p>
</div>
</body>

参考にしたリソース

原文と訳文を併記して翻訳すること[戻る]
対応しているUAは母数を考えるとかなり少ないところではありますが[戻る]

Popularity: 2% [?]

キーワード：

ウェブ標準技術絡み

はてなブックマークでつけられたコメント

bizarre_sprout: XHTML1.1までではリンクのaタグにrel="alternate"やhreflang="en"といった関係を示す表現を、フラグメント指示子を用いて指定する/XHTML2.0ではsectionでいける/href要素がCommonなattributeじゃないから面倒だ。
（タグ：html,）

他サイトの関連記事

トラックバックはまだ寄せられていません

トラックバックとは: この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ: この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。

トラックバックを受け取るためのURI

Liner Note

検索