多言語対応したウエブページで使う強調
今回は、多言語対応したウエブページで単語をどのように強調するかを考えます。個人のブログでは、多言語使用はほとんど問題にならなそうですが、多言語の文章をいかに等しく表現するかという問題として考えると面白いので、メモ代わりに書いてみます。
多言語対応の方向性
多言語で同一コンテンツを表現するために表記方法の方針として以下の二つが考えられます。
- 内容とともに、表現方法も厳密にそろえる。
- 内容は厳密にそろえるが、表現方法は各言語の典型的な方法へ合わせる。
内容と表現方法をそろえると…
コーディングやデザインの手間が最小化されます。これは大事なメリットです。そして、どの言語でも同じ表現方法がとられるなら、この方針に問題はありません。しかし、ある表記方法が、言語間で異なる意味をもつ場合があります*1。そこまでいかなくとも、ある言語で典型的な表記方法は、他の言語では使われないかもしれません。なので、この方針を何の心配もなしに適用できる事例はそれほど多くない気がします。
表現方法を各言語で最適化すると…
当然、デザインやコーディングの手間は増えます。しかし、情報を閲覧する側にとっては、自然な表現で読めるので、読むための負担が最小になります。だから読み手のことだけを考れば、こちらの方針が良いでしょう。問題は、制作のコストをどう抑えるかです。
多言語での強調をどうやって使い分けるか？
今回は、具体例として、英語と日本語の単語の強調を考えます。英語では斜体・イタリックで強調しますが、日本語の文章で斜体を使うのは典型的でありません。日本語で強調をするならば、たとえば傍点をうつ方法が考えられます。このように強調の方法の違いをタグで分けてしまうと、その手間がまともにウエブページ制作のコストになってしまいます。そこで、HTMLのタグは同じものを使って、CSSで言語による違いを表現してみたらどうでしょうか。
やり方
- 最初にHTMLでの強調はiタグではなく、emタグを用います。emタグは、意味上の強調に用いるタグで、通常は斜体で示されます。
- emタグには、lang属性を付与できるので、lang ="ja"とlang = "en"で言語を区別します。
- 各言語に合わせたスタイルをCSSで設定します。
em[lang="ja"]{ -webkit-text-emphasis-style: dot; } em[lang="en"]{ font-style: italic; }
こうすると具体的なコンテンツとしては同じタグ（ただしlang属性のみ異なる）を対応する単語に埋め込むことで、各言語に対応した強調が実現されます。
タグの意味とスタイルを独立して考えよう
今回は単語の強調だけを考えましたが、タグの意味とスタイルを独立して考えれば、他の表現でも多言語対応を上手にできるかもしれません。
