fix(i18n): empty-state strings render literal instead of italic emphasis #251

New issue

Closed

opened 2026-06-23 15:42:50 +00:00 by james · 0 comments

james commented

2026-06-23 15:42:50 +00:00

Owner

Context

Four empty-state strings in packages/i18n/messages/en.json carry literal … HTML tags meant to italicise the button name they reference:

experience.education.empty: "No entries yet — click Add entry to start."
experience.jobs.empty: "No jobs yet — click Add job to start."
experience.contracts.empty: "No contracts yet — click Add contract to start."
experience.contracts.emptyPosition: "No position set yet. Use Set position to add one."

React Native's <Text> doesn't interpret HTML — the consumer renders the string verbatim, so users see the literal  and  characters in the UI. The strings were authored as if i18next's <Trans> interpolation was already in place; it isn't.

Source

User-reported (June 2026), observed on the Experience screen's empty states after #25 (Contracts) merged.

Approach

Two options:

A. Rewrite the catalog strings to drop the tags and use Carol's existing emphasis convention (double-quoted, matching the Editing "{institution}"… and Delete the entry "{institution}"? patterns already in the catalog).

B. Adopt <Trans> for these consumers, with a tiny  component that styles its children with italic / accent.

Recommendation: A — simpler, ships in one commit, matches the existing voice. The Trans-based path is more flexible but introduces a new pattern that the rest of the catalog doesn't yet use. If italics-via-Trans becomes a recurring need, a separate ticket can adopt it as a sweep.

Scope

Rewrite the four strings in packages/i18n/messages/en.json (and any sibling locale files that mirrored them) to use double-quoted emphasis.
No consumer changes — the rendering site already uses <Text>{t(…)}</Text>.
Confirm no other catalog strings have stray HTML by rg '<\w+' packages/i18n/messages/.

Acceptance criteria

Empty-state strings on Education, Jobs, and Contracts render without  literals.
Voice matches the existing double-quoted convention in the catalog.
No other catalog string ships HTML tags that would render literal.

Out of scope

Adopting <Trans> for richer styled-interpolation needs (separate sweep ticket if anyone wants it).
Redesigning the empty-state copy itself.

## Context Four empty-state strings in `packages/i18n/messages/en.json` carry literal `…` HTML tags meant to italicise the button name they reference: - `experience.education.empty`: `"No entries yet — click Add entry to start."` - `experience.jobs.empty`: `"No jobs yet — click Add job to start."` - `experience.contracts.empty`: `"No contracts yet — click Add contract to start."` - `experience.contracts.emptyPosition`: `"No position set yet. Use Set position to add one."` React Native's `<Text>` doesn't interpret HTML — the consumer renders the string verbatim, so users see the literal `` and `` characters in the UI. The strings were authored as if i18next's `<Trans>` interpolation was already in place; it isn't. ## Source User-reported (June 2026), observed on the Experience screen's empty states after #25 (Contracts) merged. ## Approach Two options: A. **Rewrite the catalog strings** to drop the tags and use Carol's existing emphasis convention (double-quoted, matching the `Editing "{institution}"…` and `Delete the entry "{institution}"?` patterns already in the catalog). B. **Adopt `<Trans>`** for these consumers, with a tiny `` component that styles its children with italic / accent. **Recommendation: A** — simpler, ships in one commit, matches the existing voice. The Trans-based path is more flexible but introduces a new pattern that the rest of the catalog doesn't yet use. If italics-via-Trans becomes a recurring need, a separate ticket can adopt it as a sweep. ## Scope - Rewrite the four strings in `packages/i18n/messages/en.json` (and any sibling locale files that mirrored them) to use double-quoted emphasis. - No consumer changes — the rendering site already uses `<Text>{t(…)}</Text>`. - Confirm no other catalog strings have stray HTML by `rg '<\w+' packages/i18n/messages/`. ## Acceptance criteria - [ ] Empty-state strings on Education, Jobs, and Contracts render without `` literals. - [ ] Voice matches the existing double-quoted convention in the catalog. - [ ] No other catalog string ships HTML tags that would render literal. ## Out of scope - Adopting `<Trans>` for richer styled-interpolation needs (separate sweep ticket if anyone wants it). - Redesigning the empty-state copy itself.

james referenced this issue from a commit

2026-06-23 15:44:33 +00:00

fix(i18n): drop literal tags from empty-state strings

james referenced this issue from a pull request that will close it,

2026-06-23 15:44:44 +00:00

fix(i18n): drop literal tags from empty-state strings #252

james closed this issue

2026-06-23 16:05:30 +00:00