Troika: 从右到左的文本布局支持

创建于 2021-04-05  ·  11评论  ·  资料来源: protectwise/troika

代替完整的高级文本整形解决方案(例如 harfbuzz.wasm),我想要一些对 RTL 布局的基本开箱即用支持。 Typr 已经包含了对阿拉伯语字形替换的某种程度的支持,尽管我不知道这有多完整。

我已经添加了一些非常基本的 RTL 布局/包装逻辑。 让我们使用这个问题来跟踪具有该问题和其他支持差距的错误。

临时测试页面: https: //troika-examples.netlify.app/#text -rtl

最有用的评论

我已经推动了一个更完整的加入类型检测的实现; 我从 Opentype.js 改编的逻辑被证明是不完整的。 新的实现实际上嵌入了unicode 连接类型定义的高度压缩版本,因此它现在应该处理阿拉伯语和其他语言中的所有可连接字符。 它还为 Typr 代码提供了一个不错的减速带。

@MichaelHazani既然你自愿测试希伯来语,我想这已经为你准备好了。 你可以使用这个测试页面,我在“字体”下拉列表中添加了几个希伯来字体,你可以输入自己的文本。 谢谢!

所有11条评论

首先,我要非常感谢您为此付出的努力。 支持阿拉伯语和 RTL 布局将对许多人有用。
我已经进行了一些初步测试,标准的阿拉伯语文本在 cairo、Lemonada、Scheherazade 字体(没有 Tachkil)中得到了很好的支持。

我正在测试这两条阿拉伯语规则:

  1. 3 种写字形式(开头、中间、结尾)和连接(连字)是否正确。
  2. Tachkil,它是发音 ُ َ ً ٌ 的指示集(除了极少数情况外,您在互联网上找到的大多数文本中都没有使用)

在 mirza 中,一些内部字母没有连接(将字母的结尾形式而不是内部字母或其他形式)
arabicTachkil

使用 tachkil,一些字体可以正常工作,而另一些则改变了旁边字符的形式。 有些人使用了我在框中写的文本,而没有使用复制的文本。

如果我使用括号“(”,“)”之类的非阿拉伯字母,它们会被切换(需要颠倒。)。

这是我做的一个快速测试,我需要检查更多,并在事情变得奇怪的地方给你更多细节。 (我还需要检查字体,有些字体没有提供所需的字符)

万分感谢! 我很高兴听到它有一个不错的开始。

有趣的是,单词位置替换的结果因字体而异。 Typr 中的单词位置检测逻辑始终相同,因此这些字体如何编码 Typr 无法处理的替换肯定有一些不同。 我会专门研究米尔扎,看看我是否能确定差异。

由于我不知道这些字符,因此我自己无法确定正确与不正确,如果您能给我一些具有预期结果的有针对性的测试用例(可能只是单个单词,例如:

输入文字:xxx
应该看起来像:[图片]
字体 A 看起来正确:[图片]
字体 B 看起来不正确:[图片]

至于括号,我认为这是 Bidi 算法的配对括号部分。 我还不确定这是否是我自己会解决的问题,但我一定会调查的。

我已经推送了一些粗略的双向布局支持的代码。 现在它完全是手动使用 LRO/RLO/PDF 控制字符来定义方向范围。 全自动比迪烟要复杂得多,我仍然对它的范围感到困惑,但是能够布置范围(使用换行和选择!)是一个重要的开始。

image

我真的很抱歉我昨天没有发布反馈。 我想在周末进行一次全面测试,但我认为最好分步进行。
让我们从效果很好的字体开始(某些字体可能存在一些问题)我使用了 Scheherazade 字体,但 Cairo 和 Lemonada 给出了相同的结果。
Mirza 和 Amiri 字体总是显示不连贯的字母。
Noto Sans、Roboto 字体根本不起作用。

在下图中,我用红色表示字母的错误形式,绿色表示正确的形式。
只有当我们有 Tachkil(声乐)或拉丁语或数字字符时,才会出现问题。

  1. 我们有一个内部形式,而不是最终形式。
  2. 在单词内部,我们有内部形式,而不是开始形式。 (在单词内有些字母没有连字)
  3. 当我们在单词后面有一个数字时,(كم2)我们保持结尾形式。
  4. 数字是相反的。

arabThree

我使用的文字:
2.
电影 2
بِسم اللَّه الرحمن الرحيم
بِسمِ اللَّهِ الرَّحمٰنِ الرَّحيمِ

此答案包含有关如何绘制字母的图片
https://www.quora.com/How-can-anyone-read-Arabic-as-the-letters-are-all-connected-to-each-other/answer/Hashem-Mohamed-4

非常感谢您提供这个标记的测试用例,这非常有帮助!!! 它真的帮助我理解事物。

Typr 的词位检测逻辑肯定有问题; 我用从opentype.js改编的逻辑覆盖了它,结果现在看起来好多了:

image

在进一步测试后,我将把 Typr 修复贡献回上游。

“数字颠倒”问题将通过我开始的 BiDi 工作来处理。 目前,这可以通过明确的 LRO/PDF 字符来解决。

保持这些类型的测试用例出现! 🤩

那很快。
好吧,除了可以使用您提到的 BiDi 工作(数字和括号可广泛用于阿拉伯文本)之外,我还没有找到需要更多修复的东西。
你能举例说明如何使用 LRO/PDF 字符吗? 我自己无法重现混合文本示例。

最后一件事与阿拉伯语文本无关,但可能与 SDF 渲染有关,当 2 个字符连接在一起时,有些字符内部有黑色,就像这里
image
image
有时在同一个字符内
image
这仅在 Lemonda 字体中可见。 山鲁佐德,开罗工作得很好(也许是因为角色连接在正确的位置)。
(看起来像矢量渲染工具中的布尔运算。)

再次感谢您的工作。

谢谢! 我目前正在努力添加一个完整的双向算法实现,我认为它应该可以解决你迄今为止描述的所有其他问题。

示例下拉列表中的“BiDi 1”文本有一个 LRO/PDF 示例,但现在不要担心,这只是权宜之计,无论如何都不是正确的。 真正的比迪烟会更好。

我认为该字体的布尔填充问题与#57 中讨论的相同。

我们现在有全面的比迪烟支持!

image

示例页面中有几个双向片段,但使用您自己的混合 rtl+ltr 文本对其进行一些测试。

这变成了我掉进兔子洞的经典例子; 我没有找到合适的 JS bidi 实现,也不想引入 fribidi.wasm,所以我决定尝试一个新的 JS 实现,作为一个晚上和周末的项目。 看https://github.com/lojjic/bidi-js! 我需要在那里添加一些文档,但它完全符合官方的 bidi 测试,非常小(~10kb)并且速度非常快,尽管它可能会进行更多优化。

我对这个解决方案感到非常满意,而且它对捆绑包大小的影响很小。 我认为我们现在非常接近完整的 RTL 支持。 我需要重新审视加入表单的逻辑,我意识到我从 opentype.js 改编的逻辑只处理阿拉伯语脚本,而不是其他也加入的逻辑。

我已经推动了一个更完整的加入类型检测的实现; 我从 Opentype.js 改编的逻辑被证明是不完整的。 新的实现实际上嵌入了unicode 连接类型定义的高度压缩版本,因此它现在应该处理阿拉伯语和其他语言中的所有可连接字符。 它还为 Typr 代码提供了一个不错的减速带。

@MichaelHazani既然你自愿测试希伯来语,我想这已经为你准备好了。 你可以使用这个测试页面,我在“字体”下拉列表中添加了几个希伯来字体,你可以输入自己的文本。 谢谢!

看起来很棒!
(“好吧,看来测试成功了。标点符号在它应该在的位置;右对齐看起来不错。两种字体都以应显示的方式显示希伯来语。切换到英语,即这个词,不会破坏对齐。做得好!”)
image

到目前为止,我已经发布了 v0.41.0,并完成了这里的工作。 毫无疑问,还有其他 RTL 脚本需要额外的专门处理,但这提供了足够可靠的基线,我认为我们可以根据具体情况处理这些脚本。 对于一些更高级/晦涩的情况,总是有可能允许可选的 Harfbuzz 插件(#91)。

再次感谢@boulabiar@MichaelHazani在这里提供的宝贵帮助!!! 🎉

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

stephencorwin picture stephencorwin  ·  39评论

asbjornlystrup picture asbjornlystrup  ·  7评论

Ocelyn picture Ocelyn  ·  13评论

atlmtw picture atlmtw  ·  47评论

drcmda picture drcmda  ·  11评论