FRAMER COMPONENT / EDITION 02
Language switch
Most language switches change the words and stop there. This one writes lang and dir, flips the layout, converts the numerals, mirrors the icons, and remembers what you chose, so the second language reads like it was designed first.
Free
No licence fee. Yours for your own and client projects.
Get it free ↗
← Collection
A CLOSER LOOK
One switch, two directions.
HIGHLIGHTS
Inside the edition.
01
lang and dir, written correctly
Screen readers change voice and the whole page flips direction. Works on the document, or on a section you choose.
02
Numerals, alignment and icons
Converts 0–9 to ٠–٩ inside layers you mark, mirrors explicit text alignment, and flips the icons you mark.
03
Remembered, and linkable
It remembers the choice, reads ?lang=ar from a link, and keeps every switch on the page in sync. No flash of the other language on load.
PUT IT TO WORK
A useful starting point.
01
Drop it in
Paste the component link into your project and drop an instance in the header or footer.
02
Choose a mode
Framer Localization for an indexable multilingual site, or paired layers on any plan.
03
Mark your layers
Name each version lang:en Title and lang:ar Title. Mark numbers num: … and icons to flip flip: …
THE DETAILS
Before you begin.
FORMAT
Framer code component. TypeScript source, README and licence included.
DESIGNED FOR
Designers and studios building in English and Arabic, or any left-to-right and right-to-left language pair, in Framer.
REQUIRES
Framer. React 18. Localization mode needs a plan with Localization; paired layers work on any plan.
LICENSE / STANDARD
Standard licence for your own projects and client work. No redistribution.
AVAILABILITY
Available free
