前の記事 «：Safari用JavaScriptデバッガ「Drosera」
次の記事 »：押さえておきたい15のJavaScriptスニペット

フォントサイズの変更をJavaScriptによって検地する方法

2007年04月02日

スポンサード リンク
A List Apart: Articles: Text-Resize Detection
Furthermore, you won’t want to serve bite-sized content to visitors with large resolutions just to cater to visitors with smaller resolutions?if you can avoid it.

フォントサイズの変更をJavaScriptによって検地する方法。
ブラウザの文字サイズを変更した際に、JavaScript によってそのイベントを検出するライブラリ＆サンプルが公開されていました。

これを活用することで、次のように、フォントサイズを変更した際に特定のイベントを発生させることが可能になります。



コードは次のような感じ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demonstration of the fontResizeSwitch() functionality</title>
<style type="text/css">
</style>
<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
function init() {
    var iBase = TextResizeDetector.addEventListener(onFontResize,null);
    alert("The base font size = " + iBase);
}
function onFontResize(e,args) {
    var msg = "nThe base font size in pixels: " + args[0].iBase;
    msg +="nThe current font size in pixels: " + args[0].iSize;
    msg += "nThe change in pixels from the last size:" + args[0].iDelta;
    alert(msg);
}
//id of element to check for and insert control
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
//function to call once TextResizeDetector has init'd
TextResizeDetector.USER_INIT_FUNC = init;
</script>
</head>
<body id="header">
<h1>Resize me, now!</h1>
</body>
</html>

textresizedetector.js というJavaScript ライブラリをインクルードして、init 関数で TextResizeDetector を初期化しています。
onFontResize という関数の中身を書き換えることで、フォントサイズが変更された際の JavaScript のアクションを書くことが出来ます。
変更されたフォントのサイズもピクセル単位で取れます。

この方法によって、様々なフォントサイズにあわせたＵＩを作るなど、サイトのユーザビリティ向上に役立ちそうですね。

スポンサード リンク

投稿者 KJ : 2007年04月02日 07:07 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。