もずはっく日記(2006年12月)

x-heightが何pxかを調べる方法
初回投稿日時: 2006年12月04日13時49分57秒
最終更新日時: 2006年12月04日14時11分39秒
カテゴリ: CSS Javascript
SNS: Tweet (list)

昨日IRCで聞かれたネタ。Javascriptを使えば算出は可能。

1. 不可視の要素を二つ作り、一つを親、一つを子とする。
2. 親要素のスタイルを以下のように設定する

   display: none;
   font-family: 調査したいフォント名;
   font-size: 32px; /* 大きいほど精度が高く、UAの最小フォント設定に邪魔されない */
   

3. 子要素のスタイルを以下のように設定する

   font-family: inherit; /* 不要? */
   font-size: 1ex;
   

4. 子要素をJavascriptで取得する(getElementByIdが楽ちん)
5. getComputedStyle(element, null).getPropertyValue("font-size").replace("px", "")で算出値を取得する(もし算出値がpxじゃないUAがあればpxへの変換が必要だが、簡単なので省略)