translate属性による翻訳の制御

公開日

2015-10-20

タグ

HTML

HTML5 の仕様には translate 属性というものがある。翻訳ツールに対して指定した要素の内容が翻訳されるべきかを指定できる属性だ。

code 要素の内容を翻訳させたくない時に指定するのがすぐ思いつく用途だろう。JavaScript や CSS のスニペットが丁寧に日本語訳された時のあのなんとも言えない感じ、どうにかならないかなと思っていた。プログラミングのコードに限らず、コピーライトや商標、日本語に翻訳する必要のないよく使われている英単語などもそうだ。

しかし機械には何を翻訳すべきかなど推察できるはずもない。そこでウェブページの著者が閲覧者の意図を推察し、あらかじめ何が翻訳されるべきか・されないべきかを指定できるのが translate 属性である。

translate 属性には yes、no、""（空文字列）、inherit を指定できる。"" は yes と同じで、翻訳されてよい状態になる。no にすると翻訳させない状態になる。inherit は親要素の translate 属性の値を継承する値で、かつ初期値でもある。また、translate 属性が不正な値だった時も inherit となる。これは簡単な説明で、仕様的には翻訳モードの話などがあるが、それらは各自で調べて欲しい。

translate 属性の値は子要素に継承されるので、translate="no" な要素内で個別に翻訳を enable にしたい場合は、要素ごとに translate="yes" を指定しなおす必要がある。

<div class="snippets" translate="no">
  ...
  <p translate="yes">...</p>
  <pre>...</pre>
  <p>...</p>
  <pre>...</pre>
  <pre>...</pre>
  <pre>...</pre>
  <p translate="yes"></p>
  ...
</div>

このようにすれば、包括要素の translate="no" によって子要素をすべて翻訳対象から除外しつつ、特定の要素を翻訳対象に戻すことができる。

だいたいのウェブサイトでは翻訳を除外したい要素ごとに translate="no" を付与する方が簡単だと思うが、値が継承されることと子要素ごとに上書きできることを覚えておきたい、ということで。

ツールの対応状況

では、肝心の対応状況はどうなっているかと思って主要かと思われるツールで調べてみた。デモは以下を用意した。div や pre 要素などをいくつか用意して、それぞれに translate="no" を指定している。

テストページ Translate Attribute Test

対応しているツールが３つあるなら十分という感じがする。translate 属性の入れ子も問題なさそう。Google 翻訳がブラウザ搭載のツールバーでは対応していないのがなんだかアレだが……。

ツールごとにクオーテーションで囲まれていたら翻訳しないとか、<>で囲まれていたら翻訳しないなどの独自の判定基準を設けているものもあるようだ。また、対応しているツールは translate 属性が何の要素に指定されているかは特に関係なく機能している。

翻訳の可否の是非

しかし、翻訳の可否は著者が決めるものなのだろうか。何を翻訳したいかは閲覧者が決めるものだと思っている。同じページでも翻訳したい範囲は目的によっても異なるからだ。プログラミングであればコード部分の翻訳はいらないかもしれないが、コードのコメント部分で英語をチョット勉強したいと思った時、その限りではなくなる。そうすると translate 属性の指定で翻訳機能に制限をかけるのは、ウェブサイト著者の傲慢にもなり得る気がする。

ページ全文を翻訳にかけるようなツールではそういうニーズは満たせない。ブラウザの拡張機能で局所的に翻訳のオンオフを指定できるような仕組みに頼らざるを得ないだろう。単語単位で翻訳するものは Chrome にあるが、段落単位・選択範囲単位で翻訳オンオフできるものはあるのだろうか。あったとしても全員がそれを使っているわけではないだろうし。

この記事を書いている時、過去のエントリーの code 要素にすべて translate="no" を追加しようと思ったけど、この理由でやめることにした。