Rich Text and Structured Messages

Start with the structure of the message

Ask what the translation needs to preserve:

• plain text only
• variables in a string
• embedded links or emphasis
• plural or select branches that read more naturally in markup

A practical rule of thumb

• Use t for plain strings and most string-producing cases.
• Use Trans when inline markup or structured rich text matters.
• Use Plural, Select, and SelectOrdinal when the component form is clearer in markup than the function form.

This is guidance, not a hard prohibition. The goal is readable authoring that still matches Lingui’s official semantics.

Examples

Plain string: use t

<button>{$t`Submit`}</button>
<img alt={$t`Profile photo of ${name}`} />

Rich text with a link: use Trans

<!-- Translators see "Read the <0>documentation</0>." and can reorder the link. -->
<Trans>Read the <a href="/docs">documentation</a>.</Trans>

Plural in markup: component form vs. function form

<!-- Component form: plural branches are visible inline. -->
<Plural value={count} one="# file selected" other="# files selected" />

<!-- Function form: equivalent, but reads more naturally inside a sentence. -->
<p>{$t`You have ${$plural(count, { one: "# message", other: "# messages" })}.`}</p>

Renderer differences still matter

• In Svelte, Trans, Plural, and friends participate in the reactive model. They re-render when the locale changes.
• In Astro, translated output is fixed at render time (build time for static, request time for server/hybrid). There is no client-side re-render.