문서 내 전체 폰트 변경 스크립트를 만들어봤다.
prototype.js 기반이고, body 태그를 제외한 하위 태그는 고정 사이즈가 아닌 비율로 된 폰트 사이즈를 사용해야한다.
즉, font-size:9pt, 12px, .. 등은 사용하지 않아야하며,
font-size:1.0em, medium, large, 125% 등을 사용해야한다.
나는 em 을 주로 사용한다.
참고로 12px(9pt)의 기본 em 사이즈는 0.75em 이다.
사용법.
<body>
<span onclick="FontResizer.increase();">Size Up!</span>
<span onclick="FontResizer.decrease();">Size Down!</span>
</body>
/**
* Document Font Resizer
* resize document fonts by font-size of body tag
* @author Pyun Hyun-Jang (
*/
var FontResizer = {
ratio:0.25, // increase,descrease ratio
_list:null,
_index:0,
_init:function(s, h) {
FontResizer._list = new Array();
FontResizer._list[0] = h;
FontResizer._index = 0;
FontResizer._list[FontResizer._index] = s;
},
_findRoot:function(){
return $$('body')[0];
},
/**
* increase font size
*/
increase:function() {
var s = FontResizer._findRoot().getStyle('font-size');
var h = s.substr(0, s.indexOf("px"));
var resize = Math.round(h * (1 + FontResizer.ratio));
resize += "px";
if(FontResizer._list == null) {
FontResizer._init(s, h);
}else {
if(FontResizer._list[FontResizer._index + 1]) {
resize = FontResizer._list[FontResizer._index +1];
}else {
FontResizer._list[FontResizer._index] = s;
}
}
FontResizer._index ++;
FontResizer._findRoot().setStyle({'fontSize':resize});
},
/**
* decrease font size
*/
decrease:function() {
var s = FontResizer._findRoot().getStyle('font-size');
var h = s.substr(0, s.indexOf("px"));
var resize = Math.round(h * (1 - FontResizer.ratio));
resize += "px";
if(FontResizer._list == null) {
FontResizer._init(s, h);
}else {
if(FontResizer._list[FontResizer._index- 1]) {
resize = FontResizer._list[FontResizer._index -1];
}else {
FontResizer._list[FontResizer._index] = s;
}
}
FontResizer._index--;
FontResizer._findRoot().setStyle({'fontSize':resize});
}
}