Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Add general rtl docs #526

Merged
merged 1 commit into from
Nov 4, 2019
+41 −0
Merged

Add general rtl docs #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions config/docs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 34 additions & 0 deletions docs/i18n.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: `<html dir="rtl">...</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 `<html dir="rtl">...</html>`
- Usage of `uikit.rtl.min.css`
- CSS classes that are explicitly named `*-left` or `*-right` stay the same in the RTL version.