Skip to content

fix(epub): 修复部分 EPUB 丢失样式的问题(HTML 未链接任何 CSS 时兜底注入 manifest 样式) - #639

Open
k6G52m4Dz75W wants to merge 2 commits into
codedogQBY:mainfrom
k6G52m4Dz75W:feat/auto-link-css
Open

fix(epub): 修复部分 EPUB 丢失样式的问题(HTML 未链接任何 CSS 时兜底注入 manifest 样式)#639
k6G52m4Dz75W wants to merge 2 commits into
codedogQBY:mainfrom
k6G52m4Dz75W:feat/auto-link-css

Conversation

@k6G52m4Dz75W

Copy link
Copy Markdown
Contributor

背景

部分制作有问题的 EPUB(常见于"自由转换"产物),其内容文档(XHTML)里完全没有 <link rel="stylesheet">,导致书籍自带样式从未被加载,打开后所有样式丢失。引擎层(foliate-js)此前只改写 HTML 中"已存在"的样式表引用,对这种文件无能为力。

改动

在章节加载(foliate-js loadReplaced)中新增兜底:当某章节文档完全没有样式表链接时,将 OPF manifest 中声明的所有 CSS 文件(media-type="text/css",按 manifest 顺序)动态注入为该章节的 <link rel="stylesheet">

  • 走正规资源管线(loadItem),CSS 内的 url()(图片/字体)、@import、字体去混淆、引用计数/卸载回收全部正确处理;
  • 级联顺序正确:注入的书 CSS 先于阅读器的主题覆盖样式,应用的主题/字号/行高强制规则不受影响;
  • 一处改动,桌面端(直接引用)与移动端(打包进 reader.html)同时生效,已重新构建 reader.html;
  • 正常书籍(HTML 正确链接了 CSS)完全不受影响——触发条件极窄,仅作用于"没有任何样式表链接"的 malform 文件。

验证

用真实构建产物 reader.html 在浏览器中实测:

指标 坏书(HTML 无 CSS link) 好书(正常 link)
注入的 <link> 1 ✅ 1
粗体 / 居中样式 生效 ✅ 生效
文字颜色 主题色(应用强制) 主题色(应用强制)

坏书在修复后与好书渲染表现一致;颜色被强制为主题色是阅读器既有行为,两本书一致。

测试建议(Reviewer)

  1. 准备一本"坏"EPUB:解包后确认章节 HTML 无 <link rel="stylesheet">,但 content.opf<manifest> 声明了 CSS。
  2. 桌面端打开 → 确认书籍样式恢复显示。
  3. 移动端真机/模拟器 dev build → 同样确认。
  4. 打开任意正常 EPUB 回归 → 确认样式无变化。

Add a global read setting 'useBookFonts' (default on) that lets the reader's own fonts - including fonts embedded in EPUBs - render where the book specifies them, instead of forcing the app font theme onto every element.

- ViewSettings: add optional useBookFonts
- Desktop (FoliateViewer): only inject the body* font-family override when useBookFonts is off; re-apply styles live on toggle
- Mobile (reader.template.html + build reader.html): same conditional override, wired through ReaderScreen/use-reader-bridge
- Settings UI + toggle in desktop ReadSettingsPanel and mobile ReaderSettingsPanel
- Store defaults + migration backfill for existing users (old persisted settings default to on)
- i18n: settings.json and reader.json across all 7 locales
Some malformed EPUBs ship content documents that never link any stylesheet, so the book's CSS (declared in the package manifest) is never loaded and the book renders completely unstyled.

Fallback: when an XHTML section has no <link rel=stylesheet> at all, inject every CSS file declared in the package manifest (in manifest order) as <link> elements during section loading. CSS goes through the regular loader path, so url() references (images/fonts) and ref-counting/unload are handled correctly.

Single code path in foliate-js applies to both desktop (direct import) and mobile (bundled reader.html, rebuilt). Verified in a real browser against the built mobile reader.html: a broken book without CSS links now renders identically to a normal book; a normal book is unaffected.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant