2009年07月12日

文字サイズを拡大縮小するスクリプト

ネットで調べ物してるとき、フォントサイズが小さすぎて文字がつぶれて読めない!なんて経験ないでしょうか。「親鸞」とか「憂鬱」とか「麒麟」とか「薔薇」とか。読めるには読めますが、書き写そうとした場合は細かい部分がわからない、と。

そこでフォントサイズを部分的に拡大するスクリプトを書いてみました。

fontzoom.user.js(サーバーの都合で現在リンク切れ中です・・・。)

Firefox3.5で動作確認。

マウスの左ボタンを押したままホイールを動かすとフォントサイズが変化します。上にスクロールすると拡大。したにスクロールすると縮小です。

使うとこんな感じになったりします。

ソースコードはつづきから。

特定のタグに対してDOMMouseScrollイベントを設定しています。現在のフォントサイズを取得して10%拡大or縮小しているだけ。

/**
 * @name	fontzoom
 * @namespace	http://hextomino.net/
 * @description	scrill to top or bottom of the page when double click.
 * @author	Handle
 * @include	http://*
 * @include	https://*
 */

(function() {
	var targetElem = null;	// 最後にマウスオーバーされたエレメント
	
	//
	// 左ボタンの状態
	//
	var leftClick;
	document.addEventListener('mousedown', function(evt) {
		if(evt.button == 0) {
			leftClick = true;
		}
	}, false);
	document.addEventListener('mouseup', function(evt) {
		if(evt.button == 0) {
			leftClick = false;
		}
	}, false);
	
	//
	// ホイール
	//
	document.addEventListener('DOMMouseScroll', function(evt) {
		if(leftClick) {
			// スクロール抑制
			if (evt.preventDefault) {
				evt.preventDefault();
			}
			evt.returnValue = false;
			
			zoom(targetElem, evt.detail);
		}
		
		return false;
	}, false);

	
	//
	// マウスオーバーチェック
	//
	setEvent(document.getElementsByTagName('p'));
	setEvent(document.getElementsByTagName('h1'));
	setEvent(document.getElementsByTagName('h2'));
	setEvent(document.getElementsByTagName('h3'));
	setEvent(document.getElementsByTagName('h4'));
	setEvent(document.getElementsByTagName('li'));
	function setEvent(elems) {
		for(var i = 0; i < elems.length; i++) {
			var elem = elems[i];
			elem.addEventListener('mouseover', function(evt) {
 				targetElem = this;	// 最後にマウスオーバーされたエレメントをcurrentElementにセット
				return false;
			}, false);
			
			elem.addEventListener('mouseout', function(evt) {
 				targetElem = null;
				return false;
			}, false);
		}
	}
	
	//
	// ズーム
	//
	function zoom(elem, direction) {
		if(elem == null) return false;
		
		var value;	// フォントサイズ
		var unit;	// フォントサイズの単位
		
		// 現在のフォントサイズをチェック
		if(elem.style.fontSize == '') {
			value = 100;
			unit = '%';
		}
		else {
			var match = elem.style.fontSize.match(/([0-9.]*)(.*)/);
			value = match[1] - 0;
			unit  = match[2];
		}
		
		// 縮小 or 拡大
		value = direction > 0 ? value * 0.9 : value * 1.1;
		elem.style.fontSize = value + unit;
		elem.style.lineHeight = '120%';
		
		return false;
	}
	
	return false;
})();


タグ :Userscript

同じカテゴリー(プログラミング)の記事画像
GoogleReaderを3ペイン表示にするスクリプトのα版
電卓を表示するブックマークレット
Twitterで費やした時間を表示するスクリプト
ニコニコのタグをプレビューするスクリプト
ニコニコで広告を消すスクリプト
ニコニコで常に投稿日時を表示するスクリプト
同じカテゴリー(プログラミング)の記事
 GoogleReaderを3ペイン表示にするスクリプトのα版 (2009-07-26 22:00)
 クリック動作を無効にするジョークブックマークレット (2009-07-19 23:52)
 ダブルクリックでスクロールするスクリプト (2009-07-05 14:22)
 電卓を表示するブックマークレット (2009-06-27 21:40)
 ごくごく一部の顔文字を絵文字に置き換えるスクリプト (2009-05-21 23:06)
 EclipseでC++ & OpenCV環境をつくる。 (2009-05-02 23:36)
Posted by Handle at 18:09│Comments(0)プログラミング
コメントフォーム
上の画像に書かれている文字を入力して下さい
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。