demo · v150
RTL & vertical text
text-decoration-skip-spaces: start and end are logical, not physical. In LTR text, start = the left edge of the inline; in RTL (Arabic, Hebrew), start = the right edge; in vertical writing modes, start = the top. Select a value and compare all three text directions at once.
The
start and end keywords skip the space immediately at the logical start/end of each inline box — not the visual left/right. That means the same CSS value produces different visual results depending on direction and writing-mode.
text-decoration-skip-spaces:
LTR — English (direction: ltr)
Visit New York City and San Francisco this spring.
start = left edge
end = right edge
RTL — Arabic (direction: rtl)
زر مدينة نيويورك و سان فرانسيسكو هذا الربيع.
start = right edge
end = left edge
Current value: all
| Value | LTR inline (English) | RTL inline (Arabic/Hebrew) | Vertical (writing-mode: vertical-rl) |
|---|---|---|---|
none |
underline under all spaces | underline under all spaces | underline under all spaces |
all |
skip all spaces | skip all spaces | skip all spaces |
start |
skip space at left edge of inline | skip space at right edge of inline | skip space at top edge of inline |
end |
skip space at right edge of inline | skip space at left edge of inline | skip space at bottom edge of inline |
start end |
skip both edge spaces | skip both edge spaces | skip both edge spaces |
/* start and end are logical — direction-aware */
/* LTR: start = left, end = right */
.ltr-link {
text-decoration-skip-spaces: start; /* skips space before word */
}
/* RTL: start = right, end = left */
.rtl-para { direction: rtl; }
.rtl-link {
text-decoration-skip-spaces: start; /* skips space at right edge */
}
/* Vertical: start = top, end = bottom */
.vert-para { writing-mode: vertical-rl; }
.vert-link {
text-decoration-skip-spaces: end; /* skips space at bottom edge */
}see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗