/* rtl.css - right-to-left overrides for ar, fa, he, ur. * * Bootstrap 4 ships no RTL build, so rather than pull in a whole alternate framework * this file flips ONLY the directional utilities this site actually uses. Measured * across the PHP tree (excluding blog/, which is a separate WordPress app): * * mr-{n} 98 text-left 10 float-left 9 float-right 6 * pl-{n} 5 pr-{n} 3 ml-auto 2 ml-{n} 2 * * Loaded only when ipd_is_rtl() is true, immediately after main.min.css so these rules * win on specificity ties. `dir="rtl"` on already handles text direction and * inline flow; what remains is the margin/padding/float asymmetry, which is expressed in * physical (left/right) properties Bootstrap 4 cannot flip on its own. * * Everything is scoped to [dir="rtl"] so a stray include on an LTR page is inert. * * Bootstrap 4 spacer scale: 0 = 0, 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem. */ /* --- floats ------------------------------------------------------------- */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } /* --- text alignment ------------------------------------------------------ */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* --- auto margins (used to push the nav to one side) --------------------- */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* --- margin scale: ml-{n} and mr-{n} swap sides -------------------------- */ [dir="rtl"] .ml-0 { margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .mr-0 { margin-right: 0 !important; margin-left: 0 !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } /* --- padding scale: pl-{n} and pr-{n} swap sides ------------------------- */ [dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; } [dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; } [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; } [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; } [dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; } /* --- borders ------------------------------------------------------------- */ [dir="rtl"] .border-left { border-left: 0 !important; border-right: 1px solid #dee2e6 !important; } [dir="rtl"] .border-right { border-right: 0 !important; border-left: 1px solid #dee2e6 !important; } /* --- list markers sit on the correct side -------------------------------- */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 2rem; padding-left: 0; } /* --- the breadcrumb separator ("Home > X") points the other way ---------- */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { transform: scaleX(-1); }