郭德纲唱大约在冬季:网页文字的处理技巧

网页文字的处理技巧1
众所周知，网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样，我们将网页看作一张报纸、一本杂志来进行文字的排版处理，针对不同的需要，有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时，我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力；做一个新闻页面，可能会用到段落首字下沉等效果，用以强调某条新闻。
在一张报纸上、一本杂志上要实现这些效果并不难，但是我们如何在网页上实现这样的效果呢？下面就向大家介绍几种文字排版处理的技巧。
1、段落首行自动缩进
每个段落的首行要缩进两个汉字大小是众人皆知的常识，我们通常在每个段落首行加上多个“ ”标签来实现缩进，这样虽然能够达到目的，但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。
＜style type="text/css"＞
p{text-indent: 2em}
＜/style＞
通过上面的样式，页面中每段包含在标签＜p＞和＜/p＞之间的段落都会自动缩进两个汉字字符大小。
2、段落首字下沉
我们阅读传统媒体时，经常看到如图1的效果，通过使用样式，我们也可以很轻松地实现类似效果。

图1 很常见的段落首字下沉效果
＜style＞
#chr:first-letter{font-size: 24pt;left: 0px; float: left; }
＜/style＞
上面这段代码定义了一个首字大小为24pt的缩进，使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了，例如下面的段落：
＜p
3、文字竖排效果
如下面的一段诗文，在网页上显示时文字呈竖直排布，非常适合诗词的文字编排。
长恨歌(片段)
白居易
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。
春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。
云鬓花颜金步摇，芙蓉帐暖度春宵。
春宵苦短日高起，从此君王不早朝。
承欢侍宴无闲暇，春从春游夜专夜。
后宫佳丽三千人，三千宠爱在一身。
金屋妆成娇侍夜，玉楼宴罢醉和春。
姊妹弟兄皆列土，可怜光彩生门户。
遂令天下父母心，不重生男重生女。
骊宫高处入青云，仙乐风飘处处闻。
缓歌谩舞凝丝竹，尽日君王看不足。
 
代码:
＜div style="line-height: 18px; text-align: center; writing-mode: tb-rl"＞
＜pre＞
长恨歌(片段)＜br＞白居易＜br＞
汉皇重色思倾国，御宇多年求不得。＜br＞
杨家有女初长成，养在深闺人未识。＜br＞
天生丽质难自弃，一朝选在君王侧。＜br＞
……
＜/pre＞＜/div＞
标签中的样式规定了文字的竖直排布，并且每行的间距为18像素，文字为中间对齐。网页读取时都会自动将空格去除后才显示，在诗文内容开始和结束部分分别加上标签＜per＞和＜/per＞，可以使诗文内容按照自己的意愿精确显示，其效果如图2。
4、文字从右读起
古文的文字编排也通常用到从右读起的效果，下面的代码就可以实现这个效果：
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。
春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。
 
代码:
＜div style="width:240px;direction: rtl; unicode-bidi: bidi-override"＞
汉皇重色思倾国，御宇多年求不得。＜br＞
杨家有女初长成，养在深闺人未识。＜br＞
天生丽质难自弃，一朝选在君王侧。＜br＞
……
＜/div＞
＜div＞标签中的样式规定了一块240像素宽的区域，其中的文字从右边开始。样式中宽度的设置非常重要，必须设置刚好的宽度来容纳内容，否则诗文的显示效果可能就不是一行一段了。
5、文字强制对齐
我们来比较一下两段文字编排方式，第一段是使用了文字强制对齐的效果，第二段只是普通的编排。第一段的文字首尾很整齐，而第二段的文字行落则参差不齐，有长有段。显然，第一段的效果更加美观，特别是对于英文的段落。通过如下的代码，我们就可以轻松实现文字的强制对齐：
install and use one copy of the Product on a single computer. You may also make and use a second copy of the Product on a home or portable computer provided that copy is never loaded in the RAM of the home or portable computer at the same time it is loaded in the RAM of the primary computer.
 
一、使用文字强制对齐的效果
install and use one copy of the Product on a single computer. You may also make and use a second copy of the Product on a home or portable computer provided that copy is never loaded in the RAM of the home or portable computer at the same time it is loaded in the RAM of the primary computer.
 
二、普通的编排显得参差不齐
代码:
＜div style="font-size:12px;width:300;text-align:justify"＞
install and use one copy of the Product on a single computer ……
＜/div＞
标签中的样式规定了一个300像素宽的区域，“text-align:justify”规定了其中的文字行落强制对齐。
通过以上的一些技巧，我们就可以很灵活的根据需要进行网页文字的编排！