web 見てて、読みたいんだけど表示が気に食わないとき、なんとかならんもんかと思って作ってみました。ネットで見つけたコードをつぎはぎしただけなので作ったとは言わないか・・・。今のところ camino でのみテスト。Firefox をメインでは使っていないので Greasemonkey も使えないし、がっつり読みたいときだけ使うので bookmarklet で。

ようは、選択範囲のhtmlをコピーし div class=”myview” に入れ、既存の CSS を無効にし、自分の CSS ファイルを読み込み(ローカル不可)、body の中身を div class=”myview” に置き換えるだけ。選択範囲の html が不完全だったときの処理はブラウザ依存です。

戻すときの処理はなんも考えてないので、変更前のデザインに戻すにはページのリロードをしないといけないんですが。

(function() {
var s = window.getSelection();
if( !s || !s.rangeCount)
	return;

var f = 'http://localhost/myview.css';

var cr = document.createElement("div");
cr.className = 'myview';

var i,l;

for(i=0, l = s.rangeCount; i < l; ++i){
	cr.appendChild(s.getRangeAt(i).cloneContents());
}

for(i = 0, l = document.styleSheets.length; i < l; ++i){
	document.styleSheets.item(i).disabled = true;
}


var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", f);
link.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(link);

document.body.innerHTML = '';
document.body.appendChild(cr);
})()

これに加え、適当な css をローカルサーバーなどに置けば終了。

ページ見てて、うるさいデザインだったり、１行の文字数が多すぎたり少なすぎたり、字がちっこすぎたり、行間が気に入らなかったり、そういうときに使ってます。ここんとこ、ディスプレイから離れてブラウズすることが多くなり、それに伴って大きめのフォントで表示させることが多いので、そうやってデザイン崩れちゃったときにも有効かなと。

ま、一時的に読みたい部分にフォーカスして読むためだけのものです。毎回絶対っていう類のものは、proxy なり ブラウザなり、もちょっと上流でなんとかするほうがいいかと。

今思ったが、class よりも id のほうがいいかも。