One stylesheet, two directions
Same CSS. In the RTL quote the border and padding are on the right, because inline-start is the right side there. getComputedStyle shows the physical result.
Logical properties describe sides by the direction of the text instead of the screen: margin-inline-start means "where lines begin", which is the left in English and the right in Arabic or Hebrew, so one stylesheet works in every language and writing mode.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Convert this to logical properties: .note { margin-left: auto; margin-right: auto; padding-top: 1rem; padding-bottom: 1rem; border-left: 3px solid gold; width: 30rem; }.
Place a close button in the top corner at the end of the line of a dialog, so it's top-right in English and top-left in Arabic.
Make an <ul> of chat messages where each message bubble has a 2rem margin on the end side and aligns to the start, in any direction.
Explain it without notes
What are logical properties, and why were they added to CSS?
Explain the inline and block axes, and their start and end, for English, Arabic and vertical Japanese.
How should you set text direction on a page, and why not with CSS direction?
When would you still use a physical property?
Preview
Console
Nothing logged yet.Expected console output
ltr | left border: 4px | right border: 0px | padding-right: 0px
rtl | left border: 0px | right border: 4px | padding-right: 12px