iOS vs CSS(浏览器)行高不同

时间:2018-08-02 11:53:56

标签: ios css swift text uitextview

上下文

我有一个字符串,该字符串已在CMS系统的浏览器中格式化。位置,边框,字体系列,大小,行高和许多其他属性。将该信息转换为JSON并下载到iPad,然后使用属性字符串设置上述各种属性,将其呈现在UITextView内部。

因此,从本质上讲,我必须重新创建网页显示的内容,在这里或那里留出几个像素的余地,因为在此阶段似乎无法达到像素完美。

问题

请参见下图。这是在指定的边界框中呈现的文本字符串,Muli字体的大小为20px,行高为2。我添加的用于测试对齐方式的蓝色框(下面是一条绿线,被绿线覆盖,确认对齐方式是正确)。

灰色是您在网络上看到的,黑色是您在iOS上看到的。

您可以清楚地看到,即使它们都设置为相同的行高,其输出也大不相同。

enter image description here

到目前为止我尝试过的事情

我首先手动调整lineSpacing的{​​{1}},maximumLineHeightminimumLineHeight属性。一旦我完成了大约30种手动布局并记录了所需的图形,我注意到了可以用来创建公式的模式,即:

NSParagraphStyle

我必须根据字体的不同在结果中加/减一点(Questrial为+2),但是我可以忍受,我们只使用10种字体,而且我可以很快地手动进行调整。

问题是,当您在同一字符串中具有多个字体大小时,这一切都会中断。我回到了手动调整的位置(忘记公式了,我只是输入1,2,3,4 ...看看是否可以将其排列起来),但是无论我使用这两个属性输入了什么数字,我都无法获得它太对齐。这两个属性根本行不通。

然后我发现line spacing = −((font-size ÷ 10) / 5) + ( (font-size ÷ 2) × css-line-height ) min/max line height = ((font-size ÷ 10) / 5) + ( (font-size ÷ 2) × css-line-height ) 可以进行手动调整。但是我还需要调整顶部内容的偏移量。

所以对于下面的图片,我最终得到的是:

lineHeightMultiple

我进行了约50次手动对齐,以寻找某种模式,但找不到。 Muli的 line height multiple = 1.6 content top offset = -8 在(css-line-height x 0.8)下是可以接受的,但其他字体则完全不同,没有通用的模式。我找不到任何字体来导出公式的偏移量。

....

所以几周后,我在这里问是否有人曾经做过类似的事情。我知道这两个平台使用不同的字体渲染引擎但是必须有一种计算方法使它们匹配。

哦,我已经考虑过为每个地图创建一个手动地图,但是仅在我们当前的数据集中有约25,000个组合,实际上是不可行的。

0 个答案:

没有答案