sketch中的排版解析

Text，就像颜色是表面上看起来很简单的一个主题，但一旦你挖掘出来，它变得显而易见了。多年来，我们了解到，设计人员期望从类型系统中，Apple和其他厂商如何构建其文本布局系统并不总是如此。

Sketch处理文本的方式是我们想要改进的一段时间，但是随着您继续阅读，您很快就会发现，进行这些更改和改进需要我们深入苹果的文本渲染系统并进行一些低级别的更改。我们认为我们最终出现了胜利，我们希望你会喜欢这个结果。

要了解我们需要解决的一些问题，我们首先来看一下Sketch中文本图层的垂直度量：

单行文本图层的高度由字体的文字大小的行高值确定。这个值与文字大小不符，不同的字体差异很大; 有时它与文字大小几乎相同，在其他时候它的大小是两倍。字体在该空间内绘制的位置由基线（红色）确定，也由字体指定。

既然两者在字体之间变化如此之大，当您在字体之间切换时，Sketch中的文本图层可能会发生很大变化，特别是在同一段落中混合多种字体和大小时。另一个不良影响是，当您在字体之间切换时，画布上的文字经常会向上或向下移动。

常常出现在我们的支持收件箱中的问题 - 询问为什么Sketch渲染看似空白的区域（以蓝色突出显示），并且不会将边框修剪到图层中的上升沿和下降沿。这些也由字体的指标决定，但简单地说，这个空间是一些字符，特别是那些含有变音符号的人所需要的。可以出现在大写字母S（Š，以捷克语和其他斯拉夫语言发现）的卡罗恩和一个带有雪松子的小写字母c（ç，最常见于土耳其语和法语）是许多例子中的两个。

在草图3.6中，我们对排版文本图层的方式进行了一些更改，特别是对于具有固定行高的段落。要了解它的工作原理以及改变的内容，我们需要看看苹果的文本系统，它如何显示文本，以及如何应用于Sketch。

字符和字形

布置文本段落的第一步是将文本的字符和字体属性转换为字形。字形是给定字体的一个或多个字符的视觉表示。字符和字形之间的映射不是1：1。例如，单个字形可以表示多于一个字符 - 这些称为连字。相同的字符排序不同可能会产生不同的连字，因此会产生不同数量的字形。我们遇到的最极端的连字是Zapfino字体中的“ Zapfino ”。这七个字符由单个字形表示：

文本容器和行片段

我们可以在一行上适合多少个字形由文本容器的宽度决定。在草图中，文本容器的大小由文本图层的宽度决定。要用字形填充文本容器，我们需要将其拆分成行。包含适合单行的所有字形的矩形称为“线条矩形”。只要你在一个段落中使用一个单一的字体或大小，一切看起来都可以预期：

在正常排版中，行片段的高度由该行上最高的字体确定（确切地说，字体的上升和下降到基线以下）。混合字体可以产生不同高度的线条片段，这是开始变得有趣的地方：

固定线高度

段落还可以指定最小和/或最大行高。这限制了片段矩形的高度。如果我们对最小和最大值使用相同的值，我们得到一个固定的行高。历史上，这是Sketch中的设置线高度。它适用于相同字体的段落。

具有混合字体的段落在Sketch中通常看起来不正确。我们设定了一个固定的线路高度，那么出了什么问题？答案是找出排版选择器将线条放置在行片段矩形中的位置。

事实证明，对于每一行片段，Cocoa的排版工具都会在该行上找到最高的后缀，并将其用作从片段矩形底部的基线偏移量。使用混合字体，这给我们一个固定的线高度，但是基线间隔不一致。

当设计师将线高度设置为20pt时，他们的意思是他们希望基线之间为20pt，而不是20pt高度的线条矩形。这是有道理的，因为确定文本的视觉垂直节奏是基线，这比这些抽象矩形更加“可见”。那么我们如何解决这个问题呢？

一致基线

在草图3.6中，我们引入了一种新的排版机，为固定行高的段落产生一致的基线偏移。为了做这个工作，我们正在查看段落中的所有行片段，并选择适合它们的基线偏移量。

即使使用不同的字体，只要它们具有固定的行高，段落之间也保持一致的基线偏移。当没有固定线高度设置时，我们使用指示的字体，我们看到可以留下不同的结果。当您将其设置为固定时，您将获得一个美丽可预测的垂直节奏：

这与现有文件如何配合？默认情况下，新文本图层使用一致的基准排版列表，而在早期版本的Sketch中创建的文本图层可以通过更改行高度来采用新的排版行为。

其他改进

我们对线高度的改进也对编辑具有低于字体大小的线高度的段落产生积极影响，因为基线始终位于行片段矩形内。它还改进了文本图层的边界矩形。

最后，当更改文本图层的字体时，我们已经做了一些长度保留第一个基准的位置，所以当在字体之间切换时，文本图层将不再垂直跳转。

最后一个注释

您可能已经注意到，数字排版是一个非常复杂的问题。我们生活在一个激动人心的时代，在这个令人兴奋的时代，我们已经意识到，在每个设备和平台上，使设计看起来完全一样，几乎是不可能的。

对于我们来说，也不可能创建一个系统，将类型类似于iOS，Android或Chrome在Windows中，或Safari中的Safari。它们之间的渲染差异非常复杂和多样。

我们听取了您的反馈，并尝试创建一个非常一致和可靠的渲染系统。我们非常重视这一更新的行距，但我们刚刚开始。这是我们今年计划发布的一系列类型改进的第一部分。