紙の組版ルールをWebに適用してみる
- 2014/11/09 21:00
- 齋藤公二
英語以外の“文字表現”は苦手
Webでは、紙の書籍や雑誌では当たり前に使われている組版ルールが通用しないことが少なくありません。
「あれはできるんだっけ？」「こんなこともできないの？」と、ベテラン編集者や校閲者から幾度となく質問を受けてきました。そのたびにあれこれ調査してみるのですが、なかなかうまい方法は見つからないものです。
そんな“Webの制約”をいくつかピックアップして紹介します。
Webはもともと英語圏で発展した経緯もあり、英語以外の文字やテキストの表現が苦手です。Web上で文字やテキストをどう表現するかは、W3C(World Wide Web Consortium)という標準化団体で相談して決めています。
日本語を含むアジアの言葉をきちんと表現できるよう、先駆者たちがW3Cに働きかけ、少しずつ成果を得てきました。ただ、うまく標準化までこぎつけても、Webブラウザの開発者たちがその標準に従ってくれるかは別問題です。Webブラウザごとに見え方が変わることがよくあるのです。
というわけで、「あれはできるんだっけ？」に対しては、「できなくはないけど面倒です」「一部の環境では見た目が崩れます」などといった、質問者が判断しにくい答えを返さざるをえないのが実情です。“現状では使えない”ものを実例で見ていきましょう。
均等揃え
均等揃えを指定しても、行末がきれいに揃わなかったり、適切に均等揃えできないケースがあります。均等揃えは、スタイルシート(Webのレイアウトやスタイルを定義するファイル)で、text-align:justify を指定します。Windows環境のChromeとSafariでは、これがうまく働きません。
比較したのが次の画像です。左がChrome、右がIEです。IEがうまく行末揃えと均等割付ができているのに対し、Chromeは不自然です。なお、MacのChromeでは行末揃えだけはうまく表示できます。
句読点のぶら下がりも表現できません。ぶら下がりというのは、行末揃えしたブロックから、句読点だけをはみ出させる処理です。かつては縦書の書籍や雑誌でよく使っていました。今ではほとんど見なくなりましたが、Webでやろうとしてもできません。
見出しの字間調整
紙媒体では、見出しの字間をツメて見栄えがよくなるような調整をよく行います。中吊りのような広告や記事のタイトルだけではなく、本文中に入る中見出しなども対象です。
同じようなことをWebの記事でやろうとしても、うまくいきません。文字間を調整するときは、スタイルシートでletter-spacingを指定します。文字間をアケるにはいいのですが、ツメようと、最小値を指定しても文字が重なってしまうのです。また、行全体が対象になるので、「、」の後や「の」両側をツメるといった細かな調整ができません。
本文用のフォントを見出しに使うと、間延びした印象になります。それを避けるため、見出し用のフォントを指定したり、フォントのウェイトをムリに上げて狭く見せたり、場合によっては画像化したりすることになります。
異体字、旧字体
紙媒体では、読者を配慮して、旧字体や異体字をそのまま使うケースがあります。吉野家の「吉」(「口」のうえが「士」ではなく「土」)や「溢れる」「逢う」などです。
吉野家の吉は、文字がないので作字するしかありません。「溢れる」「逢う」は、フォントの文字コード対応が進んだことで、Web上でも異体字のまま表現できるようになりました。
たとえば、OS Xの場合は、「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のように、2つのフォントが備わっています。ProNがつくほうが「JIS X 0213:2004」という規格に対応したフォントです。スタイルシートで「ProN」を指定しておくと、「溢れる」「逢う」が簡略化されずに表示されるようになります。
Windowsの場合は、Vista以降に搭載されているメイリオ、MSゴシック、MS明朝の各フォントがJIS X 0213:2004に対応しています。
JIS X 0213:2004の新字形については、詳しくは、Wikipediaのページを見てください。
ルビの中付き
ルビの中付きというのは、漢字一字の読みに対してルビを真ん中に寄せて表記する組版のルールです。「漢字」だったら「かん」「じ」に分けてルビを振ります。これを実現するのがなかなか面倒です。ルビは、htmlのなかで、rubyタグを使って指定します。たとえば、漢字にルビを振るなら、<ruby>漢字<rt>かんじ</rt></ruby>のようにします。しかし、このままではうまく中付きにできません。
左がChrome、右がIEです。いちばん上の「美久仁」を見ると、Chromeでは全体が真ん中に寄っています。IEは一字ごとに真ん中に寄せてくれますが、これは、文字とルビの数が同じだからです。すぐ下の「岩倉具視幽棲旧宅」では、ズレていますね。
そこで、<ruby>漢<rt>かん</rt></ruby><ruby>字<rt>じ</rt></ruby>などとやりだすわけですが、かなり面倒くさいです。見栄えのために文の構造を無視することになり、美しくありません。
漢字ごとに中付きにするために、<rbc>タグや<rtc>タグを使うことがW3Cで提案されています。ただ、残念ながら実現している主要ブラウザはありません。画像の一番下にある「岩倉癲狂院」にように表示されます。
さらに細かい話になりますが、ルビは基本的に「っ」「ょ」などの拗促音を使いません。「ょ」は「よ」と振ります。ルビが表示できないブラウザに対しては、文字のあとに「<rp>（</rp>ルビ<rp>）</rp>」というタグをつけて、ルビを丸括弧付きで代替表示できるように指定しますが、その際に「ょ」を小書きにしておいていいのかという話にもなります。
縦書き
これはもう書くことがたくさんありすぎて……別稿にします。
Webに慣れた人の中には「そんなに小さいことにこだわらなくても……」という人もいるでしょう。ただ、活字は、こうした些細な気配りを積み重ねることで心地良い読書体験を提供してきたのだと思います。Webやアプリのユーザーインタフェース(UI)やユーザーエクスペリエンス(UX)が1ピクセル単位で表現にこだわるのと似ていますね。Webの世界で、日本独自の組版ルールがうまく表現できるようになると、もっと楽しくなると思います。