Implement a language switch so that users can choose to view the site in English, Hebrew, or Arabic

[gissoo]

testing notes (QA)

• On the QA site, when logged in, confirm there is a language switcher with 3 languages (english, hebrew, arabic) matching the designs below
• On desktop and mobile (if possible), confirm it switches the language of the current page
• Navigate away and confirm the language change persists
• Log out and confirm the switcher is still present, but only shows English and Hebrew
• Confirm the language switcher options are properly aligned

dev notes

@blms here are the designs – I'll eventually move them to the Components pages – I've provided select and hover designs for LTR and RTL pages for light and dark mode on desktop and mobile

so on desktop and mobile the toggles will stay in the nav, for mobile this means that they are visible and usable once you've selected the burger menu

You can see the designs on the pages if you zoom out of the Figma page – let me know if you need anything

[gissoo]

@blms I've applied the Semibold Greta Sans to "E" in the designs
I also noticed the "עִ" wasn't centered in the toggle container, I have fixed that as well, fwiw.

"E" is 20px on desktop and 18px on mobile (semibold weight Greta Sans for default and selected)
"עִ" is 26px on desktop and 20px on mobile (regular weight Frank Ruehl for both default and selected)
"ع" is 20px on desktop and 16px on mobile. (bold weight Hassan for both default and selected)

[kseniaryzhova]

@gissoo the language symbol for Hebrew looks out of line with the English and Arabic

[blms]

@kseniaryzhova Ooh, good catch. That looks like a browser difference, since I'm now seeing similar on Firefox but not Safari or Chrome.

[kseniaryzhova]

@gissoo couldn't test on mobile since I'm off campus, but everything else works on desktop! Should I close?

[blms]

@kseniaryzhova Please leave open and I'll fix the alignment issue you raised. (Also I should mention, the Arabic font is a placeholder, still waiting for the Hassan font from @gissoo but should be ready soon.)

[kseniaryzhova]

@gissoo I have the same alignment issue on Chrome too.

[gissoo]

@blms @kseniaryzhova thanks for the comments – @blms the alignment problem exists even after fixing them in the designs? (because I know it was misaligned in the designs)

[kseniaryzhova]

@gissoo @blms alignment issue still exists for me - Arabic is too small (but I know the font isn't ready yet) but the Hebrew is again out of alignment with the English E.

[blms]

@kseniaryzhova Interesting! I suspected this might be a Windows vs Mac thing, and it is indeed. It has to do with the font's "vertical metrics".

Here it is on both Windows and Mac Chrome with the margins I set highlighted in orange. Notice how in the Windows screenshot, the distance of the letter from the orange margin is smaller than it is on Mac. So basically on Mac this font has some extra space on top of each character! (Or Windows on the bottom...)

Going to try using this tool (which I found in a StackOverflow thread) to edit the fonts and see if that fixes it.

[blms]

Should be all set now @kseniaryzhova!

[kseniaryzhova]

@blms looks great, even the Arabic! Thanks so much, closing!