Infinite Scroll

A vertical feed does not mirror: page direction rules the inline axis, this list scrolls on the block axis, and row order and the direction of growth come out identical in Arabic and in English. The one trap is rootMargin, which is purely physical, written in CSS margin order (top, right, bottom, left), with no logical keyword anywhere in the API. A vertical list cares only about the third value and it is the same either way, while a horizontal list needs the second value in LTR and the fourth in RTL, so compute it from direction instead of hard-coding it.

A spinner never mirrors: a blanket [dir="rtl"] svg { transform: scaleX(-1) } reverses its apparent rotation and it reads as spinning backwards. Only its position moves, so pin it with inset-inline-end when it hangs in a corner, or drop it in a flex row and let the inline axis place it. Skeleton rows that shimmer with linear-gradient(to right, …) need the override written by hand, because gradients take no logical keywords at all, so the sweep runs against the reading direction in Arabic until you swap in to left under [dir="rtl"].

The number itself does not flip: the Unicode bidi algorithm classifies digits as EN and AN and keeps them running left to right inside Arabic text, so "60 of 348" holds its internal order with no work from you. The one decision left is the numeral system, and it has to hold everywhere: new Intl.NumberFormat("ar-EG").format(348) returns Arabic-Indic digits, while adding -u-nu-latn to the tag returns Latin ones. Do not mix the two on one screen, because an Arabic-Indic counter above Latin row numbers reads as two different things being counted.

In a horizontal infinite list the end of the row moves to the left in Arabic, and the sentinel moves with it. Do not detect the end with scrollLeft + clientWidth >= scrollWidth: Chrome, Firefox and Safari now agree on one model where scrollLeft is 0 at the logical start and goes negative as the user moves toward the end in RTL, so that condition never becomes true and Math.abs(el.scrollLeft) is the least you need. Better still, skip the arithmetic: make the sentinel the last node in the DOM and let IntersectionObserver decide, since DOM order is logical order in both directions and flex-direction: row already puts the first card at the logical start with no row-reverse anywhere.

Feed content arrives mixed: an Arabic post, then a repository name in English, then a line that starts with a number. A row takes its direction from the row and never from the page, so put dir="auto" on the text element inside each row rather than on the list, and align with text-align: start instead of text-align: right so the alignment follows whatever each row resolved. Flipping the page changes nothing about a Latin row, and that is the point: resolve direction on the container alone and every Latin line hangs its full stop and its brackets at the wrong end.