Little m's: 字号调整新方案-----GEB之大成:)

因为在Ubuntu的Firefox里面设置了一个Minimum Font-Size，所以如果这里的字号设置在Ubuntu下面正好的话，在windows下就有点偏小了。加上是14'的高分，字就更晓得小了:(

没办法，只好折腾调整字体的东西，网上文章不少，找到的第一篇是这个

Kaie's Blog: [Javascript] Selectable Post Font Size for your best view!

其实刚开始的时候没有仔细看这个文章，尝试直接从他页面的源代码里面复制。这样的好处是可以把其中的图标一起偷过来----大部分blogger教材只是提供实现的原理和代码，还需要自己去找图标等素材，我这个人比较懒...所以偶尔会不厚道一下。

总是啦，刚开始折腾了很长时间一直不work...郁闷良久。后来找到文章看了一下，原来是要把
<data:post.body/>
替换成
<data:post.body/>

恩，这是尝试的第一种方式，这个hack只修改文章里面的字体（准确的说，应该是只修改文章正文的字体）。至于其中利弊嘛:好处是影响区域相对较小，不会破坏页面美观；缺点是其他部分的字号不变，所以正文的字号也不宜变化幅度较大。

第二个方案是来自Dream Dynasty

Have to say, this is a more powerful technique (perhapse it should better be called a trick). However it's more problematic and maybe that's why even Dream Dynasty didn't use it. Anyway, I will show it here:

Step 1:
把这句话加到head里面.

<script src='http://bryant0315.googlepages.com/textsizer.js' type='text/javascript'/>

或者，你可以把textsizer.js里面的内容直接放进来----对于GFW后面的人来说，需要从两个地方load文件就意味着双倍的危险:(

Step 2:
在你喜欢的地方（文章的结尾，或者是一个单独的html模块）加入
<a href="javascript:ts('body',1)">+ Larger Font</a> <a href="javascript:ts('body',-1)">+ Smaller Font</a>

很不幸的，折腾这个方法我又失败了n多次。仔细看了Dream Dynast测试站里面的代码，没有发现任何问题，但是死活就是挑不通，后来尝试给textsizer.js里面的ts函数改了个名...然后一切ok了...有点无语。仔细查找，发现是在以前用的Label Cloud的代码里面，定义了一个叫做ts的变量。偏巧当时down的这个Label Cloud代码还相当的诡异，字段不是统一的放在head里面，而是偷偷的藏在widget段里面的，所以一直没有发现。

两个教训：1.网上抄来的代码要仔细看看，有没有作什么非常规的事情，如果可能最好改过来；2.长远的考虑，变量名还是别太抽象派了。

这後一个方法嘛，是通过修改body的基础字号来修改整个页面的字号，那么他的优缺点跟前一个方法是相对应的。不过除此以外，还有一个特别注意的地方:
这个方法只能改变那些以相对方式就是用(??%)方式定义的字号，对绝对方式(??px)方式定义的字号无能为力

因此，如果你在类似code，title这类的地方定义了字号，那么最好保证全部是用相对方式定义的。两个最直接的结果就是：
1.第二种方法不能改变Label Cloud中的字号（至少对于我down的这个代码是如此）
2.第二种方法和第一种方法没有办法同时工作。实际上，结果会相当之搞笑：刚load好页面的时候，第二种方法是正常工作的，但是一旦你使用过第一种方法，以后第二种方法就对所有的文章正文无效了。

我当然不能容忍在自己的网页上看到这样的“笑果”,于是~~~下面是我的最终解决办法，至于效果嘛，自己动手试试就知道了，sidebar里面的按钮是第二种方式，文章下面的“大，中，小”是第一种方式。

Step1:

还是一样，把
<data:post.body/>
替换成
<data:post.body/>

step2:

加入如下两个函数（用于第一个方法,注意其中的字号已经全部改成相对定义了）

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
 att = elem[i].getAttribute("name");
 if(att == name) {
    arr[iarr] = elem[i];
    iarr++;
 }
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
  zooms[i].style.fontSize = size + '%';//size+'px';
}
}
</script>

Step3:

在你希望的地方加入按钮----因为这三个按钮只控制文章中的字体，所以我把这个按钮放在文章结尾了


<a href='javascript:doZoom(120)'>大</a>
<a href='javascript:doZoom(100)'>中</a>
<a href='javascript:doZoom(80)'>小</a>

上面的数字可以随意设定，当然，如果你愿意也可以定义更多的按键。不过由于前面提过的原因，这种模式不宜变化范围太大，否则可能出现文章正文字号比标题字号还大的情况.

Step4:

head中加入如下代码


<script type='text/javascript'>

//------------------------------------------------------------
// Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
// Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
// Web Site: http://txkang.com
// Script featured on Dynamic Drive (http://www.dynamicdrive.com)
// 
// Please retain this copyright notice in the script.
// License is granted to user to reuse this code on 
// their own website if, and only if, 
// this entire copyright notice is included.
//--------------------------------------------------------------*/
// Modified by modeman ;08/27/2007;
//--------------------------------------------------------------
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function textresize( inc ) {

 if (!document.getElementById) return

        var trgt="body";
 var d = document,cEl = null,sz = startSz,i,j,cTags; 
        if (inc == 0){
           startSz=2;
           sz=2;
        }
        else {
    sz += inc;
    if ( sz < 0 ) sz = 0;
    if ( sz > 6 ) sz = 6;
    startSz = sz;  
        }
 if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

 cEl.style.fontSize = szs[ sz ];
 //for ( i = 0 ; i < tgs.length ; i++ ) {
 // cTags = cEl.getElementsByTagName( tgs[ i ] );
 // for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
 //}
}
</script>

针对我们的需要，这个里面做了一点小小的修改，另外startSz表示你最初的字号，也就是body的font-size的初值，blogger的模板中初值为small,所以这里设为startSz=2,如果你使用了不同的值，请修改。
这个函数的用法很简单inc=1/-1分别表示基础字号增大/缩小一号。inc=0则是对其作复位。

Step5:

加入第二种方法的按钮，由于这个是对全局生效的，所以我放在sidebar一个单独的html模块里面了


<a href="javascript:textresize(1)">增大</a>
<a href="javascript:textresize(0)">复位</a>
<a href="javascript:textresize(-1)">减小</a>

Step6:

最后是修改Tabel Cloud的代码，使得它里面使用的字号也能顺应潮流
估计大家的标签云的代码不尽相同，不过在标签云的相应代码里面，应该能找到一个类似这样的段落


   var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
   li = document.createElement('li');
   li.style.fontSize = fs+'px';

把其中的"px"改成"%"即可。当然，由于单位变了，你需要重新设定minFontSize和MaxFontSize.

类似的，你下载的其他模块里面，可能还有这样的实用绝对方式定义字号的段落，如果你希望他们也被纳入第二种方法的控制中，搜索"px"然后作相应的修改即可。

p.s:《GEB之大成》其实是一本AI名著的中文译名----应该说“半”中文译名。他的完整译名是“集异璧之大成”，希望用这个作标题不会显得过于突兀，或者过于嚣张:)

2007年8月27日星期一

字号调整新方案-----GEB之大成:)