作家
登录

垂直栅格和渐进式行距应用举例

作者: 来源:www.28hudong.com 2012-11-19 14:25:14 阅读 我要评论

新问题 来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了两个多月了。反过来,看看上次的成果。诶?怎么感觉边注有点奇怪呢? (demo-6.html) 还是参考我的这篇 关于排版的文章 :我们知道 中文互联网上最常用的行距是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。那么情况就会像这样: (demo-9.html) 不知道各位看官发现了没有,为什么第一行基线没对齐呢?这是因为流布局会将文字块按照行高做顶端对齐。如下图: 所以,在这里,为了使首行基线对齐,我们还要将边注下降一定的像素。可恨的是,需要下降的像素是多少——这个很复杂的问题,至少经过不才好几次的尝试都没有看出个规律来,而只得出以下三个结论: 设正文行高是h px,边注行高是h’ px,需要下降的值为d px,那么,这个值将介于 1/2(h-h’) < d < (h-h’) . ① 如果该行引入了西文字符(半角数字或者字母),该行的基线有时会比没有西文字符偏移一个像素。 不同的字体渲染引擎可能行为不一致。 上一页12 3 下一页

  推荐阅读

  引入外部文件(js/vbs/css)时,避免产生乱码的方法

在页面中,引入外部文件,如 js,css等, 如果外部文件和当前页文件的编码不一致,容易产生乱码,引发错误。 在引入外部文件时, 指定一下目标文件的编码, 有助于避免这个问题。 复制代码代码如下:<script type=>>>详细阅读


本文标题:垂直栅格和渐进式行距应用举例

地址:http://www.17bianji.com/kaifa/yejie/16225.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)