Translating content

Mark the content you want to translate, and Magic Translate translates it. The original content is shown until its translation has loaded.

The <t> element

Put text in a <t> element to translate it. It can contain 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> works as well, if you prefer a custom element name.

The data-t attribute

Where an extra element does not fit, add a data-t attribute to the element itself. Its content is translated:

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

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

Attributes

List the attributes to translate in data-t-attrs, separated by spaces:

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

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

Options

data-lang and data-formality override the language and the formality for a single element:

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

Content that changes

Content added to the page later, or changed by your scripts, is translated as well. This works for content rendered by JavaScript, for example with htmx or jQuery.

All translations requested at the same time are sent to the API in a single request, and translations are cached. You can mark as many elements as you like.

Limitations

The content of a single element cannot exceed 10 KB, which is about 5,000 characters. Elements inside a <t> element are translated together with it, as one text.