/* ── WHEN A READER TRANSLATES THE PAGE ──────────────────────────────────────── Fifths' three faces (Space Mono, DM Sans, Playfair Display) carry Latin only. When Chrome Translate puts Japanese, Chinese, Korean, Arabic or Hebrew into the page, the browser borrowed whatever its generic fallback was: for Space Mono's `monospace` that is a blocky monospace CJK face (the "dot-matrix" look). 1. Each face gets a system companion for those scripts, so a label in Space Mono reads in a clean gothic and a Playfair title in a Mincho. Nothing is downloaded (local() only) and Latin text is untouched (unicode-range). 2. Translated text (Chrome wraps it in ) drops the tracking set for Latin capitals, which spreads CJK apart and breaks Arabic joins, and is never set below a readable size. The italic faces point at upright fonts, so these scripts are never slanted. Text held with translate="no" is not wrapped, so the brand, chord names and numerals keep their own setting. Spec + before/after: docs/2026-10-16-translated-lettering.md */ /* Each face repeats a weight and style Google Fonts declares for the family: Chrome picks a weight/style group first and reads unicode-range only inside it (a "100 900" face was never consulted). An italic face points at an upright local font, so these scripts are never slanted. Regenerate: python3 tools/translate/faces.py */ /* FACES — generated by tools/translate/faces.py */ /* Japanese kana, CJK ideographs, CJK punctuation and full-width forms */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: local('Hiragino Sans W3'), local('HiraginoSans-W3'), local('Hiragino Kaku Gothic ProN W3'), local('HiraKakuProN-W3'), local('Yu Gothic UI'), local('Yu Gothic Medium'), local('YuGothic-Medium'), local('Meiryo'), local('Noto Sans JP'), local('Noto Sans CJK JP Regular'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; src: local('Hiragino Sans W6'), local('HiraginoSans-W6'), local('Hiragino Kaku Gothic ProN W6'), local('HiraKakuProN-W6'), local('Yu Gothic UI Bold'), local('Yu Gothic Bold'), local('YuGothic-Bold'), local('Meiryo Bold'), local('Noto Sans JP Bold'), local('Noto Sans CJK JP Bold'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; src: local('Hiragino Sans W3'), local('HiraginoSans-W3'), local('Hiragino Kaku Gothic ProN W3'), local('HiraKakuProN-W3'), local('Yu Gothic UI'), local('Yu Gothic Medium'), local('YuGothic-Medium'), local('Meiryo'), local('Noto Sans JP'), local('Noto Sans CJK JP Regular'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; src: local('Hiragino Sans W3'), local('HiraginoSans-W3'), local('Hiragino Kaku Gothic ProN W3'), local('HiraKakuProN-W3'), local('Yu Gothic UI'), local('Yu Gothic Medium'), local('YuGothic-Medium'), local('Meiryo'), local('Noto Sans JP'), local('Noto Sans CJK JP Regular'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; src: local('Hiragino Sans W3'), local('HiraginoSans-W3'), local('Hiragino Kaku Gothic ProN W3'), local('HiraKakuProN-W3'), local('Yu Gothic UI'), local('Yu Gothic Medium'), local('YuGothic-Medium'), local('Meiryo'), local('Noto Sans JP'), local('Noto Sans CJK JP Regular'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; src: local('Hiragino Sans W3'), local('HiraginoSans-W3'), local('Hiragino Kaku Gothic ProN W3'), local('HiraKakuProN-W3'), local('Yu Gothic UI'), local('Yu Gothic Medium'), local('YuGothic-Medium'), local('Meiryo'), local('Noto Sans JP'), local('Noto Sans CJK JP Regular'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: local('Hiragino Mincho ProN W3'), local('HiraMinProN-W3'), local('Yu Mincho Regular'), local('YuMincho-Regular'), local('Yu Mincho'), local('Noto Serif JP'), local('Noto Serif CJK JP Regular'), local('MS Mincho'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: local('Hiragino Mincho ProN W6'), local('HiraMinProN-W6'), local('Yu Mincho Demibold'), local('YuMincho-Demibold'), local('Noto Serif JP Bold'), local('Noto Serif CJK JP Bold'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: local('Hiragino Mincho ProN W6'), local('HiraMinProN-W6'), local('Yu Mincho Demibold'), local('YuMincho-Demibold'), local('Noto Serif JP Bold'), local('Noto Serif CJK JP Bold'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: local('Hiragino Mincho ProN W3'), local('HiraMinProN-W3'), local('Yu Mincho Regular'), local('YuMincho-Regular'), local('Yu Mincho'), local('Noto Serif JP'), local('Noto Serif CJK JP Regular'), local('MS Mincho'); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; } /* Korean Hangul */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular'), local('Malgun Gothic'), local('Noto Sans KR'), local('Noto Sans CJK KR Regular'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; src: local('AppleSDGothicNeo-Bold'), local('Apple SD Gothic Neo Bold'), local('Malgun Gothic Bold'), local('Noto Sans KR Bold'), local('Noto Sans CJK KR Bold'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular'), local('Malgun Gothic'), local('Noto Sans KR'), local('Noto Sans CJK KR Regular'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular'), local('Malgun Gothic'), local('Noto Sans KR'), local('Noto Sans CJK KR Regular'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular'), local('Malgun Gothic'), local('Noto Sans KR'), local('Noto Sans CJK KR Regular'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular'), local('Malgun Gothic'), local('Noto Sans KR'), local('Noto Sans CJK KR Regular'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: local('AppleMyungjo'), local('Batang'), local('Noto Serif KR'), local('Noto Serif CJK KR Regular'), local('AppleSDGothicNeo-Regular'), local('Malgun Gothic'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: local('AppleSDGothicNeo-Bold'), local('Malgun Gothic Bold'), local('Noto Serif KR Bold'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: local('AppleSDGothicNeo-Bold'), local('Malgun Gothic Bold'), local('Noto Serif KR Bold'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: local('AppleMyungjo'), local('Batang'), local('Noto Serif KR'), local('Noto Serif CJK KR Regular'), local('AppleSDGothicNeo-Regular'), local('Malgun Gothic'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; } /* Arabic (also Persian and Urdu letters) */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: local('GeezaPro'), local('Geeza Pro Regular'), local('Segoe UI'), local('Noto Sans Arabic'), local('Tahoma'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; src: local('GeezaPro-Bold'), local('Geeza Pro Bold'), local('Segoe UI Bold'), local('Noto Sans Arabic Bold'), local('Tahoma Bold'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; src: local('GeezaPro'), local('Geeza Pro Regular'), local('Segoe UI'), local('Noto Sans Arabic'), local('Tahoma'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; src: local('GeezaPro'), local('Geeza Pro Regular'), local('Segoe UI'), local('Noto Sans Arabic'), local('Tahoma'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; src: local('GeezaPro'), local('Geeza Pro Regular'), local('Segoe UI'), local('Noto Sans Arabic'), local('Tahoma'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; src: local('GeezaPro'), local('Geeza Pro Regular'), local('Segoe UI'), local('Noto Sans Arabic'), local('Tahoma'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: local('Noto Naskh Arabic'), local('GeezaPro'), local('Geeza Pro Regular'), local('Times New Roman'), local('Segoe UI'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: local('Noto Naskh Arabic Bold'), local('GeezaPro-Bold'), local('Geeza Pro Bold'), local('Times New Roman Bold'), local('Segoe UI Bold'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: local('Noto Naskh Arabic Bold'), local('GeezaPro-Bold'), local('Geeza Pro Bold'), local('Times New Roman Bold'), local('Segoe UI Bold'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: local('Noto Naskh Arabic'), local('GeezaPro'), local('Geeza Pro Regular'), local('Times New Roman'), local('Segoe UI'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* Hebrew */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'), local('Noto Sans Hebrew'), local('Arial'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; src: local('ArialHebrew-Bold'), local('Arial Hebrew Bold'), local('Segoe UI Bold'), local('Noto Sans Hebrew Bold'), local('Arial Bold'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'), local('Noto Sans Hebrew'), local('Arial'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'), local('Noto Sans Hebrew'), local('Arial'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'), local('Noto Sans Hebrew'), local('Arial'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'), local('Noto Sans Hebrew'), local('Arial'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: local('Noto Serif Hebrew'), local('Times New Roman'), local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: local('Noto Serif Hebrew Bold'), local('Times New Roman Bold'), local('ArialHebrew-Bold'), local('Segoe UI Bold'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: local('Noto Serif Hebrew Bold'), local('Times New Roman Bold'), local('ArialHebrew-Bold'), local('Segoe UI Bold'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: local('Noto Serif Hebrew'), local('Times New Roman'), local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'); unicode-range: U+0590-05FF, U+FB1D-FB4F; } /* END FACES */ /* Chinese shares the ideograph block with Japanese but needs its own letterforms (simplified characters are missing from Japanese faces), so it is set whole. */ html:lang(zh) :is(font, [data-l10n-own]) { font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif; } html:lang(zh-TW) :is(font, [data-l10n-own]), html:lang(zh-HK) :is(font, [data-l10n-own]) { font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif; } /* Chinese is set whole (above), so the upright italic faces never apply to it: stop the browser slanting it instead (round 2: zh was the one script still faked-italic). */ html:lang(zh) :is(font, [data-l10n-own]) { font-synthesis: none; } /* The Voicing pull-tab sets its label sideways (vertical-rl, turned 180°) for Latin. Japanese, Chinese and Korean are written top-to-bottom in that same column, so the characters stand upright, read downward and are not turned. */ html:is(:lang(ja), :lang(zh), :lang(ko)) #tools-toggle .tt-lbl { transform: none; text-orientation: upright; letter-spacing: 0; } /* Translated text in these scripts: no Latin tracking, no faked italic, a floor. Floors: CJK needs ~12-13px before dense characters keep their strokes; Hebrew reads light at Latin sizes; Arabic's shorter letter bodies and meaningful dots need about a fifth more than Latin. 13px / 14px measured to fit the header and strip at 1440. */ /* [data-l10n-own]: a label Fifths translated itself (src/l10n.js). It is held from Translate, so Chrome never wraps it in ; it gets the same setting. */ html:is(:lang(ja), :lang(zh), :lang(ko), :lang(he), :lang(iw), :lang(yi)) :is(font, [data-l10n-own]) { letter-spacing: normal; font-size: max(1em, 13px); } html:is(:lang(ar), :lang(fa), :lang(ur), :lang(ps)) :is(font, [data-l10n-own]) { letter-spacing: normal; font-size: max(1em, 14px); } /* No font-style rule here: Chrome wraps every text node, Latin numbers included, and "font-style: normal" straightened 120 / GDAE / B (r8p302, seen live). The italic faces above already point these scripts at upright fonts, so they are never slanted while Latin keeps its italic. */ /* Translated words are longer than the English capitals the header buttons were tracked for (German pushed the tune title to zero width at 1440). On a translated page the header buttons close up a little so the title keeps its room. */ html:is(.translated-ltr, .translated-rtl) .app-header .letterpress-btn { letter-spacing: 0.06em; padding-left: 9px; padding-right: 9px; } /* r8p371 — the phone/tablet footers in Japanese break only at the 、, never inside a word (on a 302px phone フォーム split as フ / ォーム, a small kana opening the line). */ html:lang(ja) :is(.cd-deskfoot, .cd-turn-txt) { word-break: keep-all; line-break: strict; overflow-wrap: anywhere; } /* anywhere: at large text a phrase wider than the line still wraps */