PHASE 9Intermediate ~26 min· topic 7 of 7

Topic 9.7

Logical Properties

In one line

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.

Think of it like this

Real-life example: "The start of the queue" vs "the left of the room". If you tell a friend "stand at the start of the queue", they know what to do in any room, whichever way the queue faces. "Stand on the left" only works if the queue happens to start on the left. Physical CSS properties (margin-left) say "the left". Logical properties (margin-inline-start) say "the start of the line", and the browser works out which side that is.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Physical property: A property named after a screen side: margin-left, top, width.
Logical property: A property named after the text direction: margin-inline-start, inset-block-start, inline-size.
Inline direction: The direction a line of text runs: left to right in English.
Block direction: The direction lines and paragraphs stack: top to bottom in most languages.
Start / end: Where each direction begins and finishes; inline-start is the left in English and the right in Arabic.
RTL / LTR: Right-to-left (Arabic, Hebrew, Urdu) and left-to-right (English, Hindi) text.
`dir` attribute: The HTML attribute that sets text direction: ltr, rtl or auto.
Writing mode: Whether lines are horizontal or vertical, set with writing-mode.

Step by step

01Find the physical properties

This quote has an accent border on the left and padding on the left. In Arabic, the text starts on the right, so the border is on the wrong side.

style.csswhole filecss

.quote {
  border-left: 4px solid teal;
  padding-left: 1rem;
  margin-right: 2rem;
  text-align: left;
}

02Swap each one for its logical twin

left/right become inline-start/inline-end, top/bottom become block-start/block-end. The English page looks exactly the same.

style.csswhole filecss

.quote {
  border-inline-start: 4px solid teal;
  padding-inline-start: 1rem;
  margin-inline-end: 2rem;
  text-align: start;
}

03Set the direction in HTML

Now dir="rtl" flips everything at once: border and padding move to the right, the margin to the left, and the text aligns right. No extra CSS.

index.htmlwhole filehtml

<html lang="ar" dir="rtl">
  …
  <blockquote class="quote">…</blockquote>

04Use the shorthands

Two-value shorthands set both ends of one axis; inset replaces top/right/bottom/left.

style.csswhole filecss

.page {
  max-inline-size: 60rem;   /* max-width */
  margin-inline: auto;      /* left and right auto */
  padding-block: 2rem 3rem; /* top 2rem, bottom 3rem */
}
.badge {
  position: absolute;
  inset-block-start: 0.5rem;  /* top */
  inset-inline-end: 0.5rem;   /* right in LTR, left in RTL */
}

05How the mapping works

The browser maps each logical side to a physical one using writing-mode and direction.

How the mapping worksdiagram

Rendering diagram…

Try it yourself

1
Flip the whole page
In the first example, add dir="rtl" to the first quote too. Predict its console line before running. (It matches the second line.)
2
Order of logical and physical
In the first example, add border-left: 4px solid red; after border-inline-start in .quote. Predict what the LTR quote shows (red: same side, later wins) and what the RTL quote shows (teal on the right and red on the left).
3
Rotate the writing
In the last example, change vertical-rl to vertical-lr. Predict which side margin-block-start lands on now. (The left: lines stack from left to right.)

Code & diagrams

One stylesheet, two directions New tab

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.

Preview

Press Run to see the page.

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

Physical vs logical in an RTL card New tab

In RTL, the line starts on the right, so the "end" corner is on the left. `right: 8px` ignores direction; `inset-inline-end` follows it. The script measures where each badge really sits.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

physical: badge on the right | line starts on the right
logical: badge on the left | line starts on the right

Logical properties in vertical writing New tab

In `vertical-rl`, lines run top to bottom and stack from right to left. So the block size is the physical width, the inline size is the physical height, block-start is the right side and inline-start is the top.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

width: 160px height: 140px
margin-right: 20px margin-top: 0px
padding-top: 10px

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

`text-align: left` on an RTL page

Write p { text-align: left; } and view an Arabic page (dir="rtl").

terminal

$ Page

── what you'll see ──

Arabic paragraphs hug the left edge, with ragged ends on the right, which looks wrong to Arabic readers.

Break #2

Direction set only in CSS

Use body { direction: rtl; } instead of dir="rtl" on the <html> element.

terminal

$ Page

── what you'll see ──

The layout flips, but punctuation and mixed English/Arabic text can appear in the wrong order when styles fail to load, and screen readers and translation tools don't know the page is RTL.

Myth vs fact

Myth

Logical properties only matter for Arabic or Hebrew sites.

Fact

They also help with vertical writing modes, and they make components reusable if your product is ever translated. Shorthands like margin-inline and padding-block are useful in English-only code too.

Myth

margin-inline: auto is different from margin: 0 auto.

Fact

In horizontal writing they centre a block the same way. The difference: margin-inline doesn't touch the top and bottom margins, while margin: 0 auto resets them to 0.

Myth

Flipping a page to RTL means mirroring everything.

Fact

Text-related layout mirrors, but some things shouldn't: logos, photos, clocks, media playback buttons and many icons stay as they are. Arrows that mean "next" or "back" do flip.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Logical properties and values (CSS Logical Properties Level 1) are supported in all modern browsers; the core margin, padding, border, inset and size properties have worked everywhere since around 2021. Logical float/clear values arrived in Chromium last (2023).
▸
Logical and physical properties that map to the same side are in the same logical property group; the cascade resolves them together, so whichever is declared later on the element wins. Shorthands like margin are physical, so margin: 0 after margin-inline-start resets it.
▸
The dir attribute also isolates bidirectional text: <bdi> and dir="auto" stop a user name in Arabic from scrambling the punctuation of an English sentence around it. CSS unicode-bidi: isolate does the same; let HTML handle it where you can.
▸
Flexbox, Grid, text-align: start, inset-inline and logical shorthands mean that an RTL version of a well-written stylesheet often needs no extra CSS at all. Linting tools (for example stylelint plugins) can flag physical properties to help migrate a codebase.

Remember this

1
Text has two directions. The inline direction is the way a line of text runs: left to right in English, right to left in Arabic, Hebrew and Urdu (RTL), top to bottom in vertical Japanese. The block direction is the way lines (and blocks like paragraphs) stack: top to bottom in most languages. Phase 6 (Topic 6.1) introduced these axes; Flexbox and Grid already use them, which is why justify-content: start follows the text.
2
Each axis has a start and an end. In English, inline-start is the left, inline-end is the right, block-start is the top and block-end is the bottom. With dir="rtl", inline-start becomes the right. Logical properties are named after these: margin-inline-start, margin-inline-end, padding-block-start, border-inline-end and so on. They map to a physical side at computed time, so margin-inline-start: 1rem in an RTL paragraph sets its right margin.
3
There are handy shorthands for both sides of an axis. margin-inline: auto sets start and end (centring a block, Topic 9.1). padding-block: 1rem 2rem sets block-start then block-end. inset-inline-start: 0 replaces left: 0 for positioned elements, and inset: 0 sets all four. Sizes too: inline-size is the logical width, block-size the logical height, with min- and max- versions. border-start-start-radius is the corner where block-start and inline-start meet (top-left in English).
4
Values got logical versions as well: text-align: start and end (the default text-align is already start), float: inline-start and inline-end, and clear: inline-start. Writing text-align: left forces left alignment even in Arabic text, which looks wrong to its readers.
5
The direction comes from HTML, not CSS. Set <html lang="ar" dir="rtl"> for a right-to-left page, or dir="rtl" on one element, and dir="auto" for user-written text whose language you don't know. The CSS direction property exists but should be left to the dir attribute, because direction is part of the meaning of the content and must work without CSS too. writing-mode: vertical-rl (Phase 6) turns the axes: the inline direction becomes top to bottom and the block direction right to left, and logical properties rotate with it.
6
When to use which. Use logical properties for anything tied to the text: spacing around text, the side of an accent border, icons placed before a label, centring. Keep physical properties for things tied to the screen itself, such as a shadow that should always fall to the bottom right, or a decoration that must stay on the left of a photo. Mixing both on the same element is allowed, but when a logical and a physical property set the same side, the one that comes later wins, which can surprise you.

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?

Practice

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.

Trade-offs

↔
Logical properties future-proof a stylesheet for other languages but are longer to type and less familiar to many developers; teams often adopt them gradually, starting with spacing.
↔
Mixing physical and logical properties on the same element works but makes the cascade harder to predict; pick one style per component.

Done when you can

I can name the inline and block axes and their start and end sides.
I can rewrite margin, padding, border, inset and sizes as logical properties.
I use text-align: start instead of left.
I set direction with the dir attribute in HTML.
I can predict where logical properties land in RTL and vertical writing.
I know when a physical property is the right choice.

Command Palette

Words you'll meet

Step by step

01Find the physical properties

02Swap each one for its logical twin

03Set the direction in HTML

04Use the shorthands

05How the mapping works

Try it yourself

Flip the whole page

Order of logical and physical

Rotate the writing

Code & diagrams

Break it on purpose

`text-align: left` on an RTL page

Direction set only in CSS

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can