裏紙

1 ：na na shi：2006/03/19 20:31:44

どうでもよかったりよくなかったりすることを色々書いたり書かなかったりするところ

9 ： ◆lllllTqq9g ：2006/03/29 20:42:44

MS Pゴシックを利用した2ch系AAをWebページに掲載する方法について。
(IE以外のブラウザでもそれなりに正しく表示されるようなCSSの書き方などのメモ。)

CSS による表示スタイル指定：

1) ピクセル単位指定
font: 16px "ＭＳ Ｐゴシック";
line-height: 18px;
white-space: nowrap;

2) ポイント単位指定
font: 12pt "ＭＳ Ｐゴシック";
line-height: 1.125;
white-space: nowrap;

どちらの方法でもフォントファミリにはMS Pゴシックを指定している。
1の方法ではピクセル単位でフォントサイズと行の高さを指定している。
2の方法ではポイント単位で指定している。

デフォルトでは画面の解像度設定が96dpiであるため同じ結果となる。
( 1 point = 1/72 inch
　12 point * 96 dpi = (12 * 1/72 inch) * 96 dot/inch = 16 dot
　(12 point * 1.125) * 96 dpi = 18 dot )
しかし、この設定はユーザにより変更することができる。
変更した場合にはフォントサイズが想定したものと異なってしまうため、
ピクセル単位で指定する1の方がAAには適していると思われる。
( 画面のプロパティで「大きなサイズ (120 DPI)」を選択した場合は、
　12 point * 120 dpi = 20 dot
　(12 point * 1.125) * 120 dpi = 22.5 dot
　となる。このときの文字ごとの文字幅比は 16dot の場合と異なるため
　ポイント数指定ではズレが発生することとなる。 )

ただし、AA以外の通常の文章のフォントサイズはユーザ環境での解像度設定を尊重し、
ポイント指定あるいは他の相対サイズ指定にするべきである。
(AAを囲む<p>や<div>、あるいは<pre>などのブロック要素にclassを指定し、
そのclassにのみAA用設定を適用するなど。)

line-height による行間の指定をしないと縦にのびたり
縮んだ状態で表示される可能性がある。
これは複数行にわたるAAでは大きな問題となる。
まれに行間0のエディタで作成したと思われるAAもあるが、
その場合は line-height をフォントサイズと同一とすることで
意図していたと思われる表示となる。

white-space: nowrap; は、横に長いAAが右端で折り返されないようにするためのもの。
<nobr> タグを使う方法もあるが、このタグはHTML/XHTMLの
標準には含まれないブラウザ拡張であるため、標準準拠原理主義者にはお勧めできない。

これらの設定でWindows上のIE、FireFoxなどのGecko系、Operaで
正しく表示されてるっぽいことを確認。ただし、IE以外ではユーザが
メニューなどから表示サイズを変更した場合にはフォントサイズが変更されて
AAがズレてしまう。 (これはむしろサイズが変わらないIEの仕様バグ？)

Windows以外ではそもそもMS Pゴシックが利用できないため考慮していない。
(利用できないこともないが、多分利用規約に違反するはず。)
モナーフォントなどの文字幅をMS Pゴシックと同一にしたフォントもあるが、
グリフ (文字の形) が異なるので問題外。
AAでは文字の形、線・点の位置・高さ・長さ・向きなどをフルに活用しているため、
グリフが異なるというのは (製作者にとっては) 死活問題となる。

日本向け以外の海外OS上での表示はフォントなどをインストールすれば
表示できるらしいので、文字エンコーディングさえ正しく指定してあれば
問題ないと思われる。(未確認)

これらクライアントの環境に依存する様々な表示問題を根本的に解決するには、
AAを画像化するという方法がある。
ただし、データサイズにして数倍から数十倍になることもあり、
また変換のための手間もかかるため、対象となる数が多い場合には
あまり現実的ではないと思われる。
数が少なかったり、手間がそれほど問題とならない場合には考慮にしてもよいのかもしれない。
(一度に数個づつだったり、あるいは変換を自動化できる場合など。)

10 ： ◆lllllTqq9g ：2006/03/29 20:51:10

IEの文字のサイズ「小」に相当するスタイル：
font: 13px "ＭＳ Ｐゴシック";
line-height: 14px;

「最小」に相当するスタイル：
font: 12px "ＭＳ Ｐゴシック";
line-height: 13px;