垂直栅格与渐进式行距(下)
作者：宗羲 来源：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
投稿猜你喜欢
今天做官网，把unslider做成指令，但是一直提示$(el).unslider() no a function，一开始我想复杂了，后来在网- 最近在看python脚本语言，脚本语言是一种解释性的语言，不需要编译，可以直接用，由解释器来负责解释。python语言很强大，而且写起来很简
- 本文实例讲述了python在windows下创建隐藏窗口子进程的方法。分享给大家供大家参考。具体实现方法如下：import subproce
- 例子：#!/bin/perlprint "Please input an string and a number by order
- Jira提供了完善的RESTful API，如果不想直接请求API接口可以使用Python的Jira库来操作JiraJira Python文
- 默认登录mysql之后可以通过SHOW VARIABLES语句查看系统变量及其值。mysql> show variables like
- 今天有这样得一个需求，如果登陆人是客服的话，会查询订单是'该客服'以及还没有匹配客服的，刚开始想的是直接在sql语句上拼写&
- 前言最近在学习点云处理的时候用到了Modelnet40数据集，该数据集总共有40个类别，每个样本的点云数据存放在一个TXT文件中，每行的前3
- 沟通的时候，一般我不主动说自己是做用户体验设计，也不说做以用户为中心的设计，包括UED, UCD。这种专业名词传达的太虚，你也许是名用户体验
- 最近因为要写一个项目的接口，需要远程的连接oracle数据库，刚开始的时候因为我本地只装了MySQL，所以用就连接了本地MySQL，接口大体
- 引文之前有一篇文章给大家带来了SQL注入的基本知识点以及分类，包含的面比较广但是不深入，于是我准备详细讲讲每一种类型的SQL注入的详细利用方
- identity-card验证身份证号码的正确性,不能仅仅通过正则表达式来验证，我们都知道我国的身份证一共是18位，由十七位数字本体码和一位
- 与数据类型相关的字段CharField 作用:字符串字段
- super主要来调用父类方法来显示调用父类，在子类中，一般会定义与父类相同的属性（数据属性，方法），从而来实现子类特有的行为。也就是说，子类
- 本文介绍了Python 堆叠柱状图绘制方法，分享给大家，具体如下：'''''''&#
- 需求：看到朋友圈有人发词云照片，感觉自己也可以玩一玩，于是乎借助wordcloud实现功能。环境：MacOS 10.12 +Python 2
- 如何获取一个页面内所有URL链接？在Python中可以使用urllib对网页进行爬取，然后利用Beautiful Soup对爬取的页面进行解
- 1.索引是什么1.1 认识索引先创建一个简单的DataFrame。myList = [['a', 10, 1.1], &nb
- 本文为大家分享了mysql 8.0.19 winx64安装教程，供大家参考，具体内容如下1. 下载mysql-8.0.19-winx641.
- 一、前言嗨，大家好，我是新发。最近需要做个小工具，可以通过python来读写Excel，实现增删改查操作。以前用的是xlrd和xlwt这两个
