3 min read
•Question 35 of 49mediumHow Does writing-mode Work?
Understanding text direction and vertical text.
What You'll Learn
- writing-mode values
- Vertical text
- Logical properties
Values
styles.cssCSS
.element {
writing-mode: horizontal-tb; /* Default */
writing-mode: vertical-rl; /* Vertical, right to left */
writing-mode: vertical-lr; /* Vertical, left to right */
}Examples
styles.cssCSS
/* Vertical sidebar label */
.sidebar-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* Japanese/Chinese text */
.vertical-text {
writing-mode: vertical-rl;
}Logical Properties
styles.cssCSS
/* Physical */
margin-top, margin-right, margin-bottom, margin-left
/* Logical (adapt to writing-mode) */
margin-block-start, margin-inline-end,
margin-block-end, margin-inline-start