Suport RTL for testpilot FrontEnd

[mohamed7afezz]

We almost finished Arabic localization for testpilot website, as part of planning for Arabic Identity of Test Pilot Activity and RTL bugs is here.

Home page have 3 main issues with RTL languages:

1. In card-list section, Cards need to margin-left with zero and margin-left with 40px

2. In newsletter-footer section, background image "email pic" need to change position to right and change the header margin to left

3. In main-footer section, margin for mozilla-logo need be change to left and margin for social-links need to change to the right

Experiments page have 2 main issues with RTL languages:

1. In testpilot-promo section, the legal-information paragrapher need to text-align to right

2. In contributors section, contributor div need to text-align to right and change the padding to right

In addition to the 3 main issues that appear in Home page

[johngruen]

@mohamed7afezz we should do this! I'd like to make sure we hit small viewport sizes correctly as well though. Would you mind taking a look at errors you see there as well?

[johngruen]

I think we could reasonably pick this up with any photon redesign we do.

[meandavejustice]

Came across this article today on mdn which looks pretty helpful. I think the way forward is to detect whether or not the user is using a rtl lang, and set the dir attribute on the html document and target it with html[dir="ltr"] selector in our css. We don't have a terrible amount of text surface area, so I think it's reasonable to target these areas in our own css rather than trying to use something like https://github.com/twitter/css-flip which may just cause further problems for us.

@johngruen thoughts?

[meandavejustice]

Additionally, based on manually testing for ar on testpilot prod site, we aren't supporting arabic right now. Maybe our translation percentage fell below the threshhold at some point?