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.
Enquire about this edition ↗
PROPOSED EDITION / RELEASE DETAILS ON ENQUIRY
← Collection
A CLOSER LOOK
One switch, two directions.
PROPOSED CONTENTS
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 English and Arabic — or any left-to-right and right-to-left pair — in Framer.
REQUIRES
Framer. React 18. Localization mode needs a plan with Localization; paired layers work on any plan.
LICENSE / PROPOSED
Standard licence — own and client projects, no redistribution.
AVAILABILITY
Available now
