OSの解像度って?dpi?ppi?
モニターの解像度と画像の解像度のほかにも、「OSの解像度」っていう問題がある。これはどんなことが起きるんでしょうか。それにdpiとppiって何が違うか知ってます?
モニターや画像の解像度は気にしたことあるけど、「OSの解像度」ってのはあんまり気にしたことない人が意外といますね。でもほんとは気にしないと、自分の作ったwebページに載せたテキストが意図しないところで改行されてレイアウトぐちゃぐちゃ、ってことが起こります。
ではまずその「OSの解像度」について。
まず、「解像度」っていうからには、やっぱり粒の数には変わりありません。ただ「なんの粒の数」かっていうのが問題です。画像の場合はその画像を構成する粒の数でしたが、「OSの解像度」という場合、「1インチの長さを何粒で表示させるか」ってことなんです。これだけ。
具体的にいうと、Macは1インチ分を72粒(dpi)、Windowsは96粒(dpi)使って表します。
ここでひとつ思い出してください。スキャナーを使ったことのある方なら経験したことがあるかもしれません。箱や説明書きには「dpi」 っていう単位が使われてるのに、いざスキャンしようとソフトを起動したら、解像度を選択する場所に「ppi」って出てきたりします。「ppi」てのは「dpi」と違うのか?
結論から言いましょう。通常の作業中は、「同じもの」と考えて事実上差し支えないでしょう。
「dpi」というのは「ドット・パー・インチ(1インチの中に何ドット)」の略なんです。「ドット・パー・インチ」というのは印刷物の行程で使われていた言葉でした。印刷物というのは、小さな「丸い点」すなわち「ドット」をたくさん紙に吹き付けることで画像を作っています。ですから、単位として「ドット」と呼んだのは至極当然です。
これに対してモニター上での画像は、小さい「四角形」すなわち「ピクセル」を並べることで表示されます。だから「ピクセル」なんです。「ppi」というのは「ピクセル・パー・インチ」の略なわけ。
しかしどちらも粒の数を表すのに使われるため、ほとんどの場合すべて「dpi」という単位で済ませてしまっているのが現状です。ですからみなさんも通常は「dpi」の単位で暮らして問題ないでしょう。
印刷物を作る行程で「ppi」というのはちょっと違ってるでしょうけどね。
ではここでOSの解像度の中身に戻りますと、さきほど「Macは1インチ分を72粒(dpi)、Windowsは96粒(dpi)使って表している」という取り決めのことだ、と説明しました。
じゃなんでたったこれだけのことが問題なんだ、ということですが、問題はあるんです。何を隠そう、(隠したってはじまらないけど)OSごとにその粒数が違うんですな、これが。気のきいた方ならもう察しがつくでしょうけど、1インチ分の長さが違って見えるんですよ!
具体的にいうと、Macは1インチ分を72粒(dpi)、Windowsは96粒(dpi)使って表します。WindowsはMacの約1.3倍の長さになるんです。
でも、画像に関してはピクセル=粒数で大きさを決めていますから、どっちのOSでも100粒なら100粒、大きさに変わりありません。「1インチ分」なんて気にすることはめったにないでしょ。だからまず画像に関してはよし。じゃ何に気を使う必要があるか!
文字、文字ですよ。文字って「ポイント」っていう単位使ったりするでしょ?あれが問題です。
「ポイント」という単位はもともと印刷物に使う文字の大きさの単位で、1インチの72分の1が1ポイントと決められています。そしてMacは生まれた当初からDTPを視野に入れていましたから、印刷物と単位を同じにしました。だから1インチを72粒、1粒1ポイントとなるように設計されています。でもWindowsは同じ1ポイントを表示するのに約1.3粒使うんですよ!
でもって問題なのは、htmlで設定する<font size="3">とかいう設定は、このポイントを基準としているってことです。基本的に<font size="3">が12ポイントだったかと思いますが。
だから文字の大きさを「ポイント」で設定してしまうと、Mac上で10文字横に並ぶ幅に、Windowsは7文字しか入らないで、3文字は改行されてしまう。これはテキストがいっぱいある画面をかっこよくレイアウトしたい人には大問題ですね。ちゃんとゆとりを考えておかないと、どこかの画面でとんでもない箇所で改行されてたりってことがおきる。DTP出身の人なんかだと気絶しちゃうような事件ですわね。
じゃどうしたらいいんだってことですが、オーソドックスな方法として、「スタイルシート」を使うというのが一般的です。スタイルシートでは、フォントサイズをpx(ピクセル)で設定することができます。こうすれば、基本的にはMacだろうとWindowsだろうと、12pxといえば12pxで見えるから。(「基本的には」と言ったのは、これも必ずしも完璧ではないからです。使っているフォントによっては、改行場所が違ってしまうこともなくはない。まあでも率は低いのでこの際この問題は追求しないことにしましょう。)こういう点ではスタイルシートはありがたいですね。スタイルシートが存在しなかったころは、対処方法は「画像にして貼る」だったんですよ。それもまたビックリでしょ。
しかし!まーだ問題は残されてます。まったくめんどうです。
次の問題はブラウザの仕様やユーザービリティに関わってくるので、ごっちゃにならないよう、次回にしましょう