/* * **三語層**：語言切換器 ＋ 各語言的字型指派。六頁都載這一份（英文頁也要 —— 切換器在每一頁的頁首）。 * 殼層在 `style.css`，landing 區塊在 `landing.css`／`hero.css`，隱私內文在 `privacy.css`。 * * 字型的分派方式是**在 `` 上覆寫 token**，不是逐條規則改 `font-family`： * 版面規則（`.hero h1`、`.doc h2`…）全都已經走 `var(--font-display)` / `var(--font-hero)` / * `var(--font-body)`，所以換語言只要換那三顆 token 的值，樣式表其他地方一行都不必動。 * 新增第四語 = 這裡多一個 `html[lang^='xx']` 區塊，加上該頁的 Google Fonts 連結。 * * 🔴 **CJK 的字型只在自己那一語的頁面載**（各頁 `` 的連結，每語兩支）：繁中是 * `LXGW WenKai TC`（標題）＋ `Noto Sans TC`（內文），日語是 `Zen Maru Gothic`（標題）＋ * `Noto Sans JP`（內文）。CJK 字型檔比拉丁大一個量級（Google Fonts 會按 unicode-range 切成 * 上百個子集、只下載真的用到的那幾塊），讓英文頁一起背它們就是白付一整個字型家族的請求。 * * 🔴 **改 CJK 頁的文案時：一段文字不要在原始碼裡折行**（四份 CJK HTML 的 `` 各有一行指回這裡）。 * HTML 會把原始碼的換行算成一個空格，而 Chrome **不會**把兩個 CJK 之間的段落換行吃掉 —— * 實測 `場所として\n覚えておく` 比同一行寬 **5.67px**，畫面上就是句子中間裂開一個洞。 * 跨標籤的版本更隱形：`譯文與\n英文版` 在原始碼上換行兩側不是 CJK、在畫面上是。 * CJK↔拉丁的交界折行則**沒事**（那裡本來就該有一個空格，換行剛好收斂成它）。 * type-check、lint、對比度探針對這一族全部是綠的 —— 它不是錯誤，是多一個空格。 * 三語化那一輪光是把段落照 120 字元折行就種了 51 處，全部靠一支渲染層稽核才挖出來 *（讀 `innerText`、找同一段裡兩個 CJK 之間的空格；`textContent` 不行，它沒有區塊邊界、 * 會把上一段的句號跟下一段的第一個字判成相鄰）。 * * 🔴 **拉丁字仍走 Inter**：`--font-body` 的第一順位是 `Inter`，CJK 排它後面 —— * 一行中文裡夾的 `Onemark` / `GitHub` / `Cmd` 就會落在 Inter 上，跟英文頁是同一顆字。 * 標題反過來：CJK 字型排第一，讓標題裡的 `Onemark` 跟著中日文字一起走那支手寫／圓體， * 整句標題才是同一個聲調（`Bricolage Grotesque` 與 `Chelsea Market` 在 CJK 頁**不載**， * 所以也不留在後備鏈裡 —— 留一個不會下載的家族名只是騙人）。 */ /* ---------- 繁體中文 ---------- */ html[lang^='zh'] { --font-display: 'LXGW WenKai TC', 'Noto Sans TC', ui-sans-serif, -apple-system, 'PingFang TC', sans-serif; --font-hero: var(--font-display); --font-body: 'Inter', 'Noto Sans TC', ui-sans-serif, -apple-system, 'PingFang TC', sans-serif; } /* ---------- 日本語 ---------- */ html[lang^='ja'] { --font-display: 'Zen Maru Gothic', 'Noto Sans JP', ui-rounded, -apple-system, 'Hiragino Maru Gothic ProN', sans-serif; --font-hero: var(--font-display); --font-body: 'Inter', 'Noto Sans JP', ui-sans-serif, -apple-system, 'Hiragino Sans', sans-serif; } /* ---------- CJK 共用的字身微調 ---------- */ /* * 🔴 **每個值都是為 CJK 重新量的，不是從拉丁那組沿用**（跟 `hero.css` 對 Chelsea Market * 做的事同一套判準：換字型就得重量，不是「看起來差不多」）： * * - `letter-spacing: 0` —— 殼層的 `h1,h2,h3` 訂 -0.025em，那是無襯線拉丁大標收緊才不鬆散。 * 方塊字本來就等寬排列、字面已經貼滿字身，再收 2.5% 會讓相鄰兩字的筆畫直接碰到。 * - `word-break: auto-phrase` —— **日語標題的斷行點靠它才對**。CJK 預設可以在任何兩字之間斷， * 於是「ブックマーク」「ダウンロード」這種外來語會被劈成兩行（實測 4 行案劈了兩個、3 行案劈了 * 一個），在日文排版裡是明顯的錯。`auto-phrase` 讓引擎照文節斷，同一句就變成 * 「すべてのタブ、／ブックマーク、／ダウンロードを／ひとつのパネルに。」四個語意完整的段。 * 對中文是 no-op（實測折行數與不加時逐格相同），所以擺共用區、不必分語言各寫一次； * 不支援的瀏覽器退回 `normal`，也就是現在這個站在它們上面本來的樣子。 * ⚠️ 只上標題不上內文：這條要跑一次語言模型斷詞，長文的成本不划算，收益也小 * （內文的行長本來就有十幾二十個字，劈到外來語的機率遠低於九個字的大標）。 * - `text-wrap: balance` 留著（殼層設的）—— 跟 `auto-phrase` 疊用沒有衝突。 */ html[lang^='zh'] :is(h1, h2, h3), html[lang^='ja'] :is(h1, h2, h3) { letter-spacing: 0; word-break: auto-phrase; } /* * 首屏大標。`font-weight` 要按回 700：`hero.css` 把它訂成 400 是因為 Chelsea Market * **只有 400 一個字重**（不按回去瀏覽器會合成偽粗體）。這兩支都有真正的 700， * 而首屏那句要的是跟拉丁版同一種份量。 * * `line-height: 1.35` —— 拉丁那組是 1.18。CJK 沒有 x-height 可以省、整個字身塞滿字面， * 1.18 會讓上下兩行的筆畫看起來黏成一塊。 */ html[lang^='zh'] .hero h1, html[lang^='ja'] .hero h1 { font-weight: 700; line-height: 1.35; } /* * 🔴 **`max-width` 的兩個值是掃出來的，`em` 在這裡也不是同一件事**：CJK 的 `em` 幾乎等於一個字， * 所以 `8.75em ≈ 8.75 個字`，跟 `hero.css` 那個為 Chelsea Market 量的 `9em` 沒有可比性 *（那支的「0」比整句窄兩成，`ch` 與 `em` 在它身上都會低估行寬）。 * * 掃法：1440 寬、`auto-phrase` 開著，逐格改 `max-width` 讀折行數，取落在目標行數的**區間中點**。 * * 繁中（20 字） 3 行 ＝ 7em–10.5em（6.5em 以下折成 4 行、11.5em 以上收成 2 行）⇒ 取 8.75em * 日語（30 字） 4 行 ＝ 9.5em–12.5em（8.75em 以下折成 5 行、14em 以上收成 3 行）⇒ 取 10.5em * * 上界另外被左欄夾住：1440 寬時那一欄只有 11.3em，超過就是寫了也不生效的死值。 * * **行數的判準是視覺份量、不是行數對齊**：拉丁版 4 行 ＝ 54×1.18×4 ＝ 255px；繁中 3 行 ＝ 219px、 * 日語 4 行 ＝ 292px，一個少 14%、一個多 14%，離拉丁那塊一樣近 —— 也就是塊高這把尺在這裡選不出 * 答案。改用「同一個字級下 CJK 的墨量比拉丁重」來選：繁中 20 個方塊字排 4 行會變成一根又細又高的 * 字柱（而且 5 個字一行會把「書籤」劈開），排 3 行才讀得出是一句標題；日語 30 個假名排 3 行則會 * 撐到 20 個字一行、比 `.lead` 還長，4 行才是標題的比例。 * * 這兩個值在 900／620／390 都維持同樣的行數（單欄之後左欄放寬到 22.5／16.8／10.1em，兩個值都還在 * 區間內），所以**不必像拉丁版那樣再開一條 900px 的覆寫** —— `hero.css` 那條 `12em` 的權重比這裡低 *（`.hero h1` 對上 `html[lang^='…'] .hero h1`），碰不到這兩行。 */ html[lang^='zh'] .hero h1 { max-width: 8.75em; } html[lang^='ja'] .hero h1 { max-width: 10.5em; } /* ---------- 語言切換器 ---------- */ /* * 頁首右側的三語膠囊。做成**一組**而不是三顆各自為政的連結：三顆同級的短標散在導覽列裡， * 掃視時分不出「這三個是同一件事的三個選項」。目前這一顆用底色標，不用顏色 —— * 頁首已經有橘（`.brand-dot` 的親戚）在別的區塊用，這裡再加一顆彩色會跟首屏搶。 * * `aria-current="page"` 是給讀螢幕的人用的，同一個屬性也拿來當 CSS 的選取條件 —— * 換頁時只要改那個屬性，樣式自己跟上，不必再維護第二個 `.is-active` class。 */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.55); font-size: 13px; /* 三顆短標都不折行：折了膠囊會變成兩層高、把 64px 的頁首撐開 */ white-space: nowrap; } .lang-switch a { padding: 4px 10px; border-radius: 999px; color: var(--text-2); text-decoration: none; transition: background 140ms ease, color 140ms ease; } .lang-switch a:hover { color: var(--text); } .lang-switch a[aria-current='page'] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(58, 54, 50, 0.07); } /* ---------- 譯文尾註 ---------- */ /* * 隱私政策的譯文聲明（只出現在 zh／ja 的隱私頁）。做成一塊有邊框的注意欄而不是一行小字： * 「以英文版為準」是一句有法律效果的話，讀者掃過去要看得到它，不是藏在頁尾的灰字裡。 */ .translation-note { margin-top: 48px; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--cat-orange); border-radius: var(--radius-sm); background: var(--surface); font-size: 15px; color: var(--text-2); } /* ---------- 響應式 ---------- */ /* * 390 寬的頁首放不下「字標 ＋ 兩個導覽連結 ＋ 三語膠囊」。取捨是**留下語言切換**： * 導覽那兩個連結在 landing 上是站內錨點（往下捲就會遇到），頁尾也各有一份； * 語言切換沒有第二個入口，掉了就等於這一頁的日文讀者要自己改網址。 * `.nav-hide`（殼層那條）已經在這個斷點藏掉「功能」，這裡把剩下那個也收掉。 */ @media (max-width: 620px) { /* `>` 只吃導覽列的直屬連結；膠囊裡那三顆是 `.lang-switch` 的子代，碰不到 */ .nav > a { display: none; } .lang-switch { font-size: 12px; } .lang-switch a { padding: 4px 8px; } }