Files
Arkie-Library-Frontend/tailwind.config.js
TerryM 33d03d1cc7
Some checks failed
Deploy to Frontend Servers / deploy (push) Failing after 39s
fix(fonts): put Latin system fonts before CJK so Vietnamese composes
Vietnamese text rendered with split diacritics — "Tất cả tài liệu" came
out as "Tâ´t ca' tài liêụ" because the previous font stack led with
six CJK-only families (Noto Sans SC/TC, PingFang SC/TC, Microsoft
YaHei/JhengHei) that have zero Vietnamese coverage. The browser still
matched the Latin base letters in those fonts and dropped the combining
tone marks onto the next available slot, breaking shaping for every
precomposed Vietnamese codepoint (U+1EA5, U+1EC7, …).

Reorder the stack so ui-sans-serif / system-ui / -apple-system / Segoe UI
lead and the CJK families follow as fallbacks. Browsers do per-glyph
font selection so Chinese characters still hit PingFang SC / Noto Sans
SC etc.; the zh-CN and zh-TW pages render unchanged. The fix needs no
extra network requests — every modern OS bundles a Latin font with
Vietnamese support.

Verified in browser at /vi/browse ("Tất cả tài liệu" / "Liên kết" /
"Tệp nén" all compose correctly) and /cn/browse (still PingFang SC).
2026-06-08 01:07:48 +08:00

63 lines
2.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
ark: {
bg: "#141319",
nav: "#08070c",
panel: "#1d1e23",
line: "#2a2a32",
gold: "#eeb726",
gold2: "#ffd35c",
muted: "#8f9099",
},
},
keyframes: {
shimmer: {
"100%": { transform: "translateX(100%)" },
},
"fade-in-up": {
from: { opacity: "0", transform: "translateY(16px)" },
to: { opacity: "1", transform: "translateY(0)" },
},
"scale-in": {
from: { opacity: "0", transform: "scale(0.96)" },
to: { opacity: "1", transform: "scale(1)" },
},
},
animation: {
shimmer: "shimmer 1.5s infinite",
"fade-in-up": "fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both",
"scale-in": "scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both",
},
fontFamily: {
// Put system Latin fonts FIRST so Latin script (incl. Vietnamese
// precomposed glyphs like ấ/ẳ/ệ) renders from a font that actually
// ships those code points. The CJK fonts that used to lead the stack
// (Noto Sans SC/TC, PingFang SC/TC, Microsoft YaHei/JhengHei) have no
// Vietnamese coverage, so the browser was greedily rendering the base
// Latin letter with a CJK font and rendering the combining tone mark
// separately, producing “Tâ´t / liêụ” instead of “Tất / liệu”.
// Per-glyph fallback still picks up the CJK fonts for Chinese
// characters, so existing zh-CN / zh-TW pages keep the same look.
sans: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"Segoe UI",
"Noto Sans SC",
"Noto Sans TC",
"PingFang SC",
"PingFang TC",
"Microsoft YaHei",
"Microsoft JhengHei",
"sans-serif",
],
},
},
},
plugins: [],
};