PRJ-008 · software-systems
Majlis RTL
Open source · Author · 2024
A headless component library where Arabic is the default direction, not the afterthought — logical-property layout, direction-aware motion, and bidi-safe text primitives.
Core Philosophy
Every RTL library I'd used was an LTR library wearing a flipped costume — and the seams showed in carets, chevrons, and slide-in panels moving the wrong way. Majlis inverts the power structure: components are authored against logical directions (start/end), tested in Arabic first, and the LTR build is the derived case.
A majlis is the room where people sit together; the name is the API philosophy. Direction is context every component inherits, never a prop you remember to pass.
Outcomes
- Adopted by 4 regional student projects and 2 startups
- Zero horizontal-flip bugs reported across adopters
- Docs site scores 100 Lighthouse accessibility in both directions
Deliverables
- 14 headless RTL-first components
- Bidi text utilities
- Documentation site in Arabic & English
Technical Anatomy
Direction context
A single DirectionProvider reads the document language and exposes resolved semantics — 'forward' means visually-left in RTL, visually-right in LTR. Motion, icons, and keyboard arrows all consume the same resolution.
const { forward } = useDirection();
const onKeyDown = (e) => {
if (e.key === forward.arrowKey) focusNext();
if (e.key === forward.oppositeArrowKey) focusPrev();
};Bidi-safe truncation
Mixed Arabic/Latin strings break naive ellipsis. The text primitive isolates runs with Unicode FSI/PDI marks before truncating, so a clipped English product name can't visually scramble an Arabic sentence.