nextjs-cjk-i18n-typography
Next.js CJK i18n Typography Patterns
Problem
When adding CJK (Chinese/Japanese/Korean) language support to a Next.js app with
next-intl, several non-obvious typography and UX issues arise that don't exist
with Latin-only locales. CJK glyphs are visually larger, denser, and have different
spacing characteristics than Latin characters, requiring locale-aware adjustments
that go beyond simple translation.
Context / Trigger Conditions
- Next.js app using
next-intlwith CJK locales (zh-CN, zh-TW, ja, ko) - Custom CJK fonts loaded via CSS
:lang(zh)selectors or CSS custom properties - Headings or large text that looks oversized in CJK compared to English
- Latin text (signatures, brand names) unexpectedly rendered in CJK font
- Locale switcher redirects back to old locale after switching
- Short CJK headings wrapping to multiple lines unnecessarily
- Route-based visibility logic (hiding elements on certain paths) breaking on locale-prefixed URLs
More from hubeiqiao/skills
apple-bento-grid
|
2pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
1responsive-video-source-selection
|
1coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
1docx
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
1internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
1