The language switcher
On this page
The switcher is the control your visitors use to pick a language.
Where it comes from#
- WordPress: a widget, a block, the shortcode
[resilientlang_switcher], or a menu item. It is plain links and works without JavaScript. - Any site with the script tag: a small component called
<rl-switcher>. It is a separate script, added next to the loader. The address of that script is OPEN until the delivery domain exists. - Shopify: an app block in the theme editor.
How it behaves#
- Language names are shown in their own language, such as Français, unless you choose English names, short codes or both. There are no flags unless you turn them on (see Options).
- If a language has its own address (
/fr/), its entry is a real link. Search engines can follow it. Otherwise it is a button that asks the loader to switch. - It works with a keyboard. The arrow keys move, Escape closes, and focus returns to the button.
- The click targets are at least 44 pixels high.
- If the loader is missing, late or has fewer than two languages, the switcher hides itself and the page is untouched.
- The switcher follows the text direction of the current language.
Options#
Every option is optional and has a safe default. On the Install page of your site, the Language switcher section has a form with a live preview and writes the code line for you. On a plain page they are attributes of <rl-switcher>; on the one-line script tag they are the same words with a data- prefix.
| Option | Choices (default first) |
|---|---|
layout | dropdown, list (links side by side), buttons (pills) |
names | native (Français), english (French), code (FR), both (Français (French)) |
flags | none, on (flag next to the name), only (flag, name kept for screen readers) |
current | on, off (hide the current language) |
original | on, off (leave out the language the site was written in) |
placement | inline (in your menu, header or footer), floating (corner) |
position | end, start (follows the page direction, so it mirrors in right-to-left pages) |
size | normal, compact, large |
scheme | light, auto (follows the visitor's light or dark setting), dark, inherit (your site's text colour) |
shape | rounded, square |
attribution | none, or a short "Translated by" line (empty value = the default text) |
About flags. A flag is a country, not a language. Many languages are spoken in several countries, and some visitors feel excluded or misrepresented, so flags are off by default. Screen readers skip the flag and read the language name. Some Windows browsers show two letters instead of a flag. The flag comes from the language code (pt-BR shows Brazil) or, for a bare code such as en, from the browser's likely region (en shows the United States): verify this suits your audience, or leave flags off.
No jumping. An inline switcher keeps its place in your page while the languages load (a few pixels of difference at most), and a floating one never moves the page.
Browser language suggestion#
You can turn on a suggestion banner. It offers the visitor's browser language. It never switches the page by itself, and it never redirects. Dismissing it is remembered for that tab only.
Styling#
You can set colours, radius, font and focus colour with CSS variables: --rl-bg, --rl-fg, --rl-border, --rl-accent, --rl-radius, --rl-font, --rl-font-size, --rl-focus and --rl-z.
Two placements exist: inline in the page, or floating at the start or end of the screen. On narrow screens the floating switcher spans the bottom.
What is tested#
It has automated accessibility checks in Chrome. It has not been tested in other browsers or with real screen readers: verify.
The visitor's choice#
The choice is stored in the visitor's browser so the next visit starts in the same language. See What visitors' browsers store.