WCNLAYOUT & TYPESETTING MAP11 · LOCALIZATION → D
← 11 · LOCALIZATION
Layout & typesetting · D
Layouts that
survive translation.
survive translation.
Chinese is denser; German is longer. This cluster makes layouts flex — handling text expansion, CJK line-breaking, and alignment so nothing breaks across languages. Tap any card to open its spec.
EXPANSIONLINE-BREAK
RHYTHMALIGN
RTL10%
LAYOUT COVERAGE
0 shipped
1 in progress
4 planned
11D01
Text expansion
WIP
The same message is a different length in every language — Chinese is often shorter, German longer. Layouts must flex so neither overflows nor leaves awkward gaps. This sets the expansion rules.
ISSUEEN ↔ ZH length
ZHOften shorter
OTHERSLonger
DESIGNFlexible
WCND01.1 · THE PROBLEM
One message, many lengths.
A button label, a heading, a paragraph — each occupies different space per language. Fixed-size layouts that fit English perfectly break the moment the text changes length.
VARIESPer language
FIXEDBreaks
FITS ENOnly
NEEDFlex
D01.2 · 中文 VS ENGLISH
Often shorter.
Chinese often says in four characters what English says in eight words — but not always. Designs can’t assume Chinese is shorter; they must handle both directions.
ZHOften denser
BUTNot always
ASSUMENeither
HANDLEBoth ways
D01.3 · FLEXIBLE LAYOUTS
Stretch, don’t break.
Components size to their content — flexible widths, wrapping, no text baked into fixed graphics. The layout adapts to the text, never the reverse.
SIZETo content
WRAPAllowed
NOText in graphics
ADAPTSTo text
D01.4 · BUFFERS
Designed-in slack.
Designs are tested with the longest expected translation plus a buffer, so a slightly long string doesn’t clip or overflow. Slack is designed in, not discovered in production.
TESTLongest + buffer
CLIPNever
SLACKDesigned in
NOTDiscovered late
DON'T
×
Don't hardcode widths to English — Size to content.
×
Don't bake text into images — It can’t reflow.
×
Don't assume ZH is shorter — Handle both directions.
×
Don't test only average length — Test the longest.
“A layout that only fits English isn’t a layout — it’s a screenshot.”
11D02
Line-break rules
PLANNED
Chinese wraps between characters, not words, and certain punctuation can’t start or end a line. These line-breaking rules — kinsoku — keep Chinese text from breaking in ugly or incorrect places.
CJKNo hyphenation
KINSOKURules
NO-BREAKBefore 。
AUTOCSS
WCND02.1 · CJK BREAKING
Between characters.
Chinese has no spaces, so lines wrap between characters — and never hyphenate. A layout that applies Latin word-breaking to Chinese produces wrong, jarring breaks.
WRAPBetween 字
NEVERHyphenate
NOWord-breaking
ELSEJarring
D02.2 · KINSOKU
Forbidden positions.
Kinsoku rules forbid certain characters at line edges — a closing bracket or period can’t start a line; an opening bracket can’t end one. The renderer enforces these.
RULEKinsoku
NO START。 ）
NO END（
ENFORCEDRenderer
D02.3 · NO-BREAK PAIRS
Keep them together.
Some sequences must stay on one line — a number with its unit, the brand name. Non-breaking rules hold these together so they never split across lines.
KEEPNumber + unit
ALSOBrand name
NON-BREAKApplied
NEVERSplit
D02.4 · IMPLEMENTATION
Handled by CSS.
Modern CSS line-break and word-break properties handle CJK correctly when set per locale. The rules are applied through the system, not patched with manual breaks.
CSSline-break
PERLocale
SYSTEMApplied
NOTManual breaks
DON'T
×
Don't hyphenate Chinese — It wraps between characters.
×
Don't ignore kinsoku — Marks can’t start/end lines.
×
Don't split number+unit — Use non-breaking rules.
×
Don't hand-insert breaks — Set CSS per locale.
“Chinese broken by Latin rules reads like a sentence dropped and reassembled wrong.”
11D03
Vertical rhythm
PLANNED
When an English and Chinese page sit side by side, their vertical rhythm should feel parallel — headings, spacing and baselines aligning. This keeps the two language versions visually in sync.
GOALParity
BASELINEShared grid
SPACINGAligned
MIXEDPages
WCND03.1 · PARITY
Feel the same.
The two language versions should feel like the same design — a heading lands at a similar place, sections breathe alike. Parity, not pixel-identity, is the goal.
SAMEDesign feel
HEADINGSSimilar place
PARITYGoal
NOTPixel-identical
D03.2 · SHARED GRID
One grid, both scripts.
Both versions sit on a shared spacing grid. Because CJK leading is looser, the grid is defined in steps that both scripts can land on cleanly.
GRIDShared
STEPSBoth land on
CJKLooser, still fits
CLEANAlignment
D03.3 · SPACING
Aligned blocks.
Section spacing, margins and component gaps stay consistent across languages, so a bilingual layout doesn’t feel like two unrelated designs glued together.
SPACINGConsistent
MARGINSAligned
GAPSSame
NOTTwo designs
D03.4 · MIXED PAGES
When both appear.
On pages showing both languages — a bilingual doc, a toggle — the shared rhythm makes the switch feel seamless rather than like jumping between two systems.
BILINGUALPages
TOGGLESeamless
SHAREDRhythm
NOTJarring jump
DON'T
×
Don't chase pixel-identity — Aim for parity of feel.
×
Don't use separate grids — Share one both land on.
×
Don't vary spacing by language — Keep it consistent.
×
Don't glue two designs — One rhythm, two scripts.
“Two language versions should feel like one design speaking twice.”
11D04
Latin-in-CJK
PLANNED
Latin text inside Chinese — “WCN,” a URL, a number — sits on a different baseline and rhythm than the characters around it. This is the fine alignment that makes the mix look intentional.
ISSUEBaselines differ
FIXVertical-align
SPACINGPangu
BALANCEVisual
WCND04.1 · THE BASELINE
Sitting at different heights.
Latin glyphs and CJK characters have different vertical centres, so Latin can appear to float high or sink within a line of Chinese. Left alone, the mix looks misaligned.
CENTRESDiffer
LATINFloats / sinks
LINEMisaligned
NEEDSTuning
D04.2 · ALIGNMENT
Nudged into line.
Vertical alignment is adjusted so embedded Latin sits centred within the CJK line. The fix is small and per-pairing, but it’s what makes inline Latin look deliberate.
ADJUSTVertical-align
LATINCentred
SMALLPer-pairing
LOOKSDeliberate
D04.3 · SPACING
The pangu space.
Combined with the mixed-script spacing rule, the Latin gets a thin space on each side. Alignment and spacing together make “WCN” sit comfortably in a Chinese phrase.
WITHPangu space
THINEach side
TOGETHERComfortable
INZH phrase
D04.4 · BALANCE
Weight and size, too.
Optical sizing and weight matching (from the type cluster) finish the job, so the Latin doesn’t look heavier or larger than the characters it sits among.
SIZEOptical match
WEIGHTMatched
FROMType cluster
NEITHERDominates
DON'T
×
Don't leave baselines unaligned — Latin floats otherwise.
×
Don't skip the pangu space — It needs breathing room.
×
Don't let Latin dominate — Match size and weight.
×
Don't tune once globally — Adjust per pairing.
“Inline Latin either looks designed-in or dropped-in — alignment decides which.”
11D05
RTL readiness
PLANNED
WCN doesn’t ship Arabic or Hebrew yet — but building RTL-aware from the start costs little, while retrofitting later is painful. This is the readiness work that keeps the door open.
STATUSFuture
PROPSLogical
MIRRORLayout
READYArchitecture
D05.1 · WHY NOW
Cheap now, costly later.
Designing RTL-aware while there’s no RTL language sounds premature — but using direction-agnostic patterns costs nothing now and saves a painful rebuild if Arabic or Hebrew is ever added.
NOWNear-free
LATERPainful retrofit
PATTERNAgnostic
KEEPSDoor open
D05.2 · LOGICAL PROPERTIES
Start, not left.
Layouts use logical CSS properties — margin-inline-start, not margin-left — so direction flips automatically. It’s a habit, not extra work, once adopted.
USELogical props
STARTNot left
FLIPSAutomatically
HABITNot extra
D05.3 · MIRRORING
Layouts that flip.
In RTL, layouts mirror — navigation, icons, progress all reverse direction. Building with that in mind means components are ready to mirror rather than hardcoded one way.
MIRRORWhole layout
INCLUDESNav · icons
READYTo flip
NOTHardcoded
D05.4 · THE FUTURE
A door, held open.
RTL isn’t on the roadmap, but the architecture won’t block it. This is insurance — cheap to hold, expensive to buy in a hurry when a market suddenly opens.
ROADMAPNot yet
BLOCKSNothing
INSURANCECheap
BUY LATERExpensive
DON'T
×
Don't hardcode left/right — Use logical properties.
×
Don't mirror manually later — Build direction-agnostic.
×
Don't assume LTR forever — Markets can open fast.
×
Don't over-invest either — Readiness, not full support.
“RTL readiness is insurance — nearly free to hold, costly to buy in a panic.”
Early
Built to flex.
Text-expansion handling is in progress; line-break, rhythm, alignment and RTL readiness are scoped. This cluster keeps layouts intact when the words change length and script.
WCN Layout & Typesetting Map · 5 topics · D01–D0511 · LOCALIZATION · D · v1.0