The place of icons and picture is invalid on RTL languages

User story

What did you do? 1.Goto a RTL version of MDN ste. eg: https://developer.mozilla.org/fa/

2.Look at small arrows on side of Web Technologies; Learn web development; Developer Tools

3.Look at cat that shows “Help us build better CSS debugging tools! Which CSS bugs are the worst? Take the Survey”

4-Look at location of Arrow of “Sign Up now” button

5-From Refrences and Guides menu, look at more docs

What happened? 2-Small arrows are on their related texts. 3-Cat is located on it’s related text. 4-Arrow of sign up now button is located on left side of button like LTR texts. 5-Three dots are beforer More docs menu in English text! Like: …More docs As result: localizers repeteated using … before text on ntranslation of More docs as well as english

What should have happened? 2-Arrows should be mirrored and located on left side of their related texts on RTL languages. Look at samples: LTR: Text —> Correct RTL: <— متن Invalid RTL(Current status): م–تن->

3-Cat should be located on left side of it’s related rectangle.

4-Small arrow on sign up now button should go to left side of button and txt should goto right side of button and arrow should be like <— not —>

5-…More docs in English shold be More docs… and Localizers should move three dots aftre more docs like fixed english phrase.

Is there anything else we should know? Currently, MDN main page is RTL but it’s details like buttons, content of DIV tags are not RTL.

Bugzilla - https://bugzilla.mozilla.org/show_bug.cgi?id=1539793

Acceptance criteria

• Icons and images on the landing page display correctly for both LTR and RTL locales.

Tasks

1. • Update CSS to use bidi mixin
2. • Open PR
3. • Marged to master

[jmswisher]

I commented in the Bugzilla bug about what appears fixed, and what’s not (e.g., arrows still point to the right). Up to you whether to consider it “done enough”.

[caugner]

No longer an issue, because we no longer have any active RTL locale.