A chrome extension that detects and toggles the language direction ('rtl'/'ltr') of a site.
When you are developing for websites and applications that support languages that are written from right to left it's really helpful to visualize and toggle the language direction in the browser independently from the actual language that is being used.
The extensions does two things: Detects and toggles the direction of the website's language.
When a new tab is loaded a script is checking the dir attribute of the <html> tag element. If the attribute is set to 'rtl', the extension's badge text is also set to "RTL" indicating that the current website uses a language that is written from right to left.
When the user clicks the extension's icon, a script toggles (or adds it if not set) the value of dir attribute of the <html> tag to one of the two values 'rtl'/'ltr'.
| LTR | RTL |
|---|---|
 |
 |
The extension can be installed via chrome webstore or locally.
- Install via chrome webstore.
- Download the extension and store it locally.
- Open chrome://extensions/ in your Chrome browser.
- Check developer mode.
- Click load unpacked extension.
- Select the directory of the extension.
- Enable and pin rtl-toggle as you would do with any other extension.
- Make sure the extension is enabled and pinned.
- Just click on the extension's icon ;).
| Toggled on/Detection | Toggled off |
|---|---|
 |
 |
 |
- Some sites set the
dirattribute on the<body>tag, so a condition should also be added for this case.
If you enjoy my work and want to support what I do, feel free to buy me a coffee! Every cup fuels my passion for crafting seamless web experiences and exploring new musical frontiers. ☕🎵 👉 Buy Me a Coffee at https://buymeacoffee.com/arismag