/* ========================================================================== TIKI — RIGHT-TO-LEFT (Arabic) -------------------------------------------------------------------------- The rest of the design system is written with CSS logical properties (inset-inline-start, padding-inline, margin-inline, text-align: start), so direction is handled by the engine rather than by mirroring every rule. This file only covers what logical properties cannot express: 1. glyphs and icons that carry a physical direction, 2. the Arabic type face and its metrics, 3. a few third-party (Bootstrap) selectors that hardcode left/right. Loaded only when . ========================================================================== */ [dir="rtl"] { /* IBM Plex Sans Arabic leads the stack; Plus Jakarta Sans still covers Latin fragments (event titles, brand names) inside Arabic text. */ --tiki-font-sans: "IBM Plex Sans Arabic", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif; } /* Arabic has no uppercase, and letter-spacing breaks its cursive joins. Applying either produces text that is at best wrong and at worst unreadable, so both are neutralised for RTL. */ [dir="rtl"] .tiki-eyebrow, [dir="rtl"] .tiki-badge, [dir="rtl"] .tiki-stat__label, [dir="rtl"] .tiki-table th, [dir="rtl"] .tiki-filters__title, [dir="rtl"] .tiki-footer__title, [dir="rtl"] .tiki-event__category, [dir="rtl"] .tiki-event__price-label, [dir="rtl"] .tiki-fact__label, [dir="rtl"] .tiki-dropdown__label, [dir="rtl"] .tiki-live, [dir="rtl"] .tiki-sticky-bar__label { text-transform: none; letter-spacing: 0; } /* Arabic sits lower on the line and needs a little more leading than Latin at the same size. */ [dir="rtl"] body { line-height: 1.7; } [dir="rtl"] .tiki-hero__title, [dir="rtl"] .tiki-display, [dir="rtl"] .tiki-event-detail__title { line-height: 1.22; letter-spacing: 0; } /* -------------------------------------------------------------------------- Directional glyphs Chevrons and arrows point at a physical side, so they must be flipped. Icons that are symmetric or represent an object (heart, ticket, pin, calendar, logos) must NOT be — a mirrored WhatsApp mark is simply wrong. -------------------------------------------------------------------------- */ [dir="rtl"] .tiki-icon[class*="chevron"], [dir="rtl"] .tiki-section-head__link .tiki-icon, [dir="rtl"] .tiki-breadcrumb .tiki-icon, [dir="rtl"] .tiki-pagination .tiki-icon { transform: scaleX(-1); } /* The hover nudge on "voir tout" must travel toward the text, not away. */ [dir="rtl"] .tiki-section-head__link:hover .tiki-icon { transform: scaleX(-1) translateX(3px); } /* Native select arrow is drawn as a background image, which is not a logical property. */ [dir="rtl"] .tiki-select { background-position: left var(--tiki-space-4) center; } /* Breadcrumb separator leans the other way. */ [dir="rtl"] .tiki-breadcrumb li + li::before { content: "\\"; } /* -------------------------------------------------------------------------- Bootstrap components that hardcode direction -------------------------------------------------------------------------- */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .modal-footer { justify-content: flex-start; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } /* -------------------------------------------------------------------------- Horizontal scroll rails A rail must start at the inline-start edge, which in RTL is the right. -------------------------------------------------------------------------- */ [dir="rtl"] .tiki-rail { direction: rtl; } /* -------------------------------------------------------------------------- Numbers, money, dates and identifiers stay left-to-right -------------------------------------------------------------------------- Prices, order references, phone numbers and QR serials are Latin/numeric tokens. Left alone in an RTL paragraph the bidi algorithm can reorder their punctuation ("45,500 DT" rendering as "DT 500,45"). Isolating them keeps the token intact while letting the surrounding Arabic flow right to left. -------------------------------------------------------------------------- */ [dir="rtl"] .tiki-num, [dir="rtl"] .tiki-event__price, [dir="rtl"] .tiki-booking__price, [dir="rtl"] .tiki-stat__value, [dir="rtl"] .tiki-ticket-row__price, [dir="rtl"] .tiki-sticky-bar__price, [dir="rtl"] .tiki-table__num { direction: ltr; unicode-bidi: isolate; text-align: end; } /* The day is a numeral and is isolated so it cannot be reordered by the surrounding paragraph direction. The month and weekday are not: in Arabic they are Arabic words, and forcing them to LTR would lay them out backwards. This is the whole reason the date block has three elements rather than one formatted string. */ [dir="rtl"] .tiki-datechip__day { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- Decorative hero washes Purely visual; mirrored so the composition keeps the same balance. -------------------------------------------------------------------------- */ [dir="rtl"] .tiki-hero::before { inset-inline-end: auto; inset-inline-start: -10rem; } [dir="rtl"] .tiki-hero::after { inset-inline-start: auto; inset-inline-end: -8rem; }