/* ========================================================================== arabic-rtl.css — RTL overlay for the Enago Saudi Arabia (Arabic) site. WHAT BELONGS HERE Only direction fixes for CSS we do not own or should not rewrite: Bootstrap 3, owl.carousel, jQuery UI, and the large legacy stylesheets (enago-kr-home.css, new_home_page.css) where a physical left/right cannot be safely converted file-wide. Everything is scoped to html[dir="rtl"] so the English includes (inc_*_eng.htm) keep rendering LTR. WHAT DOES NOT BELONG HERE If we own the rule, fix it at the source with a logical property (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start/end) instead of adding an override here. That is how css/open-sans-global.css, css/editing-inquiry-form.css and the eg-* header rules in includes/inc_header_new.htm are already written. LOAD ORDER Last in , after css/open-sans-global.css. BROWSER SUPPORT Logical properties need Chrome 87+ / Firefox 66+ / Safari 14.1+ (no IE11). That is a wider net than the codebase already casts: open-sans-global.css ships :has() selectors, which require Chrome 105+ / Safari 15.4+. ========================================================================== */ /* ========================================================================== 0. Arabic family fallback css/open-sans-global.css sets the family on body + body * with !important and is linked by 25 of the 28 pages. The three that are not (publication-support/psmainfileupload.htm, tooltip-cont.htm and publication-support/cors/result.html) would otherwise fall through to Bootstrap's "Helvetica Neue", Helvetica, Arial — only Arial of which carries Arabic. This rule (0,1,2) outranks Bootstrap's bare `body` (0,0,1) and is identical to what open-sans-global.css declares, so it never conflicts on the pages that have both. ========================================================================== */ html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; } /* ========================================================================== 1. Bootstrap 3 grid and utilities (third-party — not edited in place) Bootstrap 3 has no RTL build, so its columns float left. Flipping the float is what makes column order follow the reading order; the 15px gutters are already symmetric, so nothing else in the grid needs mirroring. The breakpoints below are NOT decoration — they mirror exactly where Bootstrap 3 itself applies the float: .col-xs-* always .col-sm-* >= 768px .col-md-* >= 992px .col-lg-* >= 1200px Below its breakpoint a column is a full-width block, NOT a float. Flipping the float unconditionally therefore floats columns that Bootstrap leaves in flow, which makes them shrink-to-fit instead of 100% wide. On the home page that let the editor-profiles flex track size its own containing block and blew the layout out to 4258px (≈3.5k of horizontal overflow) below 992px. Keep each rule inside the media query that matches its prefix. .col-*-push-* and .col-*-pull-* are NOT flipped here — no Arabic page uses them. Add explicit rules if that changes. .col-sm-offset-4 IS flipped: the Editing Inquiry Form uses it to indent the marketing opt-in checkbox under the col-sm-8 field column. Bootstrap sets only margin-left, so under RTL the indent lands on the wrong side and the checkbox drifts out of the field column. Only the offset actually in use is listed — add the others as pages start using them. ========================================================================== */ html[dir="rtl"] [class^="col-xs-"], html[dir="rtl"] [class*=" col-xs-"] { float: right; } @media (min-width: 768px) { html[dir="rtl"] [class^="col-sm-"], html[dir="rtl"] [class*=" col-sm-"] { float: right; } } @media (min-width: 992px) { html[dir="rtl"] [class^="col-md-"], html[dir="rtl"] [class*=" col-md-"] { float: right; } } @media (min-width: 1200px) { html[dir="rtl"] [class^="col-lg-"], html[dir="rtl"] [class*=" col-lg-"] { float: right; } } /* Bootstrap declares these with !important, so the override needs it too */ html[dir="rtl"] .pull-left { float: right !important; } html[dir="rtl"] .pull-right { float: left !important; } /* .text-left/.text-right were authored on the Indonesian source to mean "align to the reading start/end", so they mirror rather than stay literal */ html[dir="rtl"] .text-left { text-align: right; } html[dir="rtl"] .text-right { text-align: left; } /* ========================================================================== 2. Arabic is a cursive script: letter-spacing breaks the joins The legacy stylesheets carry 59 letter-spacing declarations inherited from the Latin/Korean design. Applied to Arabic they pull the connected letter forms apart, which reads as broken text rather than as tracking. !important is deliberate here. 40 of those 59 selectors are more specific than this reset — navbar_style.css alone reaches (2,11,2) — so a normal declaration would simply lose. This is a script-correctness rule, not a design preference, which is the same reason css/open-sans-global.css asserts the font family with !important. There is no "opt back in" rule to pair with this: `letter-spacing: initial` and `revert` both resolve to `normal`, so neither can restore a designed tracking value. If a specific Latin run (a logo, a wordmark) genuinely needs its tracking, give that element an explicit value with !important. ========================================================================== */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] strong, html[dir="rtl"] em, html[dir="rtl"] label, html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] button, html[dir="rtl"] .btn, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { letter-spacing: normal !important; } /* ========================================================================== 3. Bidi isolation utilities for LTR data inside Arabic copy Email addresses, URLs, phone numbers, prices, word counts, order IDs and journal names are LTR runs. Without isolation, leading/trailing punctuation ("+966", "(2024)", "enago@enago.com.") gets reordered by the bidi algorithm and renders in the wrong place. `unicode-bidi: isolate` is the fix — this is the one place the property is warranted. .ltr-inline — inline runs inside Arabic text (email, phone, ID, price) .ltr-block — a whole block that is Latin/numeric (code sample, address) ========================================================================== */ .ltr-inline { direction: ltr; unicode-bidi: isolate; } .ltr-block { direction: ltr; unicode-bidi: isolate; text-align: left; } /* numbers that must not be reordered next to Arabic punctuation */ .num, .price, .tel, .email, .url { direction: ltr; unicode-bidi: isolate; } /* ========================================================================== 4. Forms Arabic labels/inputs inherit RTL from , which is what we want for name, affiliation, subject area and message fields. Technical fields must stay LTR: an email or URL typed into an RTL field has its punctuation visually reordered, and a phone number loses its + prefix position. Attribute selectors also catch the fields that use type="text". Placeholders follow the field's own direction, so they need no extra rule. ========================================================================== */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[name*="mail" i], html[dir="rtl"] input[name*="phone" i], html[dir="rtl"] input[name*="mobile" i], html[dir="rtl"] input[name*="url" i], html[dir="rtl"] input[name*="wordcount" i], html[dir="rtl"] input[name*="word_count" i] { direction: ltr; text-align: right; } /* File inputs: the browser draws the button, and its side follows the element's direction — keep the field RTL so the button sits at the reading start, but the chosen filename itself is isolated so Arabic filenames (بحث-علمي.pdf) and Latin ones both read correctly. */ html[dir="rtl"] input[type="file"] { direction: rtl; unicode-bidi: isolate; } /* ========================================================================== 5. Components verified against the Arabic pages ========================================================================== */ /* Partner card (home page): the person illustration is a physical background pinned to 95% (the right edge) by css/new_home_page.css, and the space for it is reserved with padding-inline-end in css/open-sans-global.css. In RTL the copy starts at the right edge, i.e. on top of the illustration, so the illustration moves to the left. The image itself is deliberately NOT pixel-mirrored — flipping a photographed/illustrated person is a design decision, not a layout one. Needs a visual check that the figure still faces into the copy. */ html[dir="rtl"] .publisher_partner_inner { background-position: 5% bottom; } /* Back-to-top button: enago-kr-home.css pins it to right: 20px. Mirrored so it sits at the reading-end corner like the rest of the RTL chrome. NOTE: confirm with design — some Arabic sites keep this bottom-right. */ html[dir="rtl"] .scrollup { right: auto; left: 20px; } /* Breadcrumb trail (.breadcrumbss > ol.page_parents): built out of floats with an absolutely positioned "›" separator, declared identically in css/enago-kr.css and css/enago-kr-home.css — both legacy files we do not rewrite in place. Four things have to mirror together or the trail falls apart: ol floats left -> right, so the trail starts at the reading edge ol li floats left -> right, so الرئيسية comes first (rightmost) li a span floats left -> right (the label span is floated too, not inline, so leaving it breaks the item's shrink-wrap) li:after the separator is pinned with `left`, i.e. it renders BEFORE each item — so it moves to `right`, and the 25px gutter reserved for it swaps with the 5px on the other side Both offsets are restated because the two stylesheets declare this pseudo-element twice at equal specificity (.breadcrumbss li:after at 10px, .page_parents li:after at 5px, the latter winning as the later rule). The pair is mirrored so whichever one a page ends up with is still correct. The glyph: U+203A "›" is Bidi_Mirrored, so in an RTL paragraph engines that implement mirroring already flip it to "‹" — the direction we want, but not something to depend on. It is stated explicitly as U+2039 "‹" and isolated to LTR so the bidi algorithm cannot mirror it back, giving the same left-pointing (= forward, in Arabic) chevron everywhere. .publication-support .page_parents li:after hides the separator outright on publication-support-form.htm; that rule is untouched and still applies. */ html[dir="rtl"] .breadcrumbss ol, html[dir="rtl"] .breadcrumbss ol li, html[dir="rtl"] .breadcrumbss ol li a span { float: right; } html[dir="rtl"] .breadcrumbss ol li { padding-right: 25px; padding-left: 5px; } html[dir="rtl"] .breadcrumbss ol li:first-child { padding-right: 0; padding-left: 3px; } html[dir="rtl"] .breadcrumbss li:after { content: "\2039"; direction: ltr; unicode-bidi: isolate; left: auto; right: 10px; } html[dir="rtl"] .page_parents li:after { content: "\2039"; direction: ltr; unicode-bidi: isolate; left: auto; right: 5px; } /* ========================================================================== 6. Icons and arrows — deliberately NOT mirrored globally A blanket `transform: scaleX(-1)` on directional icons would be wrong here. The Arabic home page already uses `fa-angle-left` for its six "read more" affordances, which is correct for RTL: forward means leftward. Mirroring them would point them backwards. The custom carousels are likewise already handled where they live — css/editor-profiles.css mirrors .e2r-nav under [dir="rtl"], and css/testimonial-acceptedpaper.css pins .tap-t-track to LTR for its translateX() math and re-flips each card. Use .rtl-mirror to opt an individual icon in. ========================================================================== */ html[dir="rtl"] .rtl-mirror { display: inline-block; transform: scaleX(-1); } /* ========================================================================== 7. owl.carousel — configure in JS, not here The bundled owl 2.3 has official RTL support (.owl-rtl{direction:rtl} and .owl-rtl .owl-item{float:right}), driven by the `rtl: true` init option. Forcing the float from CSS alone would desync owl's JS position maths and break the slider, so there is deliberately no owl CSS in this file. When converting a page that has live owl markup (pricing.htm, publication-support/*, research-impact/graphical-abstract.htm, inc_testimonial_acceptedpaper.htm), add `rtl: true` to its owlCarousel() init and swap the navText chevrons so prev points right. The Arabic pages built so far have no owl markup — their owlCarousel() calls are inert. ========================================================================== */ /* Bootstrap's .col-*-offset-* is a bare margin-left, so it has to be zeroed and re-applied on the other side. Kept inside the same >= 768px media query Bootstrap uses for the -sm- prefix. */ @media (min-width: 768px) { html[dir="rtl"] .col-sm-offset-4 { margin-left: 0; margin-right: 33.33333333%; } } /* ========================================================================== Bootstrap 3 .input-group (third-party — not edited in place) .input-group is display:table, so under dir="rtl" the browser reverses the cell order on its own: the addon that is FIRST in the markup renders on the RIGHT. Bootstrap's seam styling is physical, though, so it stays pointed at the left and ends up on the wrong edge: .input-group-addon:first-child { border-right: 0 } .input-group *:first-child { border-*-right-radius: 0 } .input-group-addon:last-child { border-left: 0 } .input-group *:last-child { border-*-left-radius: 0 } Result on the Publication Support email field: the envelope addon loses the border on its OUTER edge and keeps rounded corners against the input, while the input keeps a rounded corner and a doubled border at the seam — the two cells read as detached instead of as one control. Bootstrap's actual intent is "square the corners on the side that adjoins the next cell", which is what the logical longhands below express. They are longhands for the same four corners, and this file loads after Bootstrap, so they win. 4px is Bootstrap 3's own $border-radius-base. ========================================================================== */ /* first in the markup = the reading-start cell; its seam faces inline-end */ html[dir="rtl"] .input-group .form-control:first-child, html[dir="rtl"] .input-group-addon:first-child, html[dir="rtl"] .input-group-btn:first-child > .btn, html[dir="rtl"] .input-group-btn:first-child > .dropdown-toggle { border-start-start-radius: 4px; border-end-start-radius: 4px; border-start-end-radius: 0; border-end-end-radius: 0; } /* last in the markup = the reading-end cell; its seam faces inline-start */ html[dir="rtl"] .input-group .form-control:last-child, html[dir="rtl"] .input-group-addon:last-child, html[dir="rtl"] .input-group-btn:last-child > .btn, html[dir="rtl"] .input-group-btn:last-child > .dropdown-toggle { border-start-end-radius: 4px; border-end-end-radius: 4px; border-start-start-radius: 0; border-end-start-radius: 0; } /* Bootstrap drops the addon's border on the seam side. `border-right: 0` also resets border-style to none, so the outer edge has to be restated in full, not just given its width back. #ccc is Bootstrap 3's .input-group-addon border-color. */ html[dir="rtl"] .input-group-addon:first-child { border-inline-start: 1px solid #ccc; /* outer edge — restored */ border-inline-end: 0; /* seam with the field */ } html[dir="rtl"] .input-group-addon:last-child { border-inline-end: 1px solid #ccc; border-inline-start: 0; }