Manga Translator UI 富文本渲染指南richtext.v1 协议、Ruby注音与竖排排版完整解析【免费下载链接】manga-translator-ui基于manga-image-translator 实现的开源漫画AI翻译桌面工具。支持日、韩、英文漫画自动处理集成OpenAl、Gemini等多翻译引擎实现OCR文字检测、原文擦除、AI翻译、图像修复、译文排版完整链路自带可视化编辑器支持自定义文本样式一键部署开箱即用。项目地址: https://gitcode.com/gh_mirrors/man/manga-translator-uiManga Translator UI 是一款开源漫画 AI 翻译桌面工具在 OCR 识别、AI 翻译之后还内置了一套专业的富文本渲染引擎它用richtext.v1结构化协议描述译文原生支持 Ruby 注音、竖排排版和纵中横tcy等特殊形态让翻译后的文字既翻译得对也排得像原作。本文带你完整看懂这套富文本渲染的实现思路。为什么漫画翻译需要富文本协议 先看一张日文原作漫画页面注意观察气泡里的日文绝大多数文字是竖排的汉字上方还有小小的注音假名Ruby感叹号、符号又需要横向排布。普通字符串 字号的渲染方式根本表达不了这些形态。因此项目没有走HTML 标记字符串的老路而是设计了一份严格的结构化协议——richtext.v1顶层只有format和blocks两个字段每个block是paragraph段落由inlines行内节点组成行内节点分三类text普通文字可携带style样式颜色、字号、描边、发光、斜体等ruby注音节点含base主文字和text注音两组内容tcy纵中横节点用于在竖排中横向嵌入符号、标点、数字等协议校验非常严格出现source、document等非协议字段会直接报错避免脏数据进入渲染层。协议解析唯一收口在 manga_translator/rendering/rich_text.py官方说明见 manga_translator/rendering/RICH_TEXT_RENDERING.md。{ format: richtext.v1, blocks: [ { type: paragraph, inlines: [ { type: ruby, base: [ { type: text, text: 漢字, style: {} } ], text: [ { type: text, text: かんじ, style: {} } ] } ] } ] }渲染链路一份协议横排竖排共用数据解析后进入text_render/渲染包manga_translator/rendering/text_render/内部按职责分层模块职责_fonts.pyQt 字体运行时管理_glyphs.py字形矢量轮廓与光栅化_layout.py横排/竖排布局、包络几何、竖排槽位_compose.py图层合成与描边、发光特效_render.pyput_text_*/measure_*统一入口关键设计是**测量 绘制**横排用真实字形墨迹glyph path计算包围盒不再用固定行高估算竖排按槽位推进逐字下移注音、着重号等装饰计入渲染框但不推挤正文。这样编辑器里的预览和最终导出的位图能逐像素一致。竖排排版从右到左的列式布局 竖排是漫画排版的核心难点manga_translator/rendering/text_render/_layout.py 中实现了一整套逻辑列式游走列从右向左推进每列内的字符从上到下排布注音占位带 Ruby 的字符在列右侧额外腾出注音空间_rich_vertical_ruby_space注音字号自动缩小纵中横tcy竖排中遇到连续的! ?或符号时按tcy节点整组横置渲染若墨迹过宽超过 1.1 倍基准字号会水平压缩到上限高度不变强制推进verticalAdvance: half/full可让标点等字符强制占半格或全角墨迹在固定槽位内居中解决竖排中文字间距失控的问题斜体语义竖排横躺字符等价于先绕基线切变再旋转与 Photoshop 仿斜体行为对齐。下面是同一页漫画完成翻译、擦除与重新排版后的效果中文译文贴合原气泡形状富文本规则引擎自动给文字化妆 手写协议很强大但没人想逐段配置。项目提供了富文本规则引擎manga_translator/rendering/rich_text_rules.py规则存放在rich_text_rules.yaml按横排 / 竖排 / 通用三组生效vertical: - enabled: true pattern: [!?]{2,4} regex: true tcy: true # 连续问叹号自动纵中横 - enabled: true pattern: [ー⸺] style: { transform: { rotation: -90 } } # 无竖排形符号自动旋转规则支持正则匹配、局部样式、自动加注音ruby字段和自动 tcy 包装。翻译完成后规则引擎会自动扫描译文并生成对应的richtext.v1结构——规则只管该用什么样式协议只管怎么描述渲染只管怎么画三层彻底解耦。在可视化编辑器中直接体验 ✏️编辑器内选中气泡后右侧富文本预设面板提供了一键式样式工具栏B/I/U/ST加粗、斜体、下划线、删除线、换色、字号、描边、旋转等都能实时预览由于测量与渲染共用同一套包络几何你在编辑器里看到的注音位置、竖排间距就是导出结果本身所见即所得。更多细节可参考官方 Wiki 中的 富文本规则文档。小结Manga Translator UI 的富文本渲染可以概括为一句话用richtext.v1结构化协议描述译文用 Ruby 节点还原注音用 tcy 和槽位推进解决竖排排版。相比标记字符串方案它更严格、更可测量、也更容易扩展——新增能力时只需定义新的 node 或 style 字段再补齐布局与绘制即可。对于想深入研究漫画翻译排版的开发者建议从 manga_translator/rendering/RICH_TEXT_RENDERING.md 入手配合 test/test_rich_text_rendering.py 的测试用例阅读源码。【免费下载链接】manga-translator-ui基于manga-image-translator 实现的开源漫画AI翻译桌面工具。支持日、韩、英文漫画自动处理集成OpenAl、Gemini等多翻译引擎实现OCR文字检测、原文擦除、AI翻译、图像修复、译文排版完整链路自带可视化编辑器支持自定义文本样式一键部署开箱即用。项目地址: https://gitcode.com/gh_mirrors/man/manga-translator-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考