即时字距调整

平面设计 自动化 字距调整
2022-01-12 15:44:11

有谁知道当用户键入文本时会根据字形形状自动计算字符的字距调整的算法?

我的意思不是简单地计算提前宽度或类似的东西,我的意思是分析字形的形状以估计字符之间的视觉最佳距离。例如,如果我们将三个字符按顺序排列在一行中,则不管字符的形状如何,中间的字符都应该看起来位于行的中心。一个例子启发了kerning-on-the-fly功能:

动态字距调整的示例:

截屏

在上图中a似乎太对了。它应该向 移动一定的量T,使其看起来位于T和的中间g该算法应该检查T和(可能还有其他字母)的形状,并决定必须向左移动a多少。a这个特定的数量是算法应该计算的——无需检查字体的可能字距对。

我正在考虑编写一个使用手绘字体的 javascript (+svg+html) 程序,其中许多缺少字距调整对。文本字段将是可编辑的,并且可以包含多种字体的文本。我认为在这种情况下,动态字距调整可能是确保平均文本流的一种方法。

编辑:一个起点可能是使用 svg 字体,因此很容易获得路径值。在 svg 字体中,路径是这样定义的:

<glyph glyph-name="T" unicode="T" horiz-adv-x="1251" d="M531 0v1293h
-483v173h1162v-173h-485v-1293h-194z"/>

<glyph glyph-name="a" unicode="a" horiz-adv-x="1139" d="M828 131q-100 -85
-192.5 -120t-198.5 -35q-175 0 -269 85.5t-94 218.5q0 78 35.5 142.5t93
103.5t129.5 59q53 14 160 27q218 26 321 62q1 37 1 47q0 110 -51 155q-69 61
-205 61q-127 0 -187.5 -44.5t-89.5 -157.5l-176 24q24 113 79 182.5t159
107t241 37.5 q136 0 221 -32t125 -80.5t56 -122.5q9 -46 9 -166v-240q0
-251 11.5 -317.5t45.5 -127.5h-188q-28 56 -36 131zM813 533q-98 -40 -294
-68q-111 -16 -157 -36t-71 -58.5t-25 -85.5q0 -72 54.5 -120t159.5 -48q104
0 185 45.5t119 124.5q29 61 29 180v66z"/>

算法(或 javascript 代码)应该以某种方式检查这些路径并确定它们之间的最佳距离。

4个回答

我知道这是旧的。我现在正在用 WebGL 实现摆动文本(无论如何)来解决这个问题。我正在研究的解决方案是这样的:

  1. 获取字形对的位图版本(如果需要,也可以使用矢量)
  2. 对于每一行像素(如果使用向量,则为任意垂直单位),检查两个字形是否至少存在一个像素
  3. 对于通过步骤 2 的每一行,计算第一个字形的最右侧像素和第二个字形的最左侧像素之间的距离
  4. 将第二个字形尽可能向左移动,同时仍满足以下条件:
    • 该行像素中的间隙大于您指定的某个最小间隙
    • total_area ÷ usable_rows(忽略其中一个字形中没有像素的行)大于您指定的某个平均间隙宽度

这样,字母之间的空白“区域”应该被压缩到一个相当普遍的平均值。使用反复试验和您自己的喜好指定最小间隙和最小面积,并且可能允许其他代理调整这些参数......就像手动字距调整值。

耶 :)

编辑:我现在已经成功地实现了这一点,并且效果非常好:) gaudiyakirtan.com/canopy

这是我尝试过的一个相当简单的算法,可能已经足够好了。

以低分辨率渲染字符 - 比如说六或七个像素高(典型大写的高度),水平大致相同。您想要一个简单的低分辨率网格上的空白空间与字母部分的简单二进制映射。

“增肥”这些字母图。也就是说,填充与已填充单元格相邻的每个空单元格。这是为了声明最靠近字母边缘的空白区域,因此相邻的字母不会靠得太近。

使用生成的字母图播放“水平俄罗斯方块”。让重力作用于左侧。“a”的左手“肚”会“落”入“T”的上杆下方的空腔中。“a”移动了多少个单元格?将其按比例放大到字母的实际大小,这就是将实际高分辨率“a”向左紧缩的程度。

自动字距调整算法已经存在。没有一个是万无一失的,它们往往需要一些手持和手动校正某些方面,特别是如果您的跟踪相对较紧。

但是这些算法是用于将字距调整应用于字体文件,而不是应用于从字体文件生成的字母。

您是否考虑过对字体文件应用自动字距调整?

Fontforge(开源)和 Fontlab(商业)包含自动字距调整算法。他们会有一个相对陡峭的学习曲线——你必须熟悉字体如何工作的技术方面。

还有一个iKern是一个提供商业字体字距调整服务的人,他会为你调整你的字体并且做得相当出色。我不知道要花多少钱。

我没有时间完全考虑这个问题,也没有时间画插图,但我有一个基于首先垂直平分每个字形的半点想法。

然后对于每一半,确定两个垂直轴: - 平分线 - 左右两端之间正好一半 - “重量”轴 - 每边正好一半墨水

然后根据两个轴的相对位置将相邻的相邻字形移向或远离测试半字形。

因此,例如,在“AV”对中,A 的右半部分是左重并“吸引”了 V;V 的左半边是右重的“吸引” A,因此它们被显着地紧缩在一起。

但是,我敢肯定“AA”会像“AV”一样紧缩在一起存在缺陷。