Rich Text

Ein Link mitten in einem übersetzten Satz ist das klassische i18n-Problem: Teilst du den String auf drei Schlüssel auf, verliert die Übersetzerin die Wortstellung. MF2 hat dafür Markup, und die Rich-Komponente rendert es über Snippets — der Markup-Name in der Nachricht entscheidet, welches Snippet den Text umschließt.

Probier es aus #

Der Link und sein Ziel stehen in der Übersetzung, nicht in der Komponente:

Lies die Doku, bevor du live gehst

{ "cta": "Read {#link to=|/docs|}the docs{/link} before you ship" }

<script lang="ts">
	import { Rich } from 'svelte-dialect';
	import { formatParts } from '#lib/i18n.js';

	// options come from the translation: let only a path on this site through
	const internal = (to: unknown) => (/^\/(?![/\\])/.test(String(to)) ? String(to) : undefined);
</script>

<Rich parts={formatParts('home:cta')}>
	{#snippet link(children, options)}<a href={internal(options.to)}>{@render children()}</a>{/snippet}
</Rich>

Optionen und Verschachtelung #

Ein Snippet erhält ein Snippet für den Inhalt des Markups sowie dessen MF2-Optionen — aus {#link to=|/x|} wird { to: '/x' } —, sodass eine Übersetzung Attribute pro Locale mitbringen kann. Das sind Eingaben wie alle anderen, also prüfe sie, bevor sie in einem Attribut landen: Die Snippets auf dieser Seite lassen nur einen Pfad auf dieser Website durch. Verschachtelung funktioniert beliebig tief; jede Ebene läuft durch ihr eigenes Snippet:

fett, mit einem Link darin

Fehlende Snippets lassen die Seite nicht abstürzen #

Markup ohne passendes Snippet rendert trotzdem seinen Inhalt — eine veraltete Übersetzung oder eine, die vor dem Snippet entstanden ist, degradiert also sanft, statt zu verschwinden:

Dieser Satz enthält mittendrin nicht angebundenes Markup

Unterhalb von Rich #

formatParts(key, params) ist der Baustein darunter — er liefert text-, open-, close- und standalone-Teile. Greif direkt darauf zurück, wenn du Markup lieber mit eigener Technik rendern möchtest.

Markup benennen #

Markup-Namen werden zu Snippet-Namen, also halte sie als gültige Bezeichner — für {#my-link} lässt sich kein Snippet schreiben.