使用CSS和jQuery保持垂直节奏

内容

• 布局类型
• 垂直节奏
• 进行节奏
• 处理图像
• 改进jQuery
• 结论

• 需要的知识：CSS，基本的jQuery
• 需要：jQuery，CSS，HTML
• 项目时间： 30分钟
• 下载源文件

假设您从内容出发进行设计，那么影响设计的第一个决定就是 具有 与类型相关。即使是 不是 选择一种字体，您所做的某些事情都会影响您的网站。类型是打印和网页设计的核心，而且很复杂；有很多累积的术语，实践，规则和技术可以很好地利用它。本文涉及一种用于管理一种类型的方面的技术，这种技术很难在线完成但在印刷中很常见：保持一致的垂直节奏，这又使我们可以实现专业的版式。

布局类型

在印刷中，对于任何具有大量文本的项目，设计的基础很可能是基准网格。它用于使页面结构清晰，并指导内容的垂直流动。几乎所有内容都是相对于该基准网格放置的。如果您不认识这些术语，请不要担心，没有人不熟悉基线或基线网格。您已经了解他们。回想一下学校，当您毫无疑问地在横线纸上书写时–在您书写时，您将字母的底部整齐地放置在纸上的每一行上。运行中的基准和基准网格。基线是一条假想线，字母的底部对齐到该假想线。如果您现在看这篇文章，即使没有真正的界限，您也将“看到”基线。您的大脑会为您提供便利，这就是为什么您可以阅读句子的原因。横格纸上的线条？它们是基准网格。笔直，使句子笔直，并按固定的时间间隔设置，使文本具有规则的垂直节奏。

垂直节奏

垂直节奏决定了页面上文本的位置。它是影响我们扫描和阅读文本块的能力的一个组件，并且有助于告知我们的情绪反应。当文本具有强烈的垂直节奏和良好的间距时，我们会认为它是专业的，经过深思熟虑的，权威的且易于阅读的。当文本的节奏和间距较差时，我们会觉得它的考虑程度较低，专业程度较低，并且通常较难阅读。垂直节奏是可用性的一部分，也是美学的一部分。

进行节奏

不幸的是，就其制定有关字体的一些基本做法的能力而言，网络仍然不是印刷品的表亲。在网络上，我们不能像打印设计师（或在校儿童）那样使用基线网格–我们无法使文本的基线与文档的基线网格对齐。 CSS没有基线网格的概念。因此，我们的文字不会完全位于基线网格的直线上。相反，它将在线条之间的间隙中垂直居中。这是网络所能做的最好的事情。

让我们通过示例文档开始实践。首先，我们将通过创建一个可见的基线网格来设置节拍。为此，我们将使用重复的背景图像绘制相距22px的规则水平线：

1. html {背景：#fff url（baseline_22.png）; }

呼啦，我们有横格纸！

您会注意到没有任何排队。为了使所有内容对齐，我们希望所有元素的底边都碰到其中之一。最简单的方法是确保所有元素的垂直高度（包括边距）为22的倍数。这里有一些CSS就是这样做的。我使用的是REM单元，但为不了解REM的浏览器提供了EM后备功能。我还在评论中加入了与PX相当的产品。如果您还不了解REM / EM，则可以改用px值-它们都是等效的：

1. html {/ *字体大小：16像素，行高：22像素 * /
2. 字体：100％/ 1.375“ Helvetica Neue”，Helvetica，Arial，无衬线；
3. 背景：#fff url（baseline_22.png）; }
5. h1，h2，h3，h4，h5，h6 {/ * margin-top和bottom均为22px * /
6. / * em后备 * /保证金：1.375em 0;
7. 保证金：1.375rem 0; }
8. h1 {/ *字体大小为32px，行高为44px * /
9. / * em fallback * / font-size：2em;
10. 字体大小：2rem；行高：1.375; }
11. h2 {/ *字体大小为26像素，行高为44像素 * /
12. / * em fallback * / font-size：1.75em;
13. 字号：1.75rem;线高：1.5714285714; }
14. h3，h4，h5，h6 {/ *字体大小为22px，行高为22px * /
15. / * em fallback * / font-size：1.375em;
16. 字号：1.375rem;行高：1; }
17. p，ul，blockquote {/ *底边距为22px，行高继承自html（22px） * /
18. / * em后备 * / margin-top：0;底边距：1.375em;
19. 上边距：0底边：1.375rem; }

让我们来看看能给我们带来什么。请注意所有文本如何很好地对齐？它不位于基线上，但确实具有可预测的垂直节奏。很好，很整洁。

处理图像

图像使事情变得更加复杂。看看当我们包含一些节奏时，我们的节奏会怎样。他们像跳过唱片一样打乱它–节奏是正确的，但时机已经过去了。对齐方式发生偏移。这是因为图像的高度不太可能是基线的倍数，因此底边不会与基线网格对齐。

要解决此问题，我们真正需要做的就是在每个图像上添加一个边距，使边距的底部与网格对齐。这很简单，可以使用一些JavaScript进行自动化。这是我们的基本计划：

1. 找出每个图像的高度。
2. 查看基线值将图像当前占据的垂直空间划分多少次，然后得到剩余的余数。
3. 从基线中减去余数，得到我们需要在图像上应用的偏移量。
4. 将偏移量作为边距应用到图像的底部。

现在，图像底部的垂直空间将与基线网格正确对齐。这是jQuery中执行此操作的基本功能：

1. $（window）.bind（'load'，function（）{
2. $（“ img”）。each（function（）{
3. / *变量 * /
4. var this_img = $（this）;
5. var基线= 22；
6. var img_height = this_img.height（）;
7. / *做数学 * /
8. var剩下的= parseFloat（img_height％基线）;
9. / *我们需要添加多少？ * /
10. var offset = parseFloat（baseline-remainder）;
11. / *将边距应用于图像 * /
12. this_img.css（“ margin-bottom”，offset +“ px”）;
13. });
14. });

为什么 window.bind 线？因为我们必须等到图像加载后才能可靠地获取它们的大小。这是运行此基本代码的示例。

改进jQuery

世界很少是直截了当的，因此事实证明，这里-我们必须处理很多实现细节。我们的功能有什么问题？大量：

• 使用嵌入式图像而不是浮动图像或块状图像会产生令人讨厌的结果。
• 在某些图片上，尤其是在容器中的图片上似乎有错误。
• 它不涉及液体布局。
• 它不是很可重复使用。

我们不希望将此行为应用于内联图像，例如示例中的笑脸。内联图像对齐，因此底边与文本位于同一基线（不是 基线网格）。这意味着图像在垂直方向上偏移。 CSS和JS都没有提供一种方法来确定文本元素的基线在哪里，因此我们不知道偏移量。我们必须忽略嵌入式图像，而仅将修复程序应用于设置为 显示：块 （幸运的是，任何浮动图像都会自动设置为显示块）。

如果图像在容器中，则由于容器上的溢出设置，可能会隐藏应用于图像的边距。同样，我们可能不希望图像上有空白，而是需要在容器元素上有空白。在该示例中，我们宁愿在白框上留有页边距，也不希望在框内的图像上留有页边距，这样我们就可以避免在框内出现怪异的间隙。

该功能仅运行一次，但在液体设计上，当调整浏览器大小时，图像会更改高度（尝试将示例的大小调整为相当狭窄的大小以查看此情况）。调整大小会再次破坏节奏。我们需要该功能在调整浏览器的大小以及页面加载之后运行。液体布局还会带来其他问题。图片可以是分数像素高，例如132.34px。即使我们采用了少量的边距，这也可能导致意外的结果（如果您有兴趣，这是为什么：trac.webkit.org/wiki/LayoutUnit）。因此，我们将需要将图像调整到整个像素高度，以避免由小数像素引起的布局错误。

最后，我们应该使它成为更可重用的功能。实际上，由于实际解决方案比理论解决方案复杂，因此我们应该制作一个可以在其他项目中重复使用的插件。

在上一个示例中，您将找到实现所有这些功能的代码。插件JavaScript已被大量注释，因此您可以继续进行。您可以通过如下调用插件来使用它：

1. $（window）.bind（'load'，function（）{
2. $（“ img”）。baselineAlign（）;
3. });

或者，如果存在作为图像父级的容器，则可以告诉插件将边距应用于命名容器：

1. $（window）.bind（'load'，function（）{
2. $（“ img”）。baselineAlign（{container：’。popup’}）;
3. });

结论

保持良好的垂直节奏是印刷中经常使用的微妙而有效的设计实践。您现在已经了解了基本原理，对基线和基线网格有了一定的了解，并且知道了CSS文本布局与打印的一些限制。您还知道如何解决这些限制，使文档适合您喜欢的任何垂直节奏，并且您有一个工具来帮助处理破坏性图像内容。

随着CSS的成熟，我们将继续获得更多与印刷表亲保持一致的功能，因此，对类型的深入了解对于创建优质网站将变得越来越重要。如果您想全面了解打字，我强烈建议您访问www.thinkingwithtype.com（并购买与之配套的书）。如果您正在阅读有关类型处理的CSS文章，那么无论在这里还是在网络上的其他地方，都有很多文章。我还建议您紧跟Mark Boulton和Elliot Jay Stocks的最新知识，他们两个都经常谈论与网页设计相关的类型。

玩得开心！