cssの最近のブログ記事

Point vs Pixel

| トラックバック(0)

(補)書いた後で読み返してみましたが、我ながらたいへんわかりづらい内容ですね。
一言でいえば、
「MS Pゴシックアンチエイリアスなしのユーザーを対象にデザインするのはしんどいな〜」
という事です。

////////////////////////////

気付いてしまったのでエントリー。

OSXは、画面解像度が72ppi(※1)であることを前提に設計されています(※2)。
 →したがってpixel=pointとなります(※3)。10ptの文字は、10pxの文字として表示されます。

Adobeのソフトウェアもそうです(※4)。画面解像度が72ppiであることを前提に設計されています。

Windowsは、画面解像度が96ppiであることを前提に設計されています(※5)。
 →OSXやAdobeのソフトに比べ「モニタのキメが細かいことを前提にしている」ともいえます。
  10ptの文字は、110*96/72=10*4/3≒10*1.333... 約13.3pixelを使って表示されます。

現在のほぼすべてのWebブラウザは(※6)、画面解像度が96ppiであることを前提にhtmlを解釈します。
 →「10px」、とピクセルで指定されたら10px相当の文字サイズで描画しますが、「10pt」とポイントで指定されたら96/72*10=13.333pxのサイズの文字を描画します。

ここまでよろしいでしょうか。
上記の前提から、

Adobeのソフトウェア、PhotoshopやFireworksなどのグラフィックソフトでは、ptによるhtmlの文字組みのデザインシミュレーションはできません。かなりアバウトな近似値となります。

「いいじゃん、べつにできなくたって。pxの絶対指定(※7)で組めば、そのシミュレーションはできるんでしょ」
いやいや、整数値のpxで絶対指定する限り、ブラウザの文字サイズは、整数値のptとむりやり解釈され(小数点以下は四捨五入)、意図しないサイズでの指定となってしまいます(※8)。それを実装後に微調整するのは馬鹿らしいと思いませんか。

「もう全部相対指定でいいじゃん。具体的な文字サイズはユーザーが最終決定すればいいじゃん」
いやいや、MS Pゴシックなど、ビットマップを持ったフォントは文字サイズによってキャラクター(文字形状やウェイト感)がかなりバラつくので、コントロールしておきたいのです。

結論。 96ppiはうざいですね。WindowsXP日本語版を対象にするのはほんとにうざい。まあ、諸悪の根源はMS Pゴシックなんですが......。
アンチエイリアス文字表示万歳。ヒラギノ万歳、メイリオ(一応)万歳です。

※1 たいていは、「dpi(dots per inch)」と書かれることが多いようですが、やはりここはppi(pixels per inch)でしょう。
※2 Appleの液晶モニタの解像度が72ppiだ、ということではありません。いまどきそんな粗い液晶モニタはありません。
※3 USの単位では、1pt=72分の1インチとなります。何進法だよ。あ、12進法の6倍か。
※4 Macintosh版もWindows版もどちらも同じです(検証終わってません)。
※5 Vistaであれば、[個人設定]→[DPI スケール コントロール パネル]を使ってDPIスケールを変更できます。ただし、大きく(粗く)することができるだけで、デフォルトの96ppiが最小値のようです。72ppiとかにはできません。
※6 昔のブラウザは、想定する画面解像度を変更できたような気がします。Macintosh版のIEなどがそうだったように記憶しています。
※7 絶対値指定の文字サイズのユーザー側の制御、ブラウザの機能が充実してきたので「文字大きくしたい人」問題はさほど重要でなくなった気はします。
※8 検証画面です。(実質的に)px指定は結局pt換算値を四捨五入して表示されていることがわかります。

上記は未検証な部分も多く、関連する疑問はほかにもありますが、今日はここまで。

備忘録。スクリプトを色分けするためのjavascriptライブラリを導入しました。

いくつかあるようですが、googleから提供されている「google-code-prettify」をなんとなく選んでみました。

cssは添付のものをそのままつかっていますが、外枠に関する定義はコメントアウトして、カラーリングのみを利用しています。

また、font-familyの指定は、font-family: "Courier", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Courier New", "メイリオ", "MS ゴシック", monospace;としてみました。OSXはCourier+ヒラギノ角ゴシック、VistaはCourier New+メイリオ、XPはCourier New+MS ゴシックで表示されているはずです。

XHTML+Flash全画面

| トラックバック(0)

トップページをxhtml(XHTML 1.0 Transitional)で書き直したら、中に埋め込んだ全画面表示のFlashが表示されなくなってしまいました。

ちょっとググったら、原因はすぐわかりました(ホントにすぐに。改めて、検索は便利だなぁ......)。

高さおよび幅が 100 パーセントに設定された Macromedia Flash Player ムービー (SWF) が以下のブラウザで正常に表示されないことが確認されております。

(中略)

XHTML コードで定義されている doctype および DTD がブラウザのレンダリングに影響を与えているのが原因です。

(中略)

回避策としては、HTML ファイルの上部に以下のような XHTML コードがあります。この XHTML コードを削除して対処してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

メモ: この回避策を適用したファイルは、XHTML に準拠したファイルでなくなりますのでご注意ください。

Adobe - Flash TechNotes : 100 パーセントに設定されている Flash Player ムービーが正常に表示されない

おいおい 、Adobeがそれでいいのか......。

いろいろ調べてみたら、 swffit を使えば、簡単に全画面表示ができるようでした。使ってみると確かに解決しますが、 swfobject日本語訳 )とあわせてふたつ、たかだかswfを埋め込むだけのために使うのもスマートでない気がしたので、もう少し調べると、cssに追加で記述すれば回避できることがわかりました。

cssにこちらを追加することで、あっさり解決しました。

body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

以上です。

調べる途中でこちらのサイトも参考にさせてもらいました。

Firefox 3.0

| トラックバック(0)

(OSXの)Firefox 3には期待しています。

今回のバージョンアップで日本語のレンダリングも若干変わったようです。

<strong>などによる、太字表現が、疑似ボールドではなく、きちんとフォントファミリーの上位ウェイトで表示されるようになりました。

従来のFirefoxでは、


と、太字が疑似ボールドでしたが、新しい3.0(b2)では、


と、太字がきちんと上位ウェイト(W3→W6)になります。

(参考:htmlによる表示)

ヒラギノ角ゴシック Pro W3

ヒラギノ角ゴシック Pro W3の太字

ヒラギノ角ゴシック Pro W6

※説明用の記述なので、Safariなどでは意図通りに表示されません。

フルフォントネームによるfont-family指定で表示されるようなので、フォントの認識の方式が変わったようです。

引き続き、検証したいと思います。

今回のバージョンアップで、Safari、Operaに続き、Firefoxからも疑似ボールド表示がなくなりました。

OSXってやっぱりいいなぁ。

メイリオ or Meiryo

| トラックバック(0)

答え:メイリオ

前回のエントリー、「フォント名はいくつある」の続きです。

TTEditで調べてみたところ、
Windows(Vista)の新しい日本語フォント、「メイリオ」には、結局2つしか名前がありませんでした。

主要なブラウザは「フルフォントネーム(日)」であるところの「メイリオ」で指定されたfont-familyを認識します。

10pt 1.6 9pt 1.8

| トラックバック(0)

標準本文組み。

文字サイズ10pt(13.333...px) 行間1.6(21.333...px)。

文字サイズ9pt(12px) 行間1.8(21.6px)。

なんか段間狭いな……。現在調整中。