«前の日記(2013-11-20) 最新 次の日記(2016-01-07)»

cheep, cheep, cheep...


2015-07-13

_ (9月18日 更新) 元の文字サイズの比率を保ったまま,文字サイズを拡大縮小する bookmarklet

今時のブラウザでは,ズームイン・ズームアウト時にページ全体が拡大・縮小されるのがデフォルトになっている. これは大抵の場合において便利だが,レイアウトと画面幅の都合で「文字だけ大きくしたい」という場合もある.

Firefoxには「文字サイズのみ変更」というオプションがあり,ページ幅や画像サイズを固定した,(昔ながらの)文字のみの拡大縮小も可能だ.しかし,このオプションはグローバルで,タブやページだけに限定できない.(同時に開いている他のページが全て,文字サイズのみの拡大縮小になってしまう)

「そんなときは bookmarklet だろう」と検索してみたものの,意外にも痒いところに手が届くものが見つけられない.私の要望は,「拡大縮小の際に,ページ内での文字サイズの比率を保っていて欲しい」(ブラウザの標準機能と同じ振舞い) というもの.しかし,見つかったのは,ページ内の文字を一律で一定サイズにするものや,cssでfont-sizeが明示的に指定されている要素は比例して拡大縮小されるが,明示的に指定されていない要素(継承している要素)の文字のサイズは一旦リセットされてしまうものだった.

少し調べてみると,getComputedStyle という関数で「その要素に現時点で設定されているスタイル」を得ることができるとの事. (参考) これを利用して後者のbookmarkletを改善すれば,全ての要素を比例して拡大縮小できそうだ.

というわけで,下の bookmarklet を作ってみた.

動作確認は, Firefox 39 と Chromium 43 で行なった.

追伸: 「もっと良い方法があるから,こんなゴミは消せ」という情報をお待ちしてます.

更新履歴

2015-08-04
parseIntで小数点以下を捨てていたのを,parseFloatに変更した. 古い版にあった下の2つの問題が解決した.
  1. 何度拡大を実行しても 3px 以下のフォントは大きくならない
  2. 拡大と縮小を交互に繰り返すと,要素毎のフォントサイズの比率が狂う
2015-09-17
高速化.css の font-size プロパティが設定されていない要素や,相対指定されている要素にはサイズ設定を行なわないことで,要素数の多いページでも短時間で処理が完了するようになった.
2015-09-18
昨日の高速化に欠陥がある(style属性以外でフォントサイズが指定されていると拡大縮小の対象から外れてしまう)ことが分かったので,差し戻し.早いが欠陥のあるバージョンは,下に残しておく.