Skip to content

Fix mincho font in epub iframes + eliminate emoji cover SSR flash#22

Draft
Copilot wants to merge 4 commits intomainfrom
copilot/add-mincho-font-to-ebooks
Draft

Fix mincho font in epub iframes + eliminate emoji cover SSR flash#22
Copilot wants to merge 4 commits intomainfrom
copilot/add-mincho-font-to-ebooks

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 1, 2026 •
edited
Loading

Two bugs: CJK font never loaded inside epub.js iframes, and emoji cover backgrounds flash light→dark on hard page load in dark mode.

Font (ebook.tsx)

The stylesheet-scraping approach was fundamentally broken: Next.js hashes the font filename, --font-mincho is a comma-separated list so family-name matching failed, and even with those fixed, epub.js iframes use a blob: base URL so origin-relative paths don't resolve.

Fix: copy mincho.woff2 to public/fonts/ and replace all scraping logic with two constants:

const MINCHO_EPUB_FAMILY = 'LeximoryMincho'
const MINCHO_FONT_CSS = `@font-face { font-family: "${MINCHO_EPUB_FAMILY}"; src: url("/fonts/mincho.woff2") format("woff2"); font-display: swap; }`

injectThemeCSS() prepends MINCHO_FONT_CSS; rendition.themes.default() references MINCHO_EPUB_FAMILY directly.

Emoji cover SSR flash (emoji-cover/index.tsx + globals.css)

resolvedTheme is undefined until after hydration, so the JS-driven backgroundColor inline style always renders light-first, producing a visible flash.

Fix: move background color to CSS custom properties + a class selector driven by html.dark (set synchronously by next-themes before hydration):

/* globals.css */
.emoji-cover-bg { background-color: var(--emoji-bg-light); }
html.dark .emoji-cover-bg { background-color: var(--emoji-bg-dark); }
<div
  className={cn('... emoji-cover-bg', className)}
  style={{ containerType: 'size', '--emoji-bg-light': bg.light, '--emoji-bg-dark': bg.dark } as React.CSSProperties}
>

The correct color is applied before first paint via CSS — no JS required, no flash.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 1, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
leximory Ready Ready Preview Mar 1, 2026 0:58am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
leximory-quiz Skipped Skipped Mar 1, 2026 0:58am
pouncepen Skipped Skipped Mar 1, 2026 0:58am

@vercel vercel bot temporarily deployed to Preview – leximory-quiz March 1, 2026 11:30 Inactive
@vercel vercel bot temporarily deployed to Preview – pouncepen March 1, 2026 11:30 Inactive
@vercel vercel bot temporarily deployed to Preview – leximory March 1, 2026 11:30 Inactive
@NarixHine
inject mincho font into epub.js iframe for CJK fallback
8944510 
Co-authored-by: NarixHine <127665924+NarixHine@users.noreply.github.com>
@vercel vercel bot temporarily deployed to Preview – leximory-quiz March 1, 2026 11:36 Inactive
@vercel vercel bot temporarily deployed to Preview – pouncepen March 1, 2026 11:36 Inactive
Copilot AI changed the title [WIP] Add Mincho font to English fonts in EPUB rendering Inject mincho font into epub.js iframe for CJK fallback Mar 1, 2026
@NarixHine NarixHine requested a review from Copilot March 1, 2026 12:22
Copilot AI reviewed Mar 1, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR ensures the app’s Mincho CJK font is available to epub.js-rendered content (which lives inside an iframe and cannot access the parent document’s CSS variables), restoring correct CJK fallback rendering in ebooks.

Changes:

  • Adds a memoized getMinchoFontInfo() helper that reads --font-mincho from the parent document and extracts matching @font-face rules from accessible stylesheets.
  • Updates injectThemeCSS() to prepend the extracted @font-face CSS into the iframe <head> style injection.
  • Extends epub.js rendition.themes.default() font stacks for prose/headings to include the Mincho family as a fallback.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@NarixHine
fix mincho font in epub iframe and emoji cover dark mode
2d111c4 
Co-authored-by: NarixHine <127665924+NarixHine@users.noreply.github.com>
@vercel vercel bot temporarily deployed to Preview – pouncepen March 1, 2026 12:41 Inactive
@vercel vercel bot temporarily deployed to Preview – leximory-quiz March 1, 2026 12:41 Inactive
Copilot AI changed the title Inject mincho font into epub.js iframe for CJK fallback Fix mincho font in epub.js iframe and emoji cover dark-mode on hard load Mar 1, 2026
@NarixHine
fix epub font via public path + eliminate emoji cover SSR flash
d17fb2d 
Co-authored-by: NarixHine <127665924+NarixHine@users.noreply.github.com>
@vercel vercel bot temporarily deployed to Preview – leximory-quiz March 1, 2026 12:57 Inactive
@vercel vercel bot temporarily deployed to Preview – pouncepen March 1, 2026 12:57 Inactive
Copilot AI changed the title Fix mincho font in epub.js iframe and emoji cover dark-mode on hard load Fix mincho font in epub iframes + eliminate emoji cover SSR flash Mar 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

@NarixHine NarixHine

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@NarixHine