vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(lyrics): force Japanese font shaping for am-lyrics component

Browse source 
Fixes kanji characters like 刀 rendering as simplified Chinese instead
of Japanese when displayed in lyrics. The root cause is the document
lang="en" attribute causing the browser to use English font shaping.

Added font-language-override: 'JA' to am-lyrics elements so the
browser treats lyric text as Japanese regardless of the page's lang
attribute. Applied to both side panel and fullscreen lyrics views.
This commit is contained in:
Dorian Gironde 2026-04-19 14:01:19 +02:00 committed by edideaur
parent d959a1a852
commit 20cf96bbd9
1 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
styles.css
View file

@ -5698,6 +5698,11 @@ input:checked + .slider::before {
container-name: sidepanel; container-name: sidepanel;
} }
/* Force Japanese font shaping so kanji like 刀 render as Japanese glyphs, not simplified Chinese */
am-lyrics {
font-language-override: 'JA';
}
@container sidepanel (min-width: 500px) { @container sidepanel (min-width: 500px) {
.panel-content am-lyrics { .panel-content am-lyrics {
--lyplus-font-size-base: 36px; --lyplus-font-size-base: 36px;
@ -10982,6 +10987,9 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
'Noto Sans Malayalam', 'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar', 'Noto Sans Malayalam', 'Noto Sans Sinhala', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Myanmar',
'Noto Sans Georgian', 'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, sans-serif; 'Noto Sans Georgian', 'Noto Sans Armenian', 'Noto Sans Ethiopic', system-ui, sans-serif;
/* Force Japanese font shaping so kanji like 刀 render as Japanese, not simplified Chinese */
font-language-override: 'JA';
--lyplus-font-size-base: clamp(34px, 3vw, 52px); --lyplus-font-size-base: clamp(34px, 3vw, 52px);
--lyplus-padding-line: 8px; --lyplus-padding-line: 8px;
--lyplus-text-color: rgb(246, 244, 239, 0.08); --lyplus-text-color: rgb(246, 244, 239, 0.08);