v135 · css
Bidi chat
A chat UI where the left panel flows left-to-right (English) and the right panel flows right-to-left (Arabic/Hebrew). Both use overflow-block: auto; overflow-inline: hidden — the logical properties automatically map to the correct physical axes regardless of writing direction. No writing-mode conditionals needed.
Feature detection: checking…
Physical properties — breaks on RTL
overflow-y: auto; overflow-x: hidden — works for LTR. For RTL, "block" is still vertical, but "inline" is now right-to-left. The physical names don't adapt; you'd need to conditionally swap them per language.
Logical properties — one rule, all directions
overflow-block: auto; overflow-inline: hidden — block-axis scroll (vertical for LTR/RTL) and hide inline-axis overflow. Works for LTR English, RTL Arabic, and vertical CJK layouts without any conditional CSS.
English (LTR)
direction: ltr
Arabic (RTL)
direction: rtl
LTR chat CSS
/* .msg-list (LTR) */
overflow-block: auto; /* ↕ scrolls vertically */
overflow-inline: hidden; /* → clips horizontal */
direction: ltr;
/* Same as physical: */
overflow-y: auto;
overflow-x: hidden;
overflow-block: auto; /* ↕ scrolls vertically */
overflow-inline: hidden; /* → clips horizontal */
direction: ltr;
/* Same as physical: */
overflow-y: auto;
overflow-x: hidden;
RTL chat CSS — same logical properties
/* .msg-list (RTL) */
overflow-block: auto; /* ↕ scrolls vertically */
overflow-inline: hidden; /* ← clips horizontal */
direction: rtl;
/* Logical rules adapt automatically. */
/* No need to swap overflow-x/y. */
overflow-block: auto; /* ↕ scrolls vertically */
overflow-inline: hidden; /* ← clips horizontal */
direction: rtl;
/* Logical rules adapt automatically. */
/* No need to swap overflow-x/y. */
/* One set of rules for every writing direction */
.msg-list {
overflow-block: auto; /* scroll the block axis (vertical for LTR/RTL) */
overflow-inline: hidden; /* clip the inline axis */
height: 18rem;
}
/* RTL just needs direction: rtl — no overflow adjustments */
.msg-list[dir="rtl"] { direction: rtl; }