実装

[5] md : Web Design : 実際のところ、どうするのがいいのよ、フォントサイズ! <http://homepage.mac.com/mikihiro/md/web/font.html>

アクセス可能性・利用可能性・安全性

[2] 日本語文字の読みやすさ: 日本語文字の読みやすさの計測基準を定めた JIS S 0032 という規格があります。この規格は CSS の主要な応用である電子ディスプレイを適用範囲外としていますが、それでも一応の参考とはなるでしょう。 (一般的に言って、 (解像度等を考慮すると) ディスプレイに表示する文字の大きさは紙に印刷する文字よりも大きくするべきです。)

[3] 重要な文章の文字の大きさを通常の大きさと極度に変えるのは避けるべきです。約款が細かい字で印刷されるのはよくあることですが(藁)、当時者双方が平等な立場で契約するつもりがあるのなら、読者の十分な理解を促すようなデザインを心がけるべきです。また、読者は重要な注意書きが悪意のある著者によって小さな (時には判読できないような) 文字で書かれていないか常に注意する必要があります。利用者エージェントは安全のためにも最低の大きさを利用者が指定できる機能や、対話的な利用者エージェントであれば利用者が指定した範囲を拡大したり、文字列として複写・保存等をしたりできるようにするべきです。

[7] 第10回文字のサイズとブラウザの違い〜「はてなダイアリー」で起こった問題点:ITpro (2007-02-14 18:59:17 +09:00 版) <http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/> (名無しさん 2007-02-14 10:07:35 +00:00)

[8] 第10回文字のサイズとブラウザの違い〜「はてなダイアリー」で起こった問題点:ITpro (2007-02-14 19:05:40 +09:00 版) <http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/?ST=swd-design&P=2> (名無しさん 2007-02-14 10:08:14 +00:00)

テスト

[30] Firefox 2 は >>16、>>18-22、>>24、>>26-27 を有効な宣言として解釈するようです。負の零は正規化されます。小数部の0は最小限に正規化されます。

(名無しさん)

[31] <http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%20-.0px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element> (名無しさん)

[32] >>31 Firefox 2 と Opera 9 は -.0px 0 と解釈しますが、 WinIE 6 は無視します (-. に対応していないようです)。 (名無しさん)

[33] WinIE 6 は >>16、>>18-19、 >>22、>>24-29 を解釈しますが、それ以外は無視します。

. が最初や最後に来る数に対応していないようです。

小数部は (零に近い方向に) 切り捨てられるようです。 -0.9px は Firefox 2 や Opera 9 では無視されますが、 WinIE 6 では 0 とみなされます。

escape や注釈はどこでも使えるようです。 3/**/0px や 30p/**/x] なんてのまで無視されません。 (名無しさん)

[34] >>33 負の零は符号なしに正規化されます。 (名無しさん)

[35] Opera 9 は >>16、>>18-22、>>24-25、>>31 を解釈しますが、それ以外は無視します。

負の零の符号は正規化で除去されません。

整数で表せない場合、常に小数部2桁になるよう切り捨て・正規化されます。

WinIE 6 とは異なり、-0.002px は -0 とは解釈されず、無視されます。

負符号と数の間に注釈を挿入できます。

CSS 2.1 的に正しいですが、Firefox も WinIE も対応していません。

単位部の escape には対応していません。

(名無しさん)

[36] Firefox 2 では値は有効数字6桁に正規化されます。7桁目で四捨五入されるようです。冗長な0は (先頭・最後とも) 捨てられます。絶対値が大きな数や小さな数は指数表示 (科学的記法) になってしまいます (逆にそれを構文解析することはできません)。

(名無しさん)

[37] >>36 あまりにも大きいと Infinitypx になってしまいます。 (名無しさん)

[38] Opera 9 は大きな数を与えても整数として出力されますが、 (おそらく浮動小数点数を使っているせいで) 不正確な数として出てきます。 990000007341205185086489624576px が最大のようです。 (名無しさん)

[39] WinIE 6 では 134217727px (符号付き28ビット整数の最大値) が最大のようです。 (名無しさん)

[40] font-size: 2cm <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-size%3A%202cm%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20w%20(getComputedStyle%20(this%2C%20null).fontSize)%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20computed%20(%3F)%20value%20of%20the%20'%3Ccode%3Efont-size%3C%2Fcode%3E'%20property.%0A;p=n;x=style-element>

(名無しさん)

[41] >>40 Firefox 2, Opera 9 とも、 getCurrentStyle の値は px 単位に換算されるようです。 Firefox では換算後の値も有効数字7桁目で四捨五入されているようです。 Opera は換算後の値を整数にしているようです (切り捨てか四捨五入かは未検証)。 (名無しさん)

[42] >>40 の currentStyle 版 <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-size%3A%202cm%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.fontSize)%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20computed%20(%3F)%20value%20of%20the%20'%3Ccode%3Efont-size%3C%2Fcode%3E'%20property.%0D%0A;p=n;x=style-element>

(名無しさん)

[43] >>42 Opera 9、WinIE 6 共、元の cm 単位のままの値がでてきます。 (名無しさん)

[44] >>43 WinIE 6 は CSSOM の値そのままのようですが、Opera 9 は整数になるよう切り捨てしているようです (少なくても cm と in は)。 (名無しさん)

[45] <absolute-size> のテスト用

getComputedStyle <http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0A.small%20%7B%20font-size%3A%20small%20%7D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0A.large%20%7B%20font-size%3A%20large%20%7D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20w%20(%5B%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B1%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B2%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B3%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B4%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B5%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B6%5D%2C%20null).fontSize%0A%20%20%5D.join%20('%2C%20'))%3B%0A%22%3Ew%3C%2Fbutton%3E%0A%3Cp%20class%3Dxx-large%3Exx-large%0A%3Cp%20class%3Dx-large%3Ex-large%0A%3Cp%20class%3Dlarge%3Elarge%0A%3Cp%20class%3Dmedium%3Emedium%0A%3Cp%20class%3Dsmall%3Esmall%0A%3Cp%20class%3Dx-small%3Ex-small%0A%3Cp%20class%3Dxx-small%3Exx-small%0A;p=n;x=style-element>

currentStyle <http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0D%0A.small%20%7B%20font-size%3A%20small%20%7D%0D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0D%0A.large%20%7B%20font-size%3A%20large%20%7D%0D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20w%20(%5B%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B0%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B1%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B2%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B3%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B4%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B5%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B6%5D.currentStyle.fontSize%2C%0D%0A%20%20%5D.join%20('%2C%20'))%3B%0D%0A%22%3Ew%3C%2Fbutton%3E%0D%0A%3Cp%20class%3Dxx-large%3Exx-large%0D%0A%3Cp%20class%3Dx-large%3Ex-large%0D%0A%3Cp%20class%3Dlarge%3Elarge%0D%0A%3Cp%20class%3Dmedium%3Emedium%0D%0A%3Cp%20class%3Dsmall%3Esmall%0D%0A%3Cp%20class%3Dx-small%3Ex-small%0D%0A%3Cp%20class%3Dxx-small%3Exx-small%0D%0A;p=n;x=style-element>

(名無しさん)

[46] >>45 WinIE 6 の currentStyle は <absolute-size> がそのまま出るようです。 (名無しさん)

[47] >>45 Opera 9

著者モード・無奇癖モード・(getComputedStyle/currentStyle): 43px, 32px, 24px, 22px, 18px, 14px, 11px
著者モード・奇癖モード・(getComputedStyle/currentStyle): 64px, 43px, 32px, 24px, 22px, 18px, 14px
ユーザーモード・(奇癖モード/無奇癖モード)・getComputedStyle: 21px, 21px, 21px, 21px, 21px, 21px, 21px
ユーザーモード・(奇癖モード/無奇癖モード)・currentStyle: cursive, cursive, cursive, cursive, cursive, cursive, cursive ← なんじゃこりゃ?
(著者モード/ユーザーモード)・アクセシビリティレイアウト・(奇癖モード/無奇癖モード)・(getComputedStyle/currentStyle): 18px, 18px, 18px, 18px, 18px, 18px, 18px

(名無しさん)

[48] Firefox 2 getComputedStyle (無奇癖モード/奇癖モードとも)

小さく12: 0.266667px, 0.2px, 0.133333px, 0.133333px, 0.0666667px, 0.0666667px, 0.0666667px
小さく11: 0.6px, 0.466667px, 0.333333px, 0.266667px, 0.2px, 0.133333px, 0.133333px
小さく10: 0.933333px, 0.666667px, 0.533333px, 0.466667px, 0.333333px, 0.266667px, 0.266667px
小さく9: 1.26667px, 0.933333px, 0.666667px, 0.6px, 0.466667px, 0.333333px, 0.333333px
小さく8: 2.2px, 1.66667px, 1.2px, 1.06667px, 0.866667px, 0.666667px, 0.6px
小さく7: 3.2px, 2.4px, 1.8px, 1.6px, 1.26667px, 1px, 0.866667px
小さく6: 4.8px, 3.6px, 2.66667px, 2.4px, 1.93333px, 1.46667px, 1.33333px
小さく5: 7px, 5.26667px, 3.93333px, 3.46667px, 2.8px, 2.13333px, 1.93333px
小さく4: 10.5333px, 7.86667px, 5.93333px, 5.26667px, 4.26667px, 3.26667px, 2.93333px
小さく3: 16px, 12px, 9px, 8px, 6.46667px, 5px, 4.46667px
小さく2: 24px, 18px, 13.4667px, 12px, 9.73333px, 7.46667px, 6.73333px
小さく1: 28.7333px, 21.5333px, 16.1333px, 14.3333px, 11.6667px, 8.93333px, 8.06667px
標準: 32px, 24px, 18px, 16px, 13px, 10px, 9px
大きく1: 38.4px, 28.8px, 21.6px, 19.2px, 15.6px, 12px, 10.8px
大きく2: 48px, 36px, 27px, 24px, 19.4667px, 15px, 13.4667px
大きく3: 64px, 48px, 36px, 32px, 26px, 20px, 18px

際限なく大きく/小さくできるのでしょうか?

最小フォントサイズの設定はここには反映されないようです (使用値に反映される?)。 (名無しさん)

[49] >>47-48 はフォントサイズの設定とかいろいろな要素で変わるものでしょうが、参考までに。 (名無しさん)

[50] <absolute-size> + <relative-size> テスト用

(名無しさん)

[51] >>50

Firefox 2: 32px;48px;24px, 24px;32px;18px, 18px;24px;16px, 16px;18px;13px, 13px;16px;10px, 10px;13px;9px, 9px;10px;8px

Opera 9 無奇癖モード: 43px;51px;34px, 32px;38px;25px, 24px;28px;19px, 22px;26px;17px, 18px;21px;14px, 14px;16px;11px, 11px;13px;9px

Opera 9 奇癖モード: 64px;76px;51px, 43px;51px;34px, 32px;38px;25px, 24px;28px;19px, 22px;26px;17px, 18px;21px;14px, 14px;16px;11px

Opera はおかしくないか? (名無しさん)

(名無しさん)

[54] >>52-53 Opera 9 も WinIE 6 も smaller か larger のまま返すようです。 (名無しさん)

[55] Opera 9 は小さな値 (例えば0) にしても、 getComputedStyle では使用値か何かが出てくるようです。最小フォントサイズ (9px。設定で変えられるのか、あるいは固定値なのか (CSS 2.1 には9画素以下はやめたほうがいいという記述がある)) より小さな値を指定しても、最小フォントサイズになってしまいます。

Firefox 2 でも最小フォントサイズの設定がありますが、 getComputedStyle はそれと関係ない計算上の値になります。レンダリング上は、最小フォントサイズ以下にはなりませんが、ちょうど 0 になったときは 0 でレンダリングされます (というかされません)。単位 em は font-size 算出値を参照しているはずですが、なぜか正の値になります (medium を使っている?)。