Design values, direction and motion · Lesson 14 of 17
Logical properties for RTL and LTR
Use inline and block instead of assuming left and right.
8 minutes1 games
Logical properties follow writing direction: inline is the text axis and block the progression of lines. padding-inline and margin-inline act on the appropriate sides; border-inline-start follows dir. This reduces duplicated RTL and LTR rules.
HTML
<style>.note{border-inline-start:4px solid teal;padding-inline-start:16px;margin-block:12px;text-align:start}</style>
<p class="note" dir="ltr">Start on the left</p>
<p class="note" dir="rtl" lang="ar">البداية من اليمين</p>.note { direction: rtl; }Change direction and observe border and spacing.
Exercise
Add a 4px teal inline-start border to an RTL paragraph.
HTML
<style></style><p class="note" dir="rtl">معلومة</p>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.