标签中的样式规定了文字的竖直排布,并且每行的间距为18像素,文字为中间对齐。网页读取时都会自动将空格去除后才显示,在诗文内容开始和结束部分分别加上标签<per>和</per>,可以使诗文内容按照自己的意愿精确显示,其效果如图2。
图2 文字竖排效果 4、文字从右读起
古文的文字编排也通常用到从右读起的效果,下面的代码就可以实现这个效果(如图3):
图3 文字从右读起 <div style="width:260px;direction: rtl; unicode-bidi: bidi-override">
长恨歌(片段) <br>
白居易<br>
汉皇重色思倾国,御宇多年求不得。
杨家有女初长成,养在深闺人未识。
天生丽质难自弃,一朝选在君王侧。
……
</div>
<div>标签中的样式规定了一块260像素宽的区域,其中的文字从右边开始。样式中宽度的设置非常重要,必须设置刚好的宽度来容纳内容,否则诗文的显示效果可能就不是一行一段了。
5、文字强制对齐
我们来比较一下图4和图5两种文字编排方式,图4是使用了文字强制对齐的效果,图5只是普通的编排。图4的文字首尾很整齐,而图5的文字行落则参差不齐,有长有段。显然,图4的效果更加美观,特别是对于英文的段落。通过如下的代码,我们就可以轻松实现文字的强制对齐:
图4 使用文字强制对齐的效果图5 普通的编排显得参差不齐 <div style="font-size:12px;width:300;text-align:justify">
The United States is an industrial country ……
</div>
代码
标签中的样式规定了一个300像素宽的区域,“text-align:justify”规定了其中的文字行落强制对齐。
通过以上的一些技巧,我们就可以很灵活的根据需要进行网页文字的编排!
首页 上页 | 1 | 2 | 下页 尾页 共 2 页