프로필 UI 글자 크기를 네 단계와 공통 축소 규칙으로 통일한다
This commit is contained in:
@@ -132,84 +132,25 @@ The CSS variables contain `/image/game/*` URLs but do not import or copy image
|
||||
files. Caddy continues to own `/image/*`; Vite must not rewrite the image tree
|
||||
as application assets.
|
||||
|
||||
|
||||
## Game typography tiers
|
||||
|
||||
The game UI uses four starting sizes from `assets/styles/tokens.css`:
|
||||
All profile pages share the four sizes in `assets/styles/tokens.css`, applied by
|
||||
page styles and `assets/styles/typography.css`. Gateway is outside this policy.
|
||||
This is an intentional Core UX decision, expanded on 2026-09-29 from the initial
|
||||
2026-09-15 policy. See [the typography contract](frontend-typography.md) for the
|
||||
step-down rule, measured fitting, content exceptions, and browser audit command.
|
||||
|
||||
| Token suffix (`--sammo-font-size-`) | CSS size | Role |
|
||||
| --- | --- | --- |
|
||||
| `small` | `normal × 12 / 14` (12px) | Compact controls, metadata, secondary labels |
|
||||
| `normal` | 14px | Body, tables, ordinary controls |
|
||||
| `emphasis` | 16px | Emphasized names and section labels |
|
||||
| `title` | 24px | Page and major section headings |
|
||||
| Token suffix (`--sammo-font-size-`) | Size | Shared class |
|
||||
| ----------------------------------- | ---- | --------------------- |
|
||||
| `title` | 24px | `sammo-text-title` |
|
||||
| `emphasis` | 16px | `sammo-text-emphasis` |
|
||||
| `normal` | 14px | `sammo-text-normal` |
|
||||
| `small` | 12px | `sammo-text-small` |
|
||||
|
||||
This is an intentional Core UX policy adopted on 2026-09-15. It is a starting
|
||||
policy for verified UI, not a claim that every rendered glyph has one of four
|
||||
computed sizes. Existing geometry and media queries remain owned by each page.
|
||||
A breakpoint can choose another tier (for example, the personnel nation heading
|
||||
uses 16px on its narrow layout and 24px on its wide layout).
|
||||
|
||||
Use the tokens for new UI. Do not round arbitrary content or all remaining
|
||||
relative sizes automatically. Before moving an existing label to a tier, compare
|
||||
actual Chromium screenshots and text geometry at 500px and 1000px, with the
|
||||
same font, data, DPR and zoom. Also check the real mobile viewport modes: a
|
||||
390px-wide device scales a 500px layout to approximately 78% and a 1000px layout
|
||||
to 39%; these do not change the CSS token values. A page with a fixed 1000px
|
||||
minimum width can still render at about 39% in 500px mode because Chromium
|
||||
fits the overflowing content. Record `visualViewport.scale` for each route;
|
||||
do not infer every route's scale from the selected mode alone.
|
||||
|
||||
### Preserved exceptions
|
||||
|
||||
- Battle log `.small_war_log .name_plate` remains `0.75em`, and `.crew_plate`
|
||||
remains `90%`. Legacy inline `0.9em` conversions and zero-sized hidden markers
|
||||
remain unchanged. At a 14px parent these are 10.5px and 12.6px respectively;
|
||||
nested content must be calculated from its actual parent.
|
||||
- NPC possession names retain their existing length rule: 4 and 7 characters
|
||||
render at 16px, and the existing `length >= 9` branch renders at 12px. Do not
|
||||
remove the smaller branch or enlarge long names to match adjacent labels.
|
||||
- Player HTML, editor size choices, and personal CSS remain content/user settings.
|
||||
Scoped `small` rules normalize UI metadata without rewriting injected HTML.
|
||||
|
||||
### Deferred conversions
|
||||
|
||||
| Area | Preserved size | Reason |
|
||||
| --- | --- | --- |
|
||||
| Chief overview compact rows and turn indices | `0.55rem` (8.8px) | 12px text overlaps the existing 11.25px rows |
|
||||
| Chief compact header/name | `0.65rem` / `0.6rem` | Preserve the same dense card contract |
|
||||
| Narrow personnel chief name / lock label | 15px / 10px | Enlarging them reduces visible maximum-length names |
|
||||
| Best generals / hall name and nation cells | 11px; inner `small` 95% | 12px worsens overflow in the fixed name cells |
|
||||
| General selection and main nation basic card | Existing local/inherited sizes | Maximum-width names already overflow; conversion is deferred |
|
||||
|
||||
User-created general names and founded/renamed nation names are limited by
|
||||
legacy width 18 (CJK counts 2, ASCII counts 1): test both 9 CJK characters and
|
||||
18 wide ASCII characters. Selection-pool and scenario names have a different
|
||||
source contract and are not proven bounded by that user-input guard.
|
||||
|
||||
Existing ellipsis, horizontal scrolling, and pre-existing maximum-name overflow
|
||||
are not fixed by these tokens. The deferred areas need a separate layout decision
|
||||
before their fonts are enlarged. The `typographyPolicy.spec.ts` fixture tests
|
||||
protect the safe main labels, personnel breakpoints, dense chief rows, NPC
|
||||
length branches, and battle log ratios. They use mocked read responses and do
|
||||
not constitute live game or public deployment verification.
|
||||
|
||||
|
||||
### Relative small tier and exception variables (2026-09-15)
|
||||
|
||||
`small` is `calc(var(--sammo-font-size-normal) * 12 / 14)`. The reference is the
|
||||
14px normal tier, not the immediate parent. An 80% declaration on nested `small`
|
||||
elements would shrink repeatedly and would yield 12.8px inside a 16px parent;
|
||||
the token keeps UI metadata at 12px regardless of nesting.
|
||||
|
||||
The retained exceptions are also named in `tokens.css`: `nation-card`,
|
||||
`chief-compact-{base,row,header,name}`, `hall-{name,secondary}`,
|
||||
`personnel-mobile-{name,lock}`, `bracket-bet-button`, and `war-{name,crew}`
|
||||
(all with the `--sammo-font-size-` prefix). Their values preserve the previous
|
||||
rendering, including rem/em/% semantics. Zero-sized hidden markers and arbitrary
|
||||
user HTML remain content contracts. The betting page and bracket now reference
|
||||
the shared tier variables directly instead of the redundant `--bet-font-*` aliases.
|
||||
The historical deferral reasons above describe the original 12px proposal.
|
||||
`small`, `sub`, `sup`, and semantic log annotations move down one tier:
|
||||
24 → 16 → 14 → 12 → 10px. The last size is only for subordinate text inside the
|
||||
smallest tier; repeated nesting stops at 10px. Do not reintroduce scoped `small`
|
||||
resets, per-page exception tokens, or implicit percentage reductions.
|
||||
|
||||
## Text alignment on both axes (2026-09-29)
|
||||
|
||||
@@ -218,14 +159,14 @@ height. Horizontal alignment remains independent: numerical values can stay
|
||||
right-aligned and dates or field labels left-aligned. This policy does not change
|
||||
game state, field order, font tiers, cell dimensions, or the meaning of Ref data.
|
||||
|
||||
| Content | Vertical alignment |
|
||||
| --- | --- |
|
||||
| A short heading, status, button/link label, identity or scalar value | Center within its own cell when it fits |
|
||||
| A short label that wraps on a narrow viewport | Center the complete label if it fits; allow natural height and preserve wrapping |
|
||||
| A form label next to one input | Center against the input; if the field also has help/error text, align to the input rather than the entire help block |
|
||||
| Prose, logs, notices, editor content, multi-paragraph detail, card collections | Preserve the reading start at the top |
|
||||
| A table cell with text/numbers/actions | Use table-cell `vertical-align: middle`; retain explicit top alignment for narrative/detail cells |
|
||||
| A column flex container | The vertical axis is `justify-content`, not `align-items` |
|
||||
| Content | Vertical alignment |
|
||||
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| A short heading, status, button/link label, identity or scalar value | Center within its own cell when it fits |
|
||||
| A short label that wraps on a narrow viewport | Center the complete label if it fits; allow natural height and preserve wrapping |
|
||||
| A form label next to one input | Center against the input; if the field also has help/error text, align to the input rather than the entire help block |
|
||||
| Prose, logs, notices, editor content, multi-paragraph detail, card collections | Preserve the reading start at the top |
|
||||
| A table cell with text/numbers/actions | Use table-cell `vertical-align: middle`; retain explicit top alignment for narrative/detail cells |
|
||||
| A column flex container | The vertical axis is `justify-content`, not `align-items` |
|
||||
|
||||
Choose the smallest owner of the text. For a block or grid-item cell with inline
|
||||
markup, `align-content: safe center` preserves inline wrapping, ellipsis and the
|
||||
|
||||
Reference in New Issue
Block a user