Currently when viewing the training materials in (e.g.) arabic, it does not render correctly according to RTL expectations.
Ignoring my lack of font support, everything is displayed incorrectly, on the left.
It should all be on the right, but note that the 'tab' on the box is still on the wrong side, it should be on the right.
This PR fixes that by replacing -left with -inline-start in the appropriate places and adding dir="auto" to ensure that if the GTN is loaded in an RTL language (through google translate) that we are giving the user the experience they are used to and expect.
Currently when viewing the training materials in (e.g.) arabic, it does not render correctly according to RTL expectations.
Ignoring my lack of font support, everything is displayed incorrectly, on the left.
It should all be on the right, but note that the 'tab' on the box is still on the wrong side, it should be on the right.
This PR fixes that by replacing
-leftwith-inline-startin the appropriate places and addingdir="auto"to ensure that if the GTN is loaded in an RTL language (through google translate) that we are giving the user the experience they are used to and expect.See this for more details https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html