Block and Inline Directions
Learn the block and inline flow directions and how they map to vertical and horizontal axes.
Block and Inline Directions is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Block Direction
The block direction is the direction in which block-level boxes are stacked. In horizontal writing systems (LTR/RTL), the block direction is top-to-bottom. In vertical writing modes, it changes to left-to-right or right-to-left.
Inline Direction
The inline direction is the direction text flows within a line. In LTR languages, inline direction is left-to-right. In RTL, it is right-to-left. In vertical writing modes, it becomes top-to-bottom.
writing-mode Property
writing-mode sets the fundamental orientation of text flow:
horizontal-tb— horizontal text, top to bottom (default)vertical-rl— vertical text, columns from right to leftvertical-lr— vertical text, columns from left to right
Horizontal Writing System
In writing-mode: horizontal-tb (default):
- Block direction = vertical (top → bottom)
- Inline direction = horizontal (left → right in LTR, right → left in RTL)
- Block-start = top, block-end = bottom
- Inline-start = left (LTR) or right (RTL)
Vertical Writing System
In writing-mode: vertical-rl:
- Block direction = horizontal (right → left)
- Inline direction = vertical (top → bottom)
- Block-start = right, block-end = left
- Inline-start = top, inline-end = bottom
Visualizing the Axes
Think of it as a coordinate system that rotates with the writing mode. Logical properties describe positions relative to this rotatable system, not the fixed screen.
text-orientation
In vertical writing modes, text-orientation controls how individual characters are oriented:
mixed: Rotate Latin characters; keep CJK uprightupright: All characters upright (for vertical CJK)sideways: All characters rotated sideways
Sideways Vertical Labels
A practical use: rotated sidebar labels or chart axis labels in horizontal-writing contexts:
.chart-label {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg); /* flip for bottom-to-top reading */
}Mixing Writing Modes
A container can have one writing mode while individual inline elements have another. This is used for mixing Latin and CJK text in the same paragraph.
Block-size and Inline-size
Logical equivalents for width and height:
inline-size= width in horizontal-tb (the inline dimension)block-size= height in horizontal-tb (the block dimension)
.box {
inline-size: 300px; /* width in LTR */
block-size: auto; /* height auto */
}The text-combine-upright Property
For vertical text that includes numbers or abbreviations, text-combine-upright (tcy) keeps short sequences of characters upright and compressed within a single vertical text cell.
Quick Check
In writing-mode: horizontal-tb with a LTR language, which axis is the "block" axis?
Recap
The block axis is the stacking direction for block boxes; the inline axis is the text flow direction. In horizontal writing systems, block = vertical, inline = horizontal. In vertical writing, these flip. writing-mode controls the fundamental axis orientation. Logical properties adapt to whichever axes are currently block and inline.
Frequently asked questions
Is the “Block and Inline Directions” lesson free?
Yes — the full text of “Block and Inline Directions” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Block and Inline Directions”?
Learn the block and inline flow directions and how they map to vertical and horizontal axes. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Block and Inline Directions” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.