为什么 ASCII 线框图(Wireframe)一出现中文就对不齐?是字体问题,还是 Unicode 字符宽度导致的?

查看 32|回复 2
作者:rich1e   
最近在用 AI 生成 ASCII 线框图时,发现只要内容里出现中文,就很容易出现对齐问题。
例如:
+---------------+
|  /Lesson      |
|  事後回顧      |
+---------------+
理论上,两行内容都是从同一列开始,但实际在很多终端、Markdown 编辑器或代码编辑器中显示时,视觉上却没有垂直对齐。
查了一些资料后,大概了解到原因主要有几点:
  • ASCII 字符通常属于半角字符(宽度为 1 )。
  • 中文、日文、韩文( CJK )字符通常属于全角字符(宽度约为 2 )。
  • 不同字体、终端和 Markdown 渲染器,对 CJK 字符宽度的处理并不完全一致。
  • 有些编辑器虽然英文使用等宽字体,但中文会自动回退到非等宽字体,因此即使字符宽度理论正确,显示效果仍然会错位。

    目前看到的几种解决方案包括:
  • 使用支持 CJK 的等宽字体,例如 Sarasa Mono 、Maple Mono 、LXGW Mono 等。
  • 程序生成 ASCII 图时,不使用 len() 计算字符串长度,而是使用 wcwidth 、string-width 等库计算字符显示宽度。
  • 使用 Unicode Box Drawing (┌ ─ │ ┘)代替传统 ASCII (+ - |)。
  • 如果需要展示中英文混排的结构图,考虑改用 Mermaid 、Markdown Table 、HTML 或 SVG ,而不是 ASCII 图。

    我发现使用 Maple Mono 字体,是一个非常简单有效的方案。 如下:


    另外,想请教一下大家:
    [ol]
  • 大家在日常开发中遇到过类似的问题吗?
  • 有没有哪个终端、编辑器或字体,对 CJK 的等宽显示支持得比较好?
  • 如果需要生成可跨平台展示的文本线框图,目前有没有比较成熟的最佳实践?
    [/ol]
    欢迎分享你的经验或踩过的坑!

    ASCII, 中文, 对齐

  • xy2401   
    用过 markdown 写表格 就应该知道这个问题
    还涉及到 chrome / electron 的渲染问题
    我直接选择放弃
    rich1e
    OP
      
    @xy2401 换个字体或许就可以解决。亲测 vscode 、obsidian 和 iTerm 有效果。
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部