この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

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

2006年12月4日

x-heightが何pxかを調べる方法
初回投稿日時: 2006年12月04日13時49分57秒
最終更新日時: 2006年12月04日14時11分39秒
カテゴリ: CSS Javascript
SNS: (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への変換が必要だが、簡単なので省略)

一応、font-size以外のプロパティを使えば一つの要素で処理可能と思います。

関連するかもしれないエントリ

関連するかもしれないエントリを発見できませんでしたが、無いとは限りません。

このエントリへのリンク元