Documentación

Traducir contenido

Marca el contenido que quieres que traduzca Magic Translate. El contenido original se muestra hasta que se cargue la traducción.

El elemento <t>

Pon el texto en un elemento <t> para traducirlo. Puede contener 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> también funciona, si prefieres un nombre de elemento personalizado.

El atributo data-t

Si no puedes añadir un elemento contenedor, añade data-t al elemento existente para traducir su contenido:

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


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

Atributos

Enumera los atributos que se van a traducir en data-t-attrs, separados por espacios:

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


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

Variables

Pon los valores que cambien, como un nombre o un recuento, en data-v como objeto JSON y haz referencia a ellos como $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 traduce el texto alrededor de los valores una vez, como Hi {0}, you have {1} new messages, y vuelve a poner los valores en la página. La traducción está en caché y funciona para todos los nombres y todos los recuentos, y los valores en sí mismos nunca se envían a Magic Translate.

Para mostrar nuevos valores, cambia data-v. La traducción en caché se reutiliza y no se hace ninguna solicitud:

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

Los valores están numerados en el orden en que aparecen por primera vez. La traducción puede llevarlos a donde el idioma los necesite, por ejemplo, {1} neue Nachrichten für {0}.

Algunas reglas:

  • Solo se sustituyen las teclas data-v, por lo que el texto como $5 permanece como está. Si dos teclas comienzan de la misma manera, como count y counts, gana la más larga.
  • El mismo nombre puede aparecer más de una vez.
  • Los valores se insertan como texto, nunca como HTML. En su lugar, pon marcas en el texto que las rodea: Hi <b>$name</b>.
  • En el contenido, las variables se sustituyen solo en texto, no en atributos como href o title.
  • Si data-v no es un objeto JSON válido, el texto queda sin traducir y se registra una advertencia. Una clave que no aparece en el texto también registra una advertencia.
  • $name estará visible hasta que se cargue el guion. Carga el guion al principio de la página u oculta estos elementos hasta entonces.

Opciones

Usa estos atributos para establecer las opciones de un solo elemento:

AtributoValorDescripción
data-formalityinformal o formalEstablece la formalidad de la traducción.
data-langun código de idiomaAnula el idioma de la página.
data-t-idun carnéTe permite editar este uso del texto por sí solo. Se aplica al contenido del elemento, no a su data-t-attrs.
<t data-lang="fr" data-formality="formal">How are you?</t>

Contenido que cambia

El contenido que se añada a la página más adelante, o que tu guion modifique, también se traduce. Esto funciona para el contenido renderizado por JavaScript, por ejemplo con htmx o jQuery.

Todas las traducciones solicitadas al mismo tiempo se envían a la API en una sola solicitud y las traducciones se almacenan en caché. Puedes marcar tantos elementos como quieras.

Limitaciones

El contenido de un solo elemento no puede superar los 10 KB, es decir, unos 5000 caracteres. Los elementos anidados se traducen como parte de su elemento principal <t>.

AnteriorJavaScriptEl siguienteAPI de JavaScript