/* * RTL patch — loaded by layouts/public.blade.php only when locale_dir() is 'rtl' * (config/app.php rtl_locales; Arabic today). * * `dir="rtl"` on is what actually fixes the reading order: it gives the * Unicode bidi algorithm the right base direction, so Arabic sentences stop * rendering reversed and sentence-final punctuation stops landing at the start * of the line. It also mirrors everything laid out with flexbox or the grid, * because those follow the inline direction. * * What it does NOT mirror is Bootstrap's *physical* direction utilities. This * build is the stock LTR bootstrap.min.css, where .ms-1 compiles to * margin-left and .text-start to text-align:left. Left alone, that leaves rows * mirrored while the spacing inside them stays put — the "everything is nearly * right but nothing lines up" look. The rules below flip exactly those * utilities, and nothing else. Swapping in Bootstrap's own RTL build would be * the fuller answer; this is the contained one. */ /* --- Logical spacing utilities: start = right, end = left ---------------- */ [dir="rtl"] .ms-0 { margin-left: initial; margin-right: 0; } [dir="rtl"] .ms-1 { margin-left: initial; margin-right: 0.25rem; } [dir="rtl"] .ms-2 { margin-left: initial; margin-right: 0.5rem; } [dir="rtl"] .ms-3 { margin-left: initial; margin-right: 1rem; } [dir="rtl"] .ms-4 { margin-left: initial; margin-right: 1.5rem; } [dir="rtl"] .ms-5 { margin-left: initial; margin-right: 3rem; } [dir="rtl"] .ms-auto { margin-left: initial; margin-right: auto; } [dir="rtl"] .me-0 { margin-right: initial; margin-left: 0; } [dir="rtl"] .me-1 { margin-right: initial; margin-left: 0.25rem; } [dir="rtl"] .me-2 { margin-right: initial; margin-left: 0.5rem; } [dir="rtl"] .me-3 { margin-right: initial; margin-left: 1rem; } [dir="rtl"] .me-4 { margin-right: initial; margin-left: 1.5rem; } [dir="rtl"] .me-5 { margin-right: initial; margin-left: 3rem; } [dir="rtl"] .me-auto { margin-right: initial; margin-left: auto; } [dir="rtl"] .ps-0 { padding-left: initial; padding-right: 0; } [dir="rtl"] .ps-1 { padding-left: initial; padding-right: 0.25rem; } [dir="rtl"] .ps-2 { padding-left: initial; padding-right: 0.5rem; } [dir="rtl"] .ps-3 { padding-left: initial; padding-right: 1rem; } [dir="rtl"] .ps-4 { padding-left: initial; padding-right: 1.5rem; } [dir="rtl"] .ps-5 { padding-left: initial; padding-right: 3rem; } [dir="rtl"] .pe-0 { padding-right: initial; padding-left: 0; } [dir="rtl"] .pe-1 { padding-right: initial; padding-left: 0.25rem; } [dir="rtl"] .pe-2 { padding-right: initial; padding-left: 0.5rem; } [dir="rtl"] .pe-3 { padding-right: initial; padding-left: 1rem; } [dir="rtl"] .pe-4 { padding-right: initial; padding-left: 1.5rem; } [dir="rtl"] .pe-5 { padding-right: initial; padding-left: 3rem; } /* --- Alignment and float ------------------------------------------------- */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* Bootstrap positions the check input with a physical negative margin-left. */ [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check .form-check-input { margin-left: 0; margin-right: -1.5em; float: right; } /* Dropdowns hang off the wrong edge otherwise (language switcher, account menu). */ [dir="rtl"] .dropdown-menu { --bs-position: end; text-align: right; } [dir="rtl"] .dropdown-menu-end { right: auto; left: 0; } /* Input groups: the hand-written border-radius/border overrides in the tracking form assume left-to-right adjacency. Let Bootstrap's own logic size them. */ [dir="rtl"] .input-group > .form-control, [dir="rtl"] .input-group > .input-group-text { border-radius: revert; } /* --- Latin-shaped fields stay LTR ---------------------------------------- */ /* * A UETR, a reference, an amount, a currency code and a date are Latin/digit * strings. In an RTL field the bidi algorithm keeps their characters in order * but pushes trailing punctuation and the caret to the wrong end, which makes * checking a 36-character UETR character by character genuinely hard. Pin the * five fields the tracking form is built from; free-text fields (name, company, * message) are left alone so Arabic types naturally. */ [dir="rtl"] #uetr, [dir="rtl"] #ref, [dir="rtl"] #value, [dir="rtl"] #currency, [dir="rtl"] #date, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"] { direction: ltr; text-align: left; } /* --- Strings that have not been translated yet --------------------------- */ /* * The top promo banner still falls back to English on Arabic pages (it is on the * untranslated-strings list). Inside an RTL container the bidi algorithm pulls an * English sentence's trailing period to the FRONT — ".A free audit of how your * company moves money across borders" — which is the same class of damage this * whole change exists to remove, just pointed the other way. * * `plaintext` makes the element take its direction from its own first strong * character instead of inheriting it: English today renders LTR, and the day the * Arabic translation lands the same rule renders it RTL with nothing to undo. * * Deliberately NOT applied to headings and paragraphs generally. A genuinely * Arabic sentence that happens to open with a Latin brand name ("Ohmyfin API * للمؤسسات المالية") would be flipped wholesale to LTR by that, which trades one * reversed string for another. */ /* Footer trust badges are the same story: "256-bit SSL encryption" otherwise renders as "bit SSL encryption-256", the leading number dragged to the far end. Note the child selector — each badge puts its text in an inner block, and a block starts its own bidi paragraph, so a rule on the wrapper alone never reaches the text. */ [dir="rtl"] .vpb-headline, [dir="rtl"] .vpb-btn, [dir="rtl"] .footer-trust-item > div { unicode-bidi: plaintext; } /* A code point is a code point wherever it appears — never re-order one. */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] samp, [dir="rtl"] kbd { direction: ltr; text-align: left; unicode-bidi: isolate; }