diff --git a/config/docs.config.js b/config/docs.config.js index 1e0eb6054..22d5bc5a4 100644 --- a/config/docs.config.js +++ b/config/docs.config.js @@ -125,6 +125,13 @@ module.exports = { usageMode: "hide", sectionDepth: 1, }, + { + name: "Internationalization", + content: "../docs/i18n.md", + exampleMode: "hide", + usageMode: "hide", + sectionDepth: 1, + }, { name: "Downloads", content: "../docs/downloads.md", diff --git a/docs/i18n.md b/docs/i18n.md new file mode 100644 index 000000000..5240bc2a1 --- /dev/null +++ b/docs/i18n.md @@ -0,0 +1,34 @@ +## Right to left (RTL) + +> RTL (Right To Left) is a locale property indicating that text is written from right to left. For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (`ar`) is another common language written RTL. + +([Source: MDN](https://developer.mozilla.org/en-US/docs/Glossary/rtl)) + +### Applying right to left + +- You can enable right to left on a document level with the following HTML: `...` +- You can enable right to left on an element level with the following CSS: `#something { direction: rtl; }` +- If you want to combine left to right (ltr) and right to left (rtl) text you should also use `unicode-bidi: embed;` in your CSS ([explainer on unicode-bibi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)) +- With the application of rtl on a document level certain parts of your styling/interface change layout: + +### CSS Layout reacting to `html[dir="rtl"]` + +- Elements positioned via CSS Flexbox +- Elements positioned via CSS Grid +- Elements positioned via CSS Position relative + +### CSS Layout NOT reacting `html[dir="rtl"]` + +- Elements positioned via CSS Floats +- Elements positioned via CSS Absolute Positioning +- Text align via css (left stays left, right stays right) + +Visualization: [https://codepen.io/marcus/pen/86b86954e58fdda9f7f89d46b8012667?editors=1100](https://codepen.io/marcus/pen/86b86954e58fdda9f7f89d46b8012667?editors=1100) + +### RTL and Uikit + +- Uikit's JavaScript supports right to left by default +- For Uikit's CSS support there are two steps needed: + - Enabling it on a document level with `...` + - Usage of `uikit.rtl.min.css` +- CSS classes that are explicitly named `*-left` or `*-right` stay the same in the RTL version.