Hextomino

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

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

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;
})();