Traduire du contenu

Marque le contenu que tu veux que Magic Translate traduise. Le contenu original est affiché jusqu'au chargement de la traduction.

L'élément `<t>`

Mets du texte dans un élément <t> pour le traduire. Il peut contenir du code HTML :

<t>This content will be translated</t>

<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

<mt-translate> fonctionne également, si tu préfères un nom d'élément personnalisé.

L'attribut `data-t`

Si tu ne peux pas ajouter d'élément wrapper, ajoute data-t à l'élément existant pour traduire son contenu :

<title data-t>My online shop</title>

<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

Attributs

Répertorie les attributs à traduire en data-t-attrs, en les séparant par des espaces :

<input placeholder="Search products" data-t-attrs="placeholder" />

<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

Variables

Mets les valeurs qui changent, comme un nom ou un nombre, dans data-v en tant qu'objet JSON, et fais référence à ces valeurs sous la forme $name :

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>

<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

Magic Translate traduit le texte autour des valeurs une fois, par Hi {0}, you have {1} new messages, et replace les valeurs sur la page. La traduction est mise en cache et fonctionne pour tous les noms et tous les comptes, et les valeurs elles-mêmes ne sont jamais envoyées à Magic Translate.

Pour afficher les nouvelles valeurs, change data-v. La traduction mise en cache est réutilisée et aucune demande n'est faite :

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

Les valeurs sont numérotées dans l'ordre dans lequel elles apparaissent pour la première fois. La traduction peut les déplacer là où la langue en a besoin, par exemple {1} neue Nachrichten für {0}.

Quelques règles :

Seules les touches data-v sont remplacées, donc le texte tel que $5 reste tel quel. Si deux touches commencent de la même façon, par exemple count et counts, la plus longue gagne.
Le même nom peut apparaître plusieurs fois.
Les valeurs sont insérées sous forme de texte, jamais sous forme de code HTML. Mets du balisage dans le texte qui les entoure à la place : Hi <b>$name</b>.
Dans le contenu, les variables sont remplacées uniquement dans le texte, pas dans les attributs tels que href ou title.
Si data-v n'est pas un objet JSON valide, le texte n'est pas traduit et un avertissement est enregistré. Une touche qui n'apparaît pas dans le texte enregistre également un avertissement.
$name est visible jusqu'au chargement du script. Charge le script au début de la page, ou masque ces éléments d'ici là.

Options

Utilise ces attributs pour définir les options d'un seul élément :

Attribut	Valeur	Description
`data-formality`	`informal` ou `formal`	Définit la formalité de la traduction.
`data-lang`	un code de langue	Remplace la langue de la page.
`data-t-id`	un identifiant	Tu peux modifier cette utilisation du texte de ta propre initiative. Cela s'applique au contenu de l'élément, pas à son `data-t-attrs`.

<t data-lang="fr" data-formality="formal">How are you?</t>

Du contenu qui change

Le contenu ajouté à la page ultérieurement, ou modifié par tes scripts, est également traduit. Cela fonctionne pour le contenu rendu par JavaScript, par exemple avec HTMX ou JQuery.

Toutes les traductions demandées en même temps sont envoyées à l'API en une seule demande, et les traductions sont mises en cache. Tu peux marquer autant d'éléments que tu le souhaites.

Limites

Le contenu d'un seul élément ne peut pas dépasser 10 Ko, soit environ 5 000 caractères. Les éléments imbriqués sont traduits dans le cadre de leur élément parent <t>.