2012-11-01

高PPIディスプレイへの対応の難しさについて

高PPIディスプレイへの対応は難しい。というのも、既存のソフトウェアは勝手に書き換わってくれないし、ましてや今から新しく書くのであっても、ライブラリは既存のものを使うので難しい。

未だに、低レベルなAPIでは、多くのディスプレイ上のUIの大きさを、ピクセル単位で指定する。

フォントには、ポイントという単位がある。これは歴史的な単位で、1ポイントは約0.3514mmである。

もっと高レベルな実装でも、あまり問題は変わらない。たとえば、CSSで長さを指定する単位には、いまだにピクセルが存在する。

なぜ、ピクセル数で長さを指定すると問題になるのかというと、ピクセルの大きさが、環境ごとに違うからである。

最新の携帯電話の画面のピクセルの大きさは極めて小さい。屋外に設置する巨大なディスプレイなどは、ピクセルが大きい。

したがって、10ピクセル分の長さというのが、環境ごとに異なる。

伝統的に、1ピクセルあたりの大きさを言うよりも、1インチあたりにピクセルを何個敷き詰められるかという表現をする。また、印刷からの伝統で、ピクセルではなくドットという呼ばれ方もする。DPIとは、Dot Per Inchの頭文字なのだ。インチのような劣った長さの単位は、今やアメリカやイギリスのような劣等国しか使わないが、慣習的に使われている。

現在、デスクトップ向けのディスプレイでは、96PPIのディスプレイが非常に多い。96PPIとは、1インチあたり96個のピクセルを並べることができるという意味である。

さて、96PPI環境において、ラテンアルファベットは、12ピクセルあれば十分に表現可能であると感じたとする。96PPI環境での1ピクセルは265マイクロメートルなので、12ピクセルは約3ミリメートルになる。これが文字の大きさだ。

さて、携帯電話やタブレットのような小さなディスプレイでは、もはや300PPIも珍しくない。300PPI環境で真面目に12ピクセルで文字を描画すると、文字の大きさは約1ミリメートルになる。これでは読めない。

したがって、正しいソフトウェアの実装方法は、文字を「3ミリメートル」という論理的な長さで描画するということになる。問題は、低レベルなAPIの実装は、フォントサイズをメートルで指定することはできないので、ソフトウェアごとに変換をしなければならない。つまり、実行環境のPPIを何らかの方法で特定して、3ミリメートルは何ピクセルになるのかを計算しなければならない。

さらに問題なのは、多くの環境で、ディスプレイのPPIを取得する方法がない。それに、PPIの違う複数のディスプレイを使っている可能性だってある。

ところで、CSSではピクセル単位で長さを指定することができる。例えば、ブラウザーがCSSの指定を尊重したとすると、以下の文字は12ピクセルで描画される。

この文字列は12ピクセルで描画される。

さて、このページをプリンターで印刷したらどうなるだろうか。プリンターは、個人向けの安いものでも、1000DPIを超える。実質のピクセル数でも、やはり300PPIはある。このページをプリンターで印刷すると、上記の文字列は読めないほど小さく印刷されるのだろうか。

実際には、主要なブラウザーの実装では、印刷の際にCSSのピクセル数指定に従うことはない。主要なブラウザーは、固定のあるPPI(たとえば96とか)においてピクセル数が指定されたという扱いをする。そのため、プリンターの実PPIに合わせて適切にスケールされるのだ。

WindowsなどのOSでも、この戦略を使っている。ピクセル数指定は、あるPPIにおいて指定されたピクセル数だとみなし、実際の環境のPPIに合わせて、まるごとスケールするようにしているのだ。Windowsの場合、ソフトウェアが明示的にスケールを無効にするAPIも用意されている。明示的に無効にしない場合、自動的にウインドウごとスケールされる。

なんといっても、今のソフトウェア実装は、歴史的な設計の問題により、複数の極端にPPIが違うディスプレイが使われるという状況に対して、あまりうまく動かない。

ここまでは、ベクトルデータであるフォントを描画する際の問題だ。ベクトルデータではない画像は、もっと問題になる。

画像のピクセル数が十分に多ければ、優秀なスケーリングアルゴリズムにより、綺麗にスケールは可能だ。しかし、96PPI環境において使われることが想定されている数十ピクセル程度の大きさのアイコンなどは、どうしようもない。

理想的には、アイコンのような小さい人工的な画像は、すべてベクトルフォーマットにすべきである。実風景を写した写真などは、できるだけ高解像度にして、優秀なスケーリングアルゴリズムを使うべきだ。

といったところで、世の中は簡単にベクトルフォーマットを使うようにはならない。コンピューターの性能やストレージ容量は、いまだに有限である。

まだまだ時間がかかる。

3 comments:

  1. 人にとって一番大事なのは網膜に映る像の範囲、つまり画角ではないでしょうか。
    ディスプレイ上の長さでなく、もちろんピクセル数でもなく。

    同じ大きさの字でも、眼からディスプレイがどれだけ離れているかによって印象が違います。
    3mmの大きさの字はモバイルデバイスでは読むのに適していますが、デスクトップでは小さすぎます。

    画角を使うと、例えば画角0.007ラジアンが指定されたとき、70cm離れたディスプレイ上では長さ4.9mm(13.9ポイント)で表示されることに、20cm離れたディスプレイ上では長さ1.4mm(4.0ポイント)で表示されることになります。

    もしかしたら仮定の視点距離とPPIからピクセル数を割り出して描画する画角指定のライブラリを作っている人がいるかもしれません。
    いないとしたら、それはなぜなんでしょう。
    気になります。

    ReplyDelete
  2. それ以前の問題としてせっかくの高解像度ディスプレイなのに情報量を減らしてまでフォントをでかく綺麗に描画して欲しいって需要はあまりないと思うけどなあ。もしも縦横19200x10800とかの世界になったら話は別だけど。

    ReplyDelete
  3. CSSの「ピクセル」はまともに解釈していないサイトがあまりに多いため、単に「1/96インチ」のことであると再定義されました。
    http://dev.w3.org/csswg/css3-values/#absolute-lengths
    そもそも高解像度ディスプレイが登場する以前にもプリンタ等でとっくに問題になっていましたし。

    ReplyDelete

You can use some HTML elements, such as <b>, <i>, <a>, also, some characters need to be entity referenced such as <, > and & Your comment may need to be confirmed by blog author. Your comment will be published under GFDL 1.3 or later license with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.