morluto/rea

Fork 0

mirror of https://github.com/morluto/rea.git synced 2026-11-05 06:45:22 +00:00

[GH-ISSUE #3820] [Bug] Korean guide headings render distorted at some display scales #1478

New issue

Closed

opened 2026-10-16 21:05:56 +00:00 by bsakaguchi · 5 comments

bsakaguchi commented

2026-10-16 21:05:56 +00:00

Owner

Originally created by @hi2242 on GitHub (Oct 15, 2026).
Original GitHub issue: https://github.com/morluto/rea/issues/3820

Before submitting

I searched the open and closed issues for a related report.
I removed credentials, tokens, private paths, and sensitive target data.

Area

Documentation — Korean website typography.

Observed behavior

The Korean “클릭 관찰” heading on /ko/guides/ has distorted strokes at some rendered sizes. I saw this on a 32-inch monitor at 2560 × 1440 in Chrome and Edge, including at 100% browser zoom. I did not find it on the 15.6-inch display I checked. This is not a claim that all 32-inch monitors are affected.

Changing the font to Noto Sans KR improved the text. I also retested the proposed preview on the device that showed the problem; the before/after screenshots below show the result. Both screenshots show a computed font size of 28px, font weight of 650, and line height of 37.8px.

Reproduction

Open https://rea.tools/ko/guides/ on the affected display at 100% browser zoom.
Inspect the “클릭 관찰” heading near the bottom of the page.
Compare the glyph strokes with the proposed Noto Sans KR preview on that same device.

With the original system-first font stack, changing the heading to 32px looked normal at 100% browser zoom, but the distortion returned at 90%. The screenshots below document this size-only experiment. NOT_ENOUGH_INFO: the complete set of affected combinations and repeat frequency was not recorded.

Expected behavior

The heading should have readable, consistent Hangul strokes at ordinary display scales. The after screenshot provides the comparison with Noto Sans KR at the same computed size and weight.

Impact and scope

Visual readability of Korean guide text on the affected display. The 15.6-inch check did not show the problem. Other hardware and browser engines have not been established by these checks.

REA version

Proposed fix based on source revision 4692bb33300c7cb77b095b6cc0c33da861c1b860. NOT_ENOUGH_INFO: the exact production commit serving the original observation was not captured.

Runtime and platform

Windows; affected display: 32-inch, 2560 × 1440. I checked Chrome and Edge; the additional zoom screenshots below are from Chrome. The discussion records devicePixelRatio: 1 at one test point. NOT_ENOUGH_INFO: exact OS/browser versions, OS scaling, GPU details, and the 15.6-inch display resolution were not recorded.

Target and artifact context

Korean static website, /ko/guides/; “클릭 관찰” (Observe a click) heading.

Interface

Other — website.

Earliest failure stage

Unknown — the visual symptom occurs during browser text rendering; the underlying rasterization cause is not established.

Relevant output or evidence

Before

After: retest on the affected device

The screenshots show computed CSS families, not DevTools’ Rendered Fonts glyph attribution. They have different viewport widths and are visual evidence rather than a controlled pixel comparison.

Additional zoom checks with Noto Sans KR

Following the zoom-check suggestion, I checked the modified page on the affected 32-inch, 2560 × 1440 display. The “클릭 관찰” heading showed no recurrence in these Chrome checks at 80% and 125% browser zoom. These checks retain the proposed font change and the original CSS heading dimensions.

Chrome, 80% browser zoom	Chrome, 125% browser zoom

Size-only experiment with the original font stack

Before choosing the font change, I tried increasing the heading to 32px with the original system-first stack. It looked normal at 100% browser zoom, but the rendering problem returned at 90%. Both captures below show 32px and weight 650 in Computed. This is why I chose to change font selection rather than increase the heading size; the 90% failure belongs to the original-stack experiment.

Original stack, 32px, Chrome 100%	Original stack, 32px, Chrome 90%

Font loading strategy

The implementation in #3821 already requests display=swap and retains local Korean fallback fonts, including Apple SD Gothic Neo and Malgun Gothic. These are source-verified settings; an offline or blocked-CDN visual test has not been performed. The new screenshots extend the display/zoom evidence without changing those settings.

Analysis or suspected cause

Source-derived: the original Korean stack puts Latin/system families and Malgun Gothic before Noto Sans KR, and only selects locally installed fonts. Font selection can therefore differ across PCs. The successful font substitution supports changing that selection, but does not establish a defective font file or a monitor-size-specific cause.

Proposed fix (#3821): prefer Noto Sans KR in the Korean stack and load its variable webfont only for Korean editions, using display=swap and retaining local fallbacks if the font service is unavailable. The 32px/90% experiment above shows why increasing font size alone did not resolve the observed problem.

Originally created by @hi2242 on GitHub (Oct 15, 2026). Original GitHub issue: https://github.com/morluto/rea/issues/3820 ## Before submitting - [x] I searched the open and closed issues for a related report. - [x] I removed credentials, tokens, private paths, and sensitive target data. ## Area Documentation — Korean website typography. ## Observed behavior The Korean “클릭 관찰” heading on `/ko/guides/` has distorted strokes at some rendered sizes. I saw this on a 32-inch monitor at 2560 × 1440 in Chrome and Edge, including at 100% browser zoom. I did not find it on the 15.6-inch display I checked. This is not a claim that all 32-inch monitors are affected. Changing the font to Noto Sans KR improved the text. I also retested the proposed preview on the device that showed the problem; the before/after screenshots below show the result. Both screenshots show a computed font size of 28px, font weight of 650, and line height of 37.8px. ## Reproduction 1. Open `https://rea.tools/ko/guides/` on the affected display at 100% browser zoom. 2. Inspect the “클릭 관찰” heading near the bottom of the page. 3. Compare the glyph strokes with the proposed Noto Sans KR preview on that same device. With the original system-first font stack, changing the heading to 32px looked normal at 100% browser zoom, but the distortion returned at 90%. The screenshots below document this size-only experiment. `NOT_ENOUGH_INFO`: the complete set of affected combinations and repeat frequency was not recorded. ## Expected behavior The heading should have readable, consistent Hangul strokes at ordinary display scales. The after screenshot provides the comparison with Noto Sans KR at the same computed size and weight. ## Impact and scope Visual readability of Korean guide text on the affected display. The 15.6-inch check did not show the problem. Other hardware and browser engines have not been established by these checks. ## REA version Proposed fix based on source revision `4692bb33300c7cb77b095b6cc0c33da861c1b860`. `NOT_ENOUGH_INFO`: the exact production commit serving the original observation was not captured. ## Runtime and platform Windows; affected display: 32-inch, 2560 × 1440. I checked Chrome and Edge; the additional zoom screenshots below are from Chrome. The discussion records `devicePixelRatio: 1` at one test point. `NOT_ENOUGH_INFO`: exact OS/browser versions, OS scaling, GPU details, and the 15.6-inch display resolution were not recorded. ## Target and artifact context Korean static website, `/ko/guides/`; “클릭 관찰” (`Observe a click`) heading. ## Interface Other — website. ## Earliest failure stage Unknown — the visual symptom occurs during browser text rendering; the underlying rasterization cause is not established. ## Relevant output or evidence **Before** ![Before: distorted Korean heading and computed typography](https://raw.githubusercontent.com/hi2242/rea/703409b4ea2ee0f90c1dddae7805371497098cb4/korean-font/before.png) **After: retest on the affected device** ![After: Noto Sans KR first in the font stack, with the same computed size and weight](https://raw.githubusercontent.com/hi2242/rea/703409b4ea2ee0f90c1dddae7805371497098cb4/korean-font/after.png) The screenshots show computed CSS families, not DevTools’ Rendered Fonts glyph attribution. They have different viewport widths and are visual evidence rather than a controlled pixel comparison. ### Additional zoom checks with Noto Sans KR Following [the zoom-check suggestion](https://github.com/morluto/rea/issues/3820#issuecomment-6184256972), I checked the modified page on the affected 32-inch, 2560 × 1440 display. The “클릭 관찰” heading showed no recurrence in these Chrome checks at 80% and 125% browser zoom. These checks retain the proposed font change and the original CSS heading dimensions. | Chrome, 80% browser zoom | Chrome, 125% browser zoom | | --- | --- | | ![Modified page with Noto Sans KR at 80 percent browser zoom](https://raw.githubusercontent.com/hi2242/rea/96c10efe462a5d3d6f4fad3dfe7f023612857f0a/korean-font/noto-zoom-80.png) | ![Modified page with Noto Sans KR at 125 percent browser zoom](https://raw.githubusercontent.com/hi2242/rea/96c10efe462a5d3d6f4fad3dfe7f023612857f0a/korean-font/noto-zoom-125.png) | ### Size-only experiment with the original font stack Before choosing the font change, I tried increasing the heading to 32px with the original system-first stack. It looked normal at 100% browser zoom, but the rendering problem returned at 90%. Both captures below show 32px and weight 650 in Computed. This is why I chose to change font selection rather than increase the heading size; the 90% failure belongs to the original-stack experiment. | Original stack, 32px, Chrome 100% | Original stack, 32px, Chrome 90% | | --- | --- | | ![Original font stack at 32px and 100 percent zoom, with normal rendering](https://raw.githubusercontent.com/hi2242/rea/96c10efe462a5d3d6f4fad3dfe7f023612857f0a/korean-font/original-32px-zoom-100.png) | ![Original font stack at 32px and 90 percent zoom, with distortion returning](https://raw.githubusercontent.com/hi2242/rea/96c10efe462a5d3d6f4fad3dfe7f023612857f0a/korean-font/original-32px-zoom-90.png) | ### Font loading strategy The implementation in #3821 already requests `display=swap` and retains local Korean fallback fonts, including Apple SD Gothic Neo and Malgun Gothic. These are source-verified settings; an offline or blocked-CDN visual test has not been performed. The new screenshots extend the display/zoom evidence without changing those settings. ## Analysis or suspected cause Source-derived: the original Korean stack puts Latin/system families and Malgun Gothic before Noto Sans KR, and only selects locally installed fonts. Font selection can therefore differ across PCs. The successful font substitution supports changing that selection, but does not establish a defective font file or a monitor-size-specific cause. Proposed fix (#3821): prefer Noto Sans KR in the Korean stack and load its variable webfont only for Korean editions, using `display=swap` and retaining local fallbacks if the font service is unavailable. The 32px/90% experiment above shows why increasing font size alone did not resolve the observed problem.

bsakaguchi commented

2026-10-16 21:05:58 +00:00

Author

Owner

@XinwangTao commented on GitHub (Oct 15, 2026):

The font-stack ordering analysis matches what I would expect: putting Malgun Gothic and the system families before Noto Sans KR lets the browser pick a locally installed font whose hinting/rasterization differs at certain sizes, and that choice legitimately varies per machine — which is also why the bug showed up on the 32-inch display but not the 15.6-inch one. Making Noto Sans KR the preferred font for Korean editions should make rendering deterministic across displays. Two small suggestions for #3821: (1) keep a font-display strategy (swap is fine for headings) so the local fallback path still works if the webfont service is unavailable; (2) the before/after evidence is captured at 28px/650 weight — it would help to also spot-check common zoom levels (e.g. 80% and 125%) after the change, since the report notes the distortion could reappear at some size/zoom combinations.

@XinwangTao commented on GitHub (Oct 15, 2026): The font-stack ordering analysis matches what I would expect: putting Malgun Gothic and the system families before Noto Sans KR lets the browser pick a locally installed font whose hinting/rasterization differs at certain sizes, and that choice legitimately varies per machine — which is also why the bug showed up on the 32-inch display but not the 15.6-inch one. Making Noto Sans KR the preferred font for Korean editions should make rendering deterministic across displays. Two small suggestions for #3821: (1) keep a font-display strategy (swap is fine for headings) so the local fallback path still works if the webfont service is unavailable; (2) the before/after evidence is captured at 28px/650 weight — it would help to also spot-check common zoom levels (e.g. 80% and 125%) after the change, since the report notes the distortion could reappear at some size/zoom combinations.

bsakaguchi commented

2026-10-16 21:05:58 +00:00

Author

Owner

@hi2242 commented on GitHub (Oct 15, 2026):

@XinwangTao Thanks for the helpful suggestions!

display=swap and the local Korean fallback font stack were already included in #3821. I've made that explicit in the issue and PR description.
I've added Chrome screenshots at 80% and 125% browser zoom from the affected 32-inch, 2560 × 1440 display; the heading showed no recurrence in those checks. I checked both Chrome and Edge, and the attached zoom screenshots are from Chrome.

I also added the earlier size-only experiment: with the original system-first font stack, 32px looked normal at 100% zoom, but the distortion returned at 90%. That is why I chose to change the font selection rather than increase the heading size.

The additional screenshots and conditions are now in this issue, with a summary linked from #3821.

@hi2242 commented on GitHub (Oct 15, 2026): @XinwangTao Thanks for the helpful suggestions! 1. `display=swap` and the local Korean fallback font stack were already included in #3821. I've made that explicit in the issue and PR description. 2. I've added Chrome screenshots at **80% and 125% browser zoom** from the affected **32-inch, 2560 × 1440** display; the heading showed no recurrence in those checks. I checked both Chrome and Edge, and the attached zoom screenshots are from Chrome. I also added the earlier size-only experiment: with the original system-first font stack, **32px looked normal at 100% zoom, but the distortion returned at 90%**. That is why I chose to change the font selection rather than increase the heading size. The additional screenshots and conditions are now in this issue, with a summary linked from #3821.

bsakaguchi commented

2026-10-16 21:05:58 +00:00

Author

Owner

@XinwangTao commented on GitHub (Oct 15, 2026):

Agree that switching the font family is the right call here rather than bumping the heading size — your 32px/90% test shows the distortion is a rasterization/hinting issue of the locally picked font, not a size threshold, so the size-only workaround would be fragile across zoom levels. The extra 80%/125% screenshots and the explicit display=swap + local fallback in #3821 close the gaps I raised. Thanks for the thorough verification.

@XinwangTao commented on GitHub (Oct 15, 2026): Agree that switching the font family is the right call here rather than bumping the heading size — your 32px/90% test shows the distortion is a rasterization/hinting issue of the locally picked font, not a size threshold, so the size-only workaround would be fragile across zoom levels. The extra 80%/125% screenshots and the explicit display=swap + local fallback in #3821 close the gaps I raised. Thanks for the thorough verification.

bsakaguchi commented

2026-10-16 21:05:59 +00:00

Author

Owner

@XinwangTao commented on GitHub (Oct 15, 2026):

@XinwangTao commented on GitHub (Oct 15, 2026): Agree that switching the font family is the right call here rather than bumping the heading size — your 32px/90% test shows the distortion is a rasterization/hinting issue of the locally picked font, not a size threshold, so the size-only workaround would be fragile across zoom levels. The extra 80%/125% screenshots and the explicit display=swap + local fallback in #3821 close the gaps I raised. Thanks for the thorough verification.

bsakaguchi commented

2026-10-16 21:05:59 +00:00

Author

Owner

@hi2242 commented on GitHub (Oct 15, 2026):

@XinwangTao Thanks for the thoughtful feedback and for taking the time to review the additional checks. Your suggestions helped me strengthen the verification and explain the font change more clearly. I appreciate your help!

@hi2242 commented on GitHub (Oct 15, 2026): @XinwangTao Thanks for the thoughtful feedback and for taking the time to review the additional checks. Your suggestions helped me strengthen the verification and explain the font change more clearly. I appreciate your help!

bsakaguchi closed this issue

2026-10-17 21:02:00 +00:00

bsakaguchi referenced this issue

2026-10-17 21:11:47 +00:00

[PR #1478] [CLOSED] feat(setup): register the Pi coding agent #2916