日本語フォントとスタイルシート

作成開始日 2013.11.14
最終更新日 2013.11.20

OS/2のMozilla系ブラウザで日本語を表示すると、いくつかの問題が発生する。そもそも日本語対応にローカライズされていないためだろうが、ボールドなどの文字装飾や文字サイズ指定が思うようにいかない。ここでは、その原因を究明し、スタイルシートによる対処法を摸索してみた。

●ラスターフォントとベクターフォント

OS/2のフォントには大きく分けてラスターフォント(ビットマップ・フォント)とベクターフォント(アウトライン・フォント)の二種類がある。大雑把に言うと、ラスターフォントは画面表示に適したフォントで、ベクターフォントは印刷に適したフォントだ。もちろん、ベクターフォントを画面表示に使用することもでできるが、通常サイズ(16ドット程度)では、ラインが汚い上にシステム負荷も大きい。その点では、奇麗で軽いラスターフォントの方が優れている。しかし、ラスターフォントには文字の拡大や装飾が効かない。予め用意されているサイズしか使用できないし、強調やアウトラインのような文字装飾もできない。しかも、明朝/ゴシックの区別があるのは20ドット以上のフォントに限られていて、使用頻度の高い16ドットフォントでは書体変更もできない。字形データが一種類しかないので、指定しても無意味なのだ。つまり、本当に何も変化を付けられないのである。

 ラスターフォント:小サイズでも奇麗で高速だが、文字装飾や書体変更は不可能(20ドット以上はゴシック可)
 ベクターフォント:小サイズでは汚いが、文字装飾や書体変更は自由

ここで問題になるのは、ブラウザでの表示の問題。読み易さを優先すると、ラスターフォントで表示するのが良いが、それでは<em>や<strong>などの強調表現は一切無効になるし、フォントのサイズも限定されているので<large>すら効かない。ラスターフォントの大きさの系列(4ドット単位)とHTMLの文字サイズの系列(1.2倍単位)が一致しないため、こういう理不尽な現象が起きる。

そこで、何とかラスターフォントとベクターフォントの両方の長所を融合させることができないか、ということになる。が、結論から言えば無理だった。いかに装飾自由度に優れていようと、HTMLにベクターフォントを混入させるべきではない。見栄えが猛烈に落ちて、読む気が起きなくなるからである。ラスターフォントの中で表現を工夫するしかない−−例えば、強調の代わりに色を付けるとか、1サイズ大きなフォントにするとか−−というのが結論である。しかし、それにしたって、システムをいじらないと実現不可能だ。

●自分のページと他人のページ

Webページで文字装飾を他の効果に置き換えるには、スタイルシートを使うのが一般的だ。たとえば、<strong>を「強調」ではなく「赤色」に置き換えることも、スタイルシートで再定義してやれば簡単にできる。しかし、問題はその置き換えの普遍妥当性だ。自分で作る文書であれば、その置き換えを前提にドキュメントを作れば問題はない。しかし、他人の作ったページでその置き換えが妥当かどうかは全く判らない。多くのページがHTMLのセオリーから外れた作り方をされている。「強調」を「赤色」に変えると、読めないページも出てくるだろう。たとえば、本文が元々赤色で変化が判らないこともあるだろうし、逆に地が赤色で文字が消えてしまうこともあるだろう。あるいは、見出しに<h>を使わず、強調と文字サイズ指定を使っている場合、真っ赤な見出しになってしまうこともある。以上のような例は随分行儀が悪い作り方だとは思うが、実際に存在するページである(私自身似たようなことをしている)。それを踏まえ、自分が書くためのスタイルシートと、他人のページを表示するためのスタイルシートは分けて考える方が良いと思う。

ちなみに、スタイルシートを使えばフォントの変更も可能だ。したがって、文字装飾が必要な部分のみ、ベクターフォントを指定して文字装飾を有効にすることも可能だ。確かにそうなのだが、それがスンナリ行くようなら、何もこんなに悩んだりしない。一言で言えば、それでも小サイズのベクターフォントは汚すぎて使う気になれない、ということなのだ。

●ビットマップ・フォントへの関連付け

OS/2には「ビットマップ・フォントへの関連付け」という機能がある(システム設定|システム|フォント|ページ2)。これを使うと、アウトライン・フォント(ベクターフォント)の一部がビットマップ・フォント(ラスターフォント)に置換される。16ドット前後の小サイズのフォントの場合、アウトライン・フォントは非常に汚くなってしまうので、この置換機能を使って奇麗で軽いビットマップ・フォントに置換できるのは実にありがたい。これがラスターとベクターのいいとこ取りを狙った機能であることは間違いない。しかし、その効果は限定的である。なぜなら、ラスターに置換された時点で文字装飾機能はなくなるので、実際にはラスターフォントを使っているのと大きな違いがなくなってしまうのである。しかし、それでもこの機能にはそれなりのメリットがある。

ちなみに、この関連付け機能には、一定の範囲内で近いサイズに丸めるオプションと、完全に一致するサイズのみを置換するオプションの2種類がある。文字の美しさで言えば前者の方が優れているが(基本的にベクターフォントを駆逐できるので)、このオプションを選ぶと<large>指定すらまともに効かなくなってしまう。なかなかに悩ましい。が、ここでは前者のオプションを指定することにする。それは、かなり回りくどい判断によるのだが…

まず、ブラウザではラスターフォントを基本にする。具体的には「MINCHO」または「MINCHO Proportional」だ。MINCHOは一般的な等幅フォントで、MINCHO Proportionalはその名の通りプロポーショナルフォントだ。英数字の交じるドキュメントでは、プロポーショナルフォントの方が読み易い。ところが、MINCHO Proportionalにはサイズが2種類(16px/20px)しかない。MINCHOが標準でも4サイズあるのに比べて非常に貧弱だ。大きな文字はともかくも、小さな文字が表示できないため、デザインが崩れるページが大量に出てきてしまう。しょうがないのでMINCHOにしてみたら、デザイン崩れは減ったが、やはり見栄えが今一つ。

そこで、関連付け機能を有効にした上で「HeiseiMincho-P」をベースフォントにした。HeiseiMincho-Pはプロポーショナルピッチのベクターフォントだが、関連付け機能のおかげで、大半の文字は12,14,16,20,24pxのラスターフォントが使用されるようになる。つまり、プロポーショナルで読み易い上に、奇麗なラスターフォントで表示され、小さな文字もきちんと小さく表示され、デザイン崩れもなくなるのである。しかも、汚いベクターフォントも交じらない。もし、関連付け機能で完全一致のみを置換するオプションを選んでいたら、どうしてもベクターフォントが交じってしまう。これが、上記のような設定をした理由である。つまり、プロポーショナルでサイズの豊富なラスターフォントを実現する「手段」として「ベクターフォント+関連付け機能」を指定したのである。もちろん、これでも文字装飾の問題はまったく解決できていないのだが、それについては後述する。

なお、この関連付け機能は全てのベクターフォントに有効なわけではない。基本的に、平成フォントとMSフォントに対してのみ有効で、RFフォントやUnicodeフォント(Times New Roman WT Jなど)には効かないようだ。

●ラスターフォント・ファイル

x:/OS2/SYSDATAには各サイズのラスターフォントのデータが入っている。そのファイル名から類推できるのは、 つまり、明朝とゴシックの区別があるのは20ドット以上のフォントのみで、16ドットまでは明朝もゴシックも完全に同じ字形データを使用している。これらのサイズを使用している限り、書体の指定は全く無意味である。なお、関連付け機能が有効な場合には、平成系/MS系のベクターフォントも、このラスターデータを使用する。本来のベクターデータは、これらのサイズではとても汚い。

●明朝(ノーマル)のフォントサイズ比較

明朝(MINCHO)やゴシック(GOTHIC)はDOS時代からの流れを組むラスターフォント。過去の遺物のように思われているが、実際は最も奇麗で読み易く表示も軽い。フォントサイズは12,16,20,24pxの4サイズ+オプションの28,32,36px。14pxのラスターフォントのファイルもあるが、なぜか使用できない。なお、12pxの文字ピッチは14pxに近い。

12px 帰って来たウルトラマン
16px 帰って来たウルトラマン
20px 帰って来たウルトラマン
24px 帰って来たウルトラマン

●平成明朝Pを指定した場合のラスターフォント

本来、平成明朝P(HeiseiMincho-P)はATMベクターフォントだが、「ビットマップ・フォントへの関連付け」を使うと、ラスターフォントに置換される。使用されるラスターフォントは12,14,16,20,24pxの5サイズ。MINCHOと違って14pxが使えるのが特長。なお、デフォルト設定では、中間サイズは小さい方に丸められる(例:18px→16px)。完全一致以外は置換しなオプションを指定した場合は、中間サイズはベクターデータで描画される。

12px 帰って来たウルトラマン
14px 帰って来たウルトラマン
16px 帰って来たウルトラマン
20px 帰って来たウルトラマン
24px 帰って来たウルトラマン

(注)ビットマップへの関連付けが有効になっていないと、上記のサンプルはベクターフォントで表示される。

●20pxフォントの書体による文字間隔の違い

元々のラスターフォントと、ビットマップ・フォントへの関連付けで置換されたラスターフォントは実は微妙に異なっている。字形データ自体は同じ物だが、まったく同じように表示されるわけではない。20pxで比較してみると、MINCHOよりもHeiseiMincho-Pの置換ラスターフォントの方が文字間隔が広く、間延びした感じになる。GothicとHeiseiGothic-Pでも同じである。20pxのフォントは見出しに使用されることが多いが、見出しには文字間隔の詰まっているMINCHO/GOTHICの方が適している。ただし、どのサイズでも常に純粋ラスターの方が字間が詰まっているというわけではない。16pxは書体によるピッチの違いはないし、12pxは逆に置換ラスターの方が字間が狭い。また、MINCHO SystemやGOTHIC Systemはラスターフォントだが字間が広い。

HeseiMincho-P 帰って来たウルトラマン
MINCHO(Normal) 帰って来たウルトラマン
GOTHIC(Normal) 帰って来たウルトラマン

●ラスターとベクターの24pxフォント

20pxまではラスターフォント置換が有効だが、24px以上はフォントによって違いが出てくる。TrueTypeの平成フォントはラスターと同じデータが使われているようだが、ATMの平成ゴシックPはベクター化されているように見える。そのため、文字のラインが太くはなるが、エッジが崩れて奇麗ではない。<h3>や<h2>などでは、このあたりのサイズのフォントが使用されることになるが、スタイルシートで明示的にラスターフォントを指定しておく方が良いかも知れない。ベクターフォントはもっと大きなサイズでないと奇麗に見えない。

Gothic(Normal) 帰って来たウルトラマン
平成角ゴシック 帰って来たウルトラマン
HeiseiGothic-P 帰って来たウルトラマン
RFゴシック-B 帰って来たウルトラマン
HeiseiGothic-P
(48px:参考)
帰って来たウルトラマン

なお、何故かTrueTypeの平成フォントは他のフォントと比べてベースラインが上がるようだ。上記の例でも、上行にくっついて配置されているように見える。

●ピクセル指定とポイント指定

基本的にフォントサイズはstyleによってピクセル単位(px)で指定する方がよい。最も直接的で物理的な単位だからだ。HTMLの論理単位(例えば「large」とか無単位の「size=3」とか「size=4」)は、意図した通りのサイズにならないことが多い。これは、OS/2の日本語フォントシステムがタコで、論理単位→物理単位の変換がまともに行われないからだ。それどころか、通常サイズ(16px/10pt)近辺ではボールドや、明朝とゴシックの区別すら不可能という、欠陥システムなのだ。その欠陥を補うには、自分でスタイルシートをいじって、サイズや色や装飾を変更するしかない。また、「ポイント」は物理単位と論理単位の中間的な位置付けだが、これも単に一番近い物理サイズに丸めているだけのようだ。したがって、ラスター置換を使う以上、1pt単位の細かなサイズ指定をしてもほとんど意味がない。唯一の例外がラスターフォントの11ptで、これは字面は10ptと同じで、字間のみを変更している。が、用途はなさそうだ。

▼ゴシック(ノーマル)

08pt 帰って来たウルトラマン
09pt 帰って来たウルトラマン
10pt 帰って来たウルトラマン
11pt 帰って来たウルトラマン
12pt 帰って来たウルトラマン
13pt 帰って来たウルトラマン
14pt 帰って来たウルトラマン
15pt 帰って来たウルトラマン
16pt 帰って来たウルトラマン

  ▼ゴシック(システム)

08pt 帰って来たウルトラマン
09pt 帰って来たウルトラマン
10pt 帰って来たウルトラマン
11pt 帰って来たウルトラマン
12pt 帰って来たウルトラマン
13pt 帰って来たウルトラマン
14pt 帰って来たウルトラマン
15pt 帰って来たウルトラマン
16pt 帰って来たウルトラマン

 
▼平成ゴシックP(ATM)

08pt 帰って来たウルトラマン
09pt 帰って来たウルトラマン
10pt 帰って来たウルトラマン
11pt 帰って来たウルトラマン
12pt 帰って来たウルトラマン
13pt 帰って来たウルトラマン
14pt 帰って来たウルトラマン
15pt 帰って来たウルトラマン
16pt 帰って来たウルトラマン

  ▼平成角ゴシック(TrueType)

08pt 帰って来たウルトラマン
09pt 帰って来たウルトラマン
10pt 帰って来たウルトラマン
11pt 帰って来たウルトラマン
12pt 帰って来たウルトラマン
13pt 帰って来たウルトラマン
14pt 帰って来たウルトラマン
15pt 帰って来たウルトラマン
16pt 帰って来たウルトラマン

●デフォルトのスタイルシート

デフォルトのスタイルシートは、Mozilla/Seamonkeyのユーザーディレクトリのchromeの中にあるUserContent.css。
  x:/Seamonkey/Mozilla/Profiles/Default/xxxxxxxx.slt/chrome/UserContent.css。
ここに自分用のスタイル設定を定義しておけばよい。ただし、定義が有効になるのはブラウザ再起動後。試行錯誤段階ではlinkで明示的にcssを読み込む方が良い。ここにOS/2のフォントシステムの欠点を補うように、タグを再定義すればよい。ただし、ここでの再定義は表示するすべてのページに対して有効なので、極力汎用性を考慮しておかないといけない。
BODY{color:black; line-height:1.5em}

H1{font-family:Gothic; font-size:28px; font-weight:normal;}
H2{font-family:Gothic; font-size:24px; font-weight:normal;}
H3{font-family:Gothic; font-size:20px; font-weight:normal;}
H4{font-family:Gothic; font-size:16px; font-weight:normal;}

STRONG{color:indigo}

LARGE{font-family:MINCHO; font-size:125%; font-weight:normal; font-style:normal; vertical-align:-5%;}
最初の行は行間を0.5行程度空けて読み易くする指定。これは問題ないだろう。

次のブロックは見出しの指定。ラスター決め打ちにしている。<h4>はいろいろ考えたが、汎用性を考えると下手にいじらない方が賢明と言う判断。本来、<h4>は本文と同じサイズの見出し。この設定ではサイズだけでなく、本文と完全に同じフォントになってしまうが実害はないだろう。メリハリが効かなくて見栄えが悪いだけ。<h3>以上は文字サイズが大きくなる上に、明らかなゴシック書体に変わるので、かなり見出しらしくなる。

むしろ問題は次の強調指定。ここでは例として<strong>だけを再定義している。<em>や<b>も同様に指定すれば良いのだが、あまり良い方法ではないので、ここでは<strong>だけにしておいた。今まで何度も述べたように、16pxラスターフォンを使っている限り強調装飾は無効である。そこで思い付くのは、強調の代わりに別のフォントに変更すること。と言っても、16pxラスターフォントは明朝もゴシックも同一グリフなので、単なるゴシック指定は意味がない。ベクターフォントでもラスター置換が効いていると同じく無意味。ラスター置換の対象外の、RFフォントを指定するという方法があるが、これには重大な問題がある。それは、字形がとても汚い上に、デフォルトのスタイルシートでは、日本語フォント名が通らないようなのだ。外部スタイルシートとしてリンクすれば問題なく指定できるようなのだが、なぜかデフォルトスタイルシートではダメ。かと言って、RF以外のラスター置換対象外のベクターフォントはUnicode系のTimes New Roman WT JやMonotype Sans Duospace WT Jくらいしかない。これらは字形はさらいに汚い。「そもそもできないし、できても汚い」のではお話にならない。

次に思い付くのは、強調の代わりに文字サイズを上げること。つまり;

  STRONG{font-family:GOTHIC; font-size:125%; vertical-align:-5%;}
てな感じだ。この方法のメリットは、いかにも「強調!」という感じがすることだが、流石に度が過ぎる。また、サイズが大きくなるのに応じて横幅も広くなるから、ページデザインが崩れる可能性もある。ちなみに、font-sizeを125%にしたのは、16pxの一つ上のサイズが20pxなので、125%より小さい倍率だとサイズが変わらないためだ。一度、<em>や<b>も全てこの設定にしたことがあるが、思いっきりガチャガチャな印象になってしまった。ダメとは言わないが、好ましい設定ではない。もっとも、私のページは<em>をこの設定にした上に、更に色まで変えている。ご覧の通り確かに強調効果は大きいが、下品な印象は免れない。

そこで、基本に立ち返って、なぜ強調表現が必要なのか考える。純粋に装飾目的だけであるなら、実はなくても害はない。しかし、強調表現がアイデンティファイに使われるとそうはいかない。たとえば、表の中に強調された数字がいくつかあり、「表の中の太字は○○である」というような説明がついていた場合、強調箇所が判らないのでは、文書の読解が不能になってしまう。逆に言うと、このような場合は強調されること自体に大きな意味があるのではなく、他から区別できれば良いのである。つまり、識別さえできれば強調である必要はない。となれば、色を変えたり下線を付けたりするだけでも事足りる。そこで、強調をindigo色表示に変更した。

ここで、アンダーラインではなく色変更を選んだのは、強調表現がどのような目的に使用されるか完璧に予想するのは不可能だからだ。もし、見出しまわりに使われたら、アンダーラインでは煩いだろう。極めて地味なindigoを選んだのも同じ理由だ。黒字と区別することは可能ではあるが読んでいて邪魔にならない色、という基準で選んだ。もちろん、白地(乃至は明色)に黒文字という標準的な配色のページであることが大前提だが。indigoでは判別が困難な場合もあるだろうから、そのあたりは良く見るページの配色や個人の好みで変更すればよい。

最後に、<large>を再定義しておいた。HTMLの文字サイズは、一つレベルが上がるごとに1.2倍になるそうだ。と言うことは、標準的な16ドット・フォントの一つ上のレベルは19.2ドットということになる。が、OS/2には16ドットと20ドットの中間サイズはない。なので、16ドットに丸められてしまう。すなわち、<large>指定はまったく効果がない。しようがないので、largeを1.25倍拡大に変更して、16ドットの一つ上を20ドットにしている。

●もう一つの選択肢

全てをラスター置換する設定でも、RFフォントを使えば同様なことはできる。 しかし、小サイズのRFフォントは極めて汚く使う気になれない。

RFに比べればATMの平成ゴシックPは比較的奇麗(それでもかなり汚いが)。 そこで、装飾(強調等)が必要な個所はHeseiGothic-Pを指定し、 フォントサイズを少し大きめに設定する(例:16px→18px or 110%)。 上記の設定では、フォントサイズを変更しないとラスター置換されてしまう。 また、ベクターフォントはラスターフォントよりも字面が小さいので、 少し大きめにした方がバランスが取れる。 なお、ベースラインのずれにはvertical-align:+10%などとして対処。

ただし、この設定では半端なサイズのフォントがすべてベクターフォントで表示されるため、ページ全体から受ける印象は非常に汚いものになる。


【付記】いろいろ試してはみたが、16pxラスターの太字フォントがない限り、まともな表示は難しい。それがないからいろいろ苦しんでいるのだが、ないのなら作ればよいのではないか? 古典的な二重印字手法で太らせた16pxラスターフォント・ファイルを作って、システムに登録するというのはどうだろう? 簡単ではないにしろ、中長期で考えてもいいな…

【逆襲のOS/2目次】 【ホーム】