Plain text
Headings, paragraphs and list items are the simplest case. Each element carries its translation key in a data-i18n attribute.
- Fresh bread every morning
- Free delivery on orders over €30
- Open seven days a week
Live demo
Help us translate this page
This page is available in several languages. Turn on translation mode, then hold Shift and click any highlighted text to correct it or translate it into another language.
- Turn on translation mode with the button at the top of the page.
- Hold Shift and click any highlighted text.
- Correct the text, or pick another language and translate it.
static
This copy of the demo has no backend, so suggestions are not permanently saved and will disappear on the next page load.
The translation files have been reset.
Examples
Links and buttons
Links and buttons keep working as normal. Only Shift + click opens the editor, so you can keep browsing while translation mode is on.
Items in your basket: 0
Text with placeholders
Some strings contain placeholders that the app fills in. The editor shows the raw template and warns you if a placeholder goes missing.
Hello Alex, you have 3 new messages.
Attributes
Placeholders, tooltips and image descriptions can be translated too. Shift + click the search field, the help button or the picture.
Several strings in one place
This button has a label and a tooltip. When you Shift + click it, the editor asks which one you want to translate.
Formatted text
HTML can be allowed for individual strings. This sentence contains a link and bold text, and the editor lets you edit the markup.
By placing an order you agree to our terms of sale and our privacy policy.
Content added later
Highlighting is done with CSS, so text that appears after the page has loaded is highlighted automatically.
Hidden text
Some text is hard to click, such as dropdown options, collapsed sections and the page title. Use “All text” on the translation badge to find it.
Delivery details
We deliver between 8am and 6pm. You will get a text message an hour before we arrive.
Mixed languages
This quote is always shown in Spanish, whatever language the page is in. Its lang attribute tells the helper which language it is correcting.
Caminante, no hay camino, se hace camino al andar.
Missing translations
When a string has not been translated, this demo shows the English text instead and marks it in red. Switch to Spanish to see two missing strings, or to French to see a language that has not been translated yet.
data-i18n
data-i18n-missing
Across pages
Translation mode stays on as you move around the site, and the editor remembers the last language you translated into. Try the other pages:
Excluded text
Some text must not be changed here, such as legal wording. The plugin leaves it alone: no highlighting, no editor.
Prices include VAT. Offers are subject to availability. Only the legal team may change this notice.