垂直栅格与渐进式行距(下)
作者：宗羲 来源：Taobao UED 发布时间：2009-07-09 16:52:00
阅读上一篇：垂直栅格与渐进式行距(上)
新问题
来也匆匆，去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布，已经不知不觉过去了两个多月了。反过来，看看上次的成果。诶？怎么感觉边注有点奇怪呢？
还是参考我的这篇关于排版的文章：我们知道
中文互联网上最常用的行距是1.5左右
行长越长,需要的越大的行距. (行距太小,读者阅读换行时容易串行. 行距太大,读者阅读行时会感觉到文字不连续.)
看 来，对于边注的12px字体大小的，24px的行高显然过大了。但是，根据上一篇文章的方法，垂直韵律需要边注的行距和正文的行距应当一致。那么为了保持 垂直韵律，我们只能同时减少左右两边的行距——总结：不靠谱。那么，我们该如何调整边注行距，却又能够让我们建立的垂直韵律生效呢？这就需要我们引入渐进式行距。
渐进式行距
总得说来，渐进式行距是对死板的垂直韵律的一个补充。垂直韵律是要求边注和正文的每一行都对 齐。相比之下，渐进式行距让边注和正文也对齐——但不是每一行——而是每几行对齐一次。一般是每4行或者每5行对齐一次。我们回顾一下上一篇文章，知道， 本文开始的那张例子，“配置”如下：
正文：字体大小14px，行距24px，段后距24px
h1：字体大小24px，行距24px，段前距24px，段后距24px
h2：字体大小：18px，行距24px，段前距12px，段后距12px
边注正文：字体大小12px，行距24px，段后距24px
边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px
我们修改边注的行距和段后距都为18px。那么情况就会像这样：
不知道各位看官发现了没有，为什么第一行基线没对齐呢？这是因为流布局会将文字块按照行高做顶端对齐。如下图：
所以，在这里，为了使首行基线对齐，我们还要将边注下降一定的像素。可恨的是，需要下降的像素是多少——这个很复杂的问题，至少经过不才好几次的尝试都没有看出个规律来，而只得出以下三个结论：
设正文行高是h px，边注行高是h’ px，需要下降的值为d px，那么，这个值将介于 1/2(h-h’) < d < (h-h’) . ①
如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
不同的字体渲染引擎可能行为不一致。
这 个结论并不能有成型的公式来确定需要下降的具体像素值。那么，我们就根据结论①一个一个像素试验吧(3 < d < 6)，反正不会太多。在本例中经试验可得，下降4px是能够让首行对齐的。对齐后，各位可以看到正文每隔4行，边注每隔5行，他们的基线会对齐一次。
很有趣，是吧？
0
投稿猜你喜欢
- 下面我们以论坛排行榜举例说明：<％ @ LANGUAGE="VBSCRIPT" ％&
- 现在基于WEB页的HTML的编辑器在新闻系统，文章系统中用得越来越广，一个网页一粘就可以保持原来的样式，同时图片也可以在这个页中保持。但是在
- 前边看到有人发了个层打开效果，总感觉不是很理想 个人认为:-)，如果那个层放到固定的容器里面估计就会出现问题的。今天自己来写个，可以支持 在
- 仿豆瓣分页原型(Javascript版)写了个分页的样式。自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的Javascript分页代码
数据库复制：简单来说，数据库复制就是由两台服务器，主服务器和备份服务器，主服务器修改后，备份服务器自动修改。复制的模式有两种：推送模式和请求- 在ASP.net页面中，我们编写JavaScript脚本附加有注释时，这些注释也往往会随JavaScript脚本一起送到客户端。
- 规律：半角空格的 charCode 为 32, 全角空格为 12288. 其他半角字符 ( 33 – 126 ) 与全角 ( 65281 –
- 不久之前，笔者一个在企业中从事网管工作的朋友向我求助关于SQL Server服务器内存升级后遇到的问题。原来，他们企业准备上一个企业邮箱系统
- 从最基础的说起。本教程中，所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。1. 不用编程的部分1.1
- Installing mysql (2.8.1) with native extensions /usr/local/lib/ruby/si
- 如何远程读取数据库页面？见下：<％Set HttpObj = Server.CreateObject(&
- 一个ASPJPEG组件综合操作的asp类CLASS相关文章：ASP怎么谈到应用到类的？ASP中类的详细介绍（class Property G
- 在ASP.NET2.0通过SMTP的验证发送EMAIL ，代码如下：’Create a new MailMes
- 今天在写BLOG的Trackback时，需要用到当前页的URL地址，并且包括?后的所有参数。在网上看到以下的这段ASP代码，它的
- 代码如下: var lishustr = "qwertyuiopasdfghjklmnbvcxz"; var s = l
- 高层的期望“3个月内，我希望网站能增加X注册用户，每日的独立IP到Y，网站盈利达到Z……”作为一个团队的领袖或者产品负责人，这样的期望是根据
- 用phpMyAdmin时在导入和导出MySQL5数据时，有一个SQL compatibility mode选项，其可选值为NONE、ANSI
- “占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面——在需要
- 过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式，涌现了很多与之相关的技术与理论资料，其中相当重要的一个领域就是关于印刷中字号和行高的
- 【尝尝管理员的滋味】- 淡然看,其实一切都很简单IE的滤镜泄露是最大的危害,没有找到方法解决,所以禁用了滤镜。<!DOCTYPE ht
