Add RTL support for Bootstrap CSS

[andy-armstrong]

LEARNER-1705

Description

This change implements RTL support for Bootstrap. It utilizes the library rtlcss which will convert left-to-right CSS rules into right-to-left versions.

Acceptance Criteria

• Add rtlcss to the generation of Bootstrap CSS files
• Verify that the course skeletons for LMS and Studio work with an RTL language

Sandbox

• https://andy-armstrong.sandbox.edx.org/courses/course-v1:edX+DemoX+Demo_Course/course/

Testing

• Unit, integration, acceptance tests as appropriate

Front-end changes:

• i18n
• RTL

Assign Github reviewers (as needed)

• engineering
• product

Post-review

• Rebase and squash commits

[marcotuts]

One issue with the hero - I've enabled it on the test course after adding the verified mode and a few more course dates I stumbled across it.

[andy-armstrong]

@marcotuts Good catch! Interestingly most of the problems are in the LTR version too. I'll fix these up tomorrow.

[marcotuts]

Oh that makes sense. The rule breaks I saw weren't directionally specific. Cool. thumbs up technically for RTL

[andy-armstrong]

@OmarIthawi FYI, this story implements RTL support for Bootstrap 4. I used rtlcss as discussed on the OEP (openedx/open-edx-proposals#46), and it appears to work flawlessly. One interesting thing I learned is that Bootstrap uses flexbox which automatically supports RTL in all browsers. So the layout generally just switches without any changes. Running rtlcss just ensures that other rules such as margins and padding are appropriately switched. I'd love your feedback if you see any issues with what we've built here.

[OmarIthawi]

@andy-armstrong I'm really excited about this! An honorary thumbs up!

I'm really impressed that this is happening. It looked like an impossible quest at the beginning. Kudos!

[OmarIthawi]

BTW there should be a lot of RTL hickups here and there. This is not a show stopper at all, since it usually can be patched individually.

[andy-armstrong]

Thanks @OmarIthawi. I agree that there will be patches needed for individual issues. A nice feature of rtlcss is that you can use comments to control how it does the translation:

http://rtlcss.com/learn/usage-guide/control-directives/

[HarryRein]

Nice!

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production on Monday, October 16, 2017.

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the production environment.