爱意满满的作品展示区。
P233
5.03D

在 web 和 gpui 中实现印刷级别的字体排版精度

  •  
  •   P233 ·
    P233 · 1 day ago · 949 views
    前几天看到 @imeoer 大佬用 gpui 写 markdown editor ,正好有个老的 web 英文排版项目特别适合移植到 gpui ,跟 web 相比 rust 可以读取字体文件的元数据,能做的更多,也更适合。

    原理是通过读取字体度量表中的 ascent ,descent 与 units-per-em 推导字体的 baseline ratio 计算当前字号的基线的偏移量,然后将文本基线对齐到 vertical rhythm 的网格上,实现印刷排版级别的精度。并且不同字体,不同字号混合排版,drop cap 等等都能轻松处理。





    项目地址: https://github.com/p233/rhythm-gpui

    原 sass 版本也一并做了更新,地址: https://github.com/p233/rhythm-sass

    有写 markdown editor 的一些设想,下周尝试一下,能走通就继续,走不通就放弃。
    5 replies    2026-08-16 14:05:54 +08:00
    imeoer
        1
    imeoer  
       1 day ago via iPhone
    关注了,看起来很优雅啊,漂亮的效果。感觉这个特别适合富文本编辑器,纯 markdown 语法的排版还是太局限了。
    P233
        2
    P233  
    OP
       1 day ago
    @imeoer 感谢!这个方案适合大段的纯文本排版要求,单从垂直角度几乎能达到杂志的排版要求,实施过程也更加麻烦。曾经遇到过追求这个精度的设计师,研究了一套比较轻松的实现方案。

    想要尝试以这种排版精度做实时 markdown 编辑,有点挑战。
    vitality
        3
    vitality  
       1 day ago
    支持,感觉很专业啊
    imeoer
        4
    imeoer  
       1 day ago via iPhone
    @P233 特别喜欢这类排版和印刷风格,最近有个叫 tone 的 halftone 颗粒感风格化的 app ( x 上账号 @pnly_tar ),感觉配合上这种杂志阅读风格,会特别的好看!我觉得可以考虑让用户写的 markdown ,保持内容不变的情况下,通过 AI 渲染输出这种排版,然后用户可以手动微调,如何呢?
    P233
        5
    P233  
    OP
       19h 55m ago
    @vitality 感谢支持

    @imeoer 很漂亮啊,搭配一下会很好看。我感觉 AI 输出排版再手动微调,预览很慢,不太适合边写边看,更适合像微信读书那样节选一部分文字生成分享图片的功能。只是这种排版方案更适合拉丁字母,汉字的帮助不太大。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   6049 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:01 · PVG 10:01 · LAX 19:01 · JFK 22:01
    ♥ Do have faith in what you're doing.