[PR #3821] [MERGED] fix(website): use Noto Sans KR for Korean text #5922

Closed
opened 2026-10-31 01:10:28 +00:00 by bsakaguchi · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/morluto/rea/pull/3821
Author: @hi2242
Created: 10/15/2026
Status: ✅ Merged
Merged: 10/16/2026
Merged by: @morluto

Base: main ← Head: fix/korean-font-rendering


📝 Commits (2)

  • 1a005be fix(website): use Noto Sans KR for Korean text
  • feabd78 Merge remote-tracking branch 'origin/main' into sweep/3821

📊 Changes

5 files changed (+32 additions, -7 deletions)

View changed files

📝 scripts/test-website.py (+10 -0)
📝 scripts/website_i18n.py (+7 -1)
📝 website/README.md (+7 -0)
📝 website/public/assets/styles.css (+5 -5)
📝 website/style-guide.md (+3 -1)

📄 Description

Summary

Fixes #3820. Prefer Noto Sans KR for Korean website text and load its variable webfont only on Korean editions, so the font choice can be reproduced on PCs without it installed.

Problem and expected behavior

I saw distorted strokes in “클릭 관찰” on a 32-inch monitor at some rendered sizes, including 100% browser zoom. I did not find the problem on the 15.6-inch display I checked. I retested the proposed preview on the affected device and confirmed the improved rendering shown below. This does not establish that all monitors of either size behave alike.

The before/after screenshots retain a computed 28px size, 650 weight, and 37.8px line height. They show the CSS family lists, not per-glyph Rendered Fonts attribution; viewport widths differ, so this is not a pixel-diff test.

Before After: retested on the affected device
Before: distorted Korean heading After: Noto Sans KR preferred at the same computed size and weight

Additional manual checks: I checked Chrome and Edge on the affected 32-inch, 2560 × 1440 display. New Chrome screenshots at 80% and 125% browser zoom show no recurrence with Noto Sans KR. In a separate experiment with the original system-first stack, 32px looked normal at 100% zoom but distorted again at 90%, supporting the font-selection change instead of a size-only workaround. The issue contains all four additional screenshots and their test conditions. display=swap and local Korean fallback fonts were already included in this implementation.

Change and scope

  • Put Noto Sans KR first in the Korean prose stack; keep shared monospace fonts first for Latin code glyphs.
  • Add the Google Fonts stylesheet when rendering a complete Korean edition. Other editions and English fallback pages do not request it. Use variable weights with display=swap and retain local fallbacks.
  • Extend the existing rendered-edition integration check to verify the font request's language scope, family, weight range, and loading mode. Document font delivery in the website README and style guide.

Contract and boundary impact

  • Semantic owner and earliest changed stage: render_page owns the Korean edition's font resource; the shared stylesheet owns font selection.
  • Contribution scope fit and linked maintainer decision: ordinary website readability fix; advance capability scope approval is not applicable.
  • CLI/MCP, provider/bridge, Evidence/target authority, package/generated metadata, and installation contracts: not applicable to this website-only diff.
  • Browser compatibility: webfont-capable browsers; local font fallback remains available when Google Fonts cannot load. The rasterization cause is not established.

Expected effects:

  • Read existing files or captured data.
  • Launch or attach to a process.
  • Inject instrumentation or run scripts/code.
  • Change process memory, registers, files, or configuration.
  • Contact network services.
  • Recover protected code or work around protections.
  • Documentation or usability only; no target interaction.
  • Not sure yet; investigation or maintainer guidance needed.

Evidence and regression coverage

  • Executed visual evidence: the screenshots above and my retest on the affected device. Chrome and Edge showed the original symptom during investigation; this is Chromium coverage, not independent browser-engine coverage.
  • Executed integration evidence: the existing all-editions consumer check now rejects missing Korean font requests or requests on other editions. The unmodified base has no Korean webfont link and would fail that new assertion; an automated base run was not performed.
  • Source-derived: the original stack prioritizes Latin/system families and Malgun Gothic over Noto Sans KR. This fix changes font selection rather than applying monitor-size rules or adjusting heading dimensions.
  • Remaining gaps: exact original production revision, browser/OS versions, OS scaling, and the 15.6-inch display resolution were not captured; the affected 32-inch display resolution is 2560 × 1440. Automated checks do not reproduce GPU/font rasterization. Offline/CDN-failure appearance, other engines, mobile, and dark-theme visual coverage were not newly verified for this font change.

Validation performed

  • website/.venv/Scripts/python.exe -X utf8 scripts/website.py translations check --language ko --strict — passed; 1,728/1,728 messages, no missing/fuzzy entries.
  • website/.venv/Scripts/python.exe -X utf8 scripts/test-website.py WebsiteTranslationChecks.test_all_readme_editions_preserve_code_targets_downloads_and_reciprocal_routes WebsiteTranslationChecks.test_every_reading_page_loads_theme_before_styles — 2 tests passed, including the new font assertions across generated editions and /rea/ HTTP routes.
  • website/.venv/Scripts/python.exe -X utf8 scripts/website.py check — shared HTML and catalog checks passed; 380 pages rendered, then the command failed at sharing-image generation because native Cairo is unavailable on this Windows host. Subsequent verification/suite stages were not reached.
  • Preview-only build using build_translations with sitemap and example-ZIP finalizers — 380 pages generated; sharing PNG generation was omitted. This is not a passing full website gate.
  • Public preview HTTP checks — Korean/English guide routes and shared CSS returned 200; served CSS matched the final source, and the Google Fonts link was present only in the Korean guide. The Google Fonts endpoint returned CSS declaring WOFF2 variable weight 100–900 for a Chrome user agent.
  • Python AST parsing, shared CSS parsing with tinycss2, and git diff --check — passed.
  • npm run check, npm run check:fast, and npm documentation checks were not run: locked dependencies are absent and the available Node 22.19.0/npm 10.9.3 do not match the pinned Node 24.18.0/npm 11.16.0 toolchain.

Compatibility, safety, and release

  • No breaking changes or migration steps; no release metadata changes.
  • Korean pages now request font resources from fonts.googleapis.com and fonts.gstatic.com. Text uses fallback fonts during loading or failure; the rendering improvement therefore depends on successful font delivery.
  • Human review should include the Google Fonts dependency and the verification gaps above. Provider verification is not applicable.

Author readiness

Human owner: @hi2242

  • I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work.
  • I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps.
  • I declare this PR ready for initial maintainer review.

Before merge

  • This PR addresses a concrete problem or an agreed enhancement.
  • Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff.
  • The PR has one focused outcome and the title follows type(scope): outcome.
  • Related issue is linked, or the reason for not linking one is stated above.
  • Tests cover changed observable behavior and meaningful failure paths.
  • Owning docs, contracts, and generated metadata are updated where needed.
  • User-visible CLI/MCP changes include representative output.
  • I checked the final diff for secrets, unrelated cleanup, and unsupported claims.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/morluto/rea/pull/3821 **Author:** [@hi2242](https://github.com/hi2242) **Created:** 10/15/2026 **Status:** ✅ Merged **Merged:** 10/16/2026 **Merged by:** [@morluto](https://github.com/morluto) **Base:** `main` ← **Head:** `fix/korean-font-rendering` --- ### 📝 Commits (2) - [`1a005be`](https://github.com/morluto/rea/commit/1a005bed4f00d862fd5d3c82d85a8610c82bf554) fix(website): use Noto Sans KR for Korean text - [`feabd78`](https://github.com/morluto/rea/commit/feabd78618d4515a1bb2a0ac25b4a03d2a0ef497) Merge remote-tracking branch 'origin/main' into sweep/3821 ### 📊 Changes **5 files changed** (+32 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `scripts/test-website.py` (+10 -0) 📝 `scripts/website_i18n.py` (+7 -1) 📝 `website/README.md` (+7 -0) 📝 `website/public/assets/styles.css` (+5 -5) 📝 `website/style-guide.md` (+3 -1) </details> ### 📄 Description ## Summary Fixes #3820. Prefer Noto Sans KR for Korean website text and load its variable webfont only on Korean editions, so the font choice can be reproduced on PCs without it installed. ## Problem and expected behavior I saw distorted strokes in “클릭 관찰” on a 32-inch monitor at some rendered sizes, including 100% browser zoom. I did not find the problem on the 15.6-inch display I checked. I retested the proposed preview on the affected device and confirmed the improved rendering shown below. This does not establish that all monitors of either size behave alike. The before/after screenshots retain a computed 28px size, 650 weight, and 37.8px line height. They show the CSS family lists, not per-glyph Rendered Fonts attribution; viewport widths differ, so this is not a pixel-diff test. | Before | After: retested on the affected device | | --- | --- | | ![Before: distorted Korean heading](https://raw.githubusercontent.com/hi2242/rea/703409b4ea2ee0f90c1dddae7805371497098cb4/korean-font/before.png) | ![After: Noto Sans KR preferred at the same computed size and weight](https://raw.githubusercontent.com/hi2242/rea/703409b4ea2ee0f90c1dddae7805371497098cb4/korean-font/after.png) | Additional manual checks: I checked Chrome and Edge on the affected 32-inch, 2560 × 1440 display. New Chrome screenshots at 80% and 125% browser zoom show no recurrence with Noto Sans KR. In a separate experiment with the original system-first stack, 32px looked normal at 100% zoom but distorted again at 90%, supporting the font-selection change instead of a size-only workaround. The [issue contains all four additional screenshots and their test conditions](https://github.com/morluto/rea/issues/3820). `display=swap` and local Korean fallback fonts were already included in this implementation. ## Change and scope - Put Noto Sans KR first in the Korean prose stack; keep shared monospace fonts first for Latin code glyphs. - Add the Google Fonts stylesheet when rendering a complete Korean edition. Other editions and English fallback pages do not request it. Use variable weights with `display=swap` and retain local fallbacks. - Extend the existing rendered-edition integration check to verify the font request's language scope, family, weight range, and loading mode. Document font delivery in the website README and style guide. ## Contract and boundary impact - Semantic owner and earliest changed stage: `render_page` owns the Korean edition's font resource; the shared stylesheet owns font selection. - Contribution scope fit and linked maintainer decision: ordinary website readability fix; advance capability scope approval is not applicable. - CLI/MCP, provider/bridge, Evidence/target authority, package/generated metadata, and installation contracts: not applicable to this website-only diff. - Browser compatibility: webfont-capable browsers; local font fallback remains available when Google Fonts cannot load. The rasterization cause is not established. Expected effects: - [ ] Read existing files or captured data. - [ ] Launch or attach to a process. - [ ] Inject instrumentation or run scripts/code. - [ ] Change process memory, registers, files, or configuration. - [x] Contact network services. - [ ] Recover protected code or work around protections. - [ ] Documentation or usability only; no target interaction. - [ ] Not sure yet; investigation or maintainer guidance needed. ## Evidence and regression coverage - Executed visual evidence: the screenshots above and my retest on the affected device. Chrome and Edge showed the original symptom during investigation; this is Chromium coverage, not independent browser-engine coverage. - Executed integration evidence: the existing all-editions consumer check now rejects missing Korean font requests or requests on other editions. The unmodified base has no Korean webfont link and would fail that new assertion; an automated base run was not performed. - Source-derived: the original stack prioritizes Latin/system families and Malgun Gothic over Noto Sans KR. This fix changes font selection rather than applying monitor-size rules or adjusting heading dimensions. - Remaining gaps: exact original production revision, browser/OS versions, OS scaling, and the 15.6-inch display resolution were not captured; the affected 32-inch display resolution is 2560 × 1440. Automated checks do not reproduce GPU/font rasterization. Offline/CDN-failure appearance, other engines, mobile, and dark-theme visual coverage were not newly verified for this font change. ## Validation performed - `website/.venv/Scripts/python.exe -X utf8 scripts/website.py translations check --language ko --strict` — passed; 1,728/1,728 messages, no missing/fuzzy entries. - `website/.venv/Scripts/python.exe -X utf8 scripts/test-website.py WebsiteTranslationChecks.test_all_readme_editions_preserve_code_targets_downloads_and_reciprocal_routes WebsiteTranslationChecks.test_every_reading_page_loads_theme_before_styles` — 2 tests passed, including the new font assertions across generated editions and `/rea/` HTTP routes. - `website/.venv/Scripts/python.exe -X utf8 scripts/website.py check` — shared HTML and catalog checks passed; 380 pages rendered, then the command failed at sharing-image generation because native Cairo is unavailable on this Windows host. Subsequent verification/suite stages were not reached. - Preview-only build using `build_translations` with sitemap and example-ZIP finalizers — 380 pages generated; sharing PNG generation was omitted. This is not a passing full website gate. - Public preview HTTP checks — Korean/English guide routes and shared CSS returned 200; served CSS matched the final source, and the Google Fonts link was present only in the Korean guide. The Google Fonts endpoint returned CSS declaring WOFF2 variable weight 100–900 for a Chrome user agent. - Python AST parsing, shared CSS parsing with `tinycss2`, and `git diff --check` — passed. - `npm run check`, `npm run check:fast`, and npm documentation checks were not run: locked dependencies are absent and the available Node 22.19.0/npm 10.9.3 do not match the pinned Node 24.18.0/npm 11.16.0 toolchain. ## Compatibility, safety, and release - No breaking changes or migration steps; no release metadata changes. - Korean pages now request font resources from `fonts.googleapis.com` and `fonts.gstatic.com`. Text uses fallback fonts during loading or failure; the rendering improvement therefore depends on successful font delivery. - Human review should include the Google Fonts dependency and the verification gaps above. Provider verification is not applicable. ## Author readiness Human owner: @hi2242 - [x] I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work. - [x] I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps. - [x] I declare this PR ready for initial maintainer review. ## Before merge - [ ] This PR addresses a concrete problem or an agreed enhancement. - [ ] Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff. - [ ] The PR has one focused outcome and the title follows `type(scope): outcome`. - [ ] Related issue is linked, or the reason for not linking one is stated above. - [ ] Tests cover changed observable behavior and meaningful failure paths. - [ ] Owning docs, contracts, and generated metadata are updated where needed. - [ ] User-visible CLI/MCP changes include representative output. - [ ] I checked the final diff for secrets, unrelated cleanup, and unsupported claims. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
bsakaguchi 2026-10-31 01:10:28 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
morluto/rea#5922
No description provided.