Lesson 4 of 8
Right-to-left meets left-to-right
- 13 min
- 5 checks
- 3 hints
- Go to task
Goal
Two directions on one page
Explanation
Arabic, Hebrew and Persian are written from right to left, and a page in one of them often holds code, links and numbers that run left to right. If you mix the two directions without care, periods and other punctuation end up in the wrong places.
The first rule is to put dir="rtl" on the page, and dir="ltr" on every standalone block of left-to-right text, such as code, links and file paths.
The second rule is to use logical properties. margin-inline-start means "on the start side", so it lands on the right in Arabic and on the left in English with no extra rule, while margin-left always stays on the left, whatever the direction.
Your task
This page is in Arabic, and everything in it sits inside a <main dir="rtl"> that stands in for the html tag, so the code block inherits right-to-left from it. Set the direction of the code block, and style .note with logical properties, giving it a bar on its start edge and padding after the bar.
Checks
5 checks- The code block's direction is ltr
- The .note has a bar on its start edge
- There is padding after the bar
- The bar really sits on the right in a right-to-left page
- The styles use logical properties, not left/right