/* =========================================================================== Arabic / RTL overrides for the Blog front end. Loaded ONLY on pages whose post row carries lang = 'ar'. English pages never see this file, so nothing here can affect the existing site. The page layouts are Bootstrap 4 flexbox grids and the page CSS is namespaced under #beveron-frontend-only-layout with no floats, so dir="rtl" on already flips the column order on its own. What is left are the directional utilities Bootstrap 4 hard-codes (it shipped no RTL build), a handful of inline text-align rules in the views, and the typography Arabic needs. =========================================================================== */ /* --- Typography ----------------------------------------------------------- Inter carries no Arabic glyphs. Without an Arabic face the browser falls back to whatever the OS offers, which differs on every device. Latin runs (brand names, product names, URLs) still resolve to Inter through the fallback chain. */ html[dir="rtl"], html[dir="rtl"] body { font-family: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* .pubview-body in style-v2.css forces `font-family: var(--font-sans) !important` on the wrapper AND on every descendant, so the descendant wildcard has to be answered here or Arabic body copy loses its Arabic face. */ html[dir="rtl"] .pubview-body, html[dir="rtl"] .pubview-body *, html[dir="rtl"] .pubview-body p, html[dir="rtl"] .pubview-body li, html[dir="rtl"] .pubview-body h1, html[dir="rtl"] .pubview-body h2, html[dir="rtl"] .pubview-body h3, html[dir="rtl"] .pubview-body h4, html[dir="rtl"] .pubview-title, html[dir="rtl"] .pubview-sidebar-title, html[dir="rtl"] .pubview-recent-body h4, html[dir="rtl"] .card-title, html[dir="rtl"] .card-text { font-family: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important; } /* Arabic script sits lower and needs more leading than Latin at the same size. */ html[dir="rtl"] .pubview-body, html[dir="rtl"] .pubview-body p { line-height: 2 !important; } html[dir="rtl"] .pubview-body li { line-height: 1.95 !important; } /* --- Direction ------------------------------------------------------------ Anything the views set to left explicitly has to be unset, otherwise the Arabic text is right-to-left but hugs the wrong edge. */ html[dir="rtl"] #beveron-frontend-only-layout, html[dir="rtl"] .pubview-container, html[dir="rtl"] .pubview-article, html[dir="rtl"] .pubview-body, html[dir="rtl"] .pubview-body p, html[dir="rtl"] .pubview-body li, html[dir="rtl"] .pubview-body h1, html[dir="rtl"] .pubview-body h2, html[dir="rtl"] .pubview-body h3, html[dir="rtl"] .pubview-body h4, html[dir="rtl"] .pubview-title, html[dir="rtl"] .card-body h5, html[dir="rtl"] .card-body p { text-align: right !important; } /* Lists carry their bullets on the leading edge. */ html[dir="rtl"] .pubview-body ul, html[dir="rtl"] .pubview-body ol { padding-right: 1.5rem; padding-left: 0; } /* Blockquotes and any left accent rule move to the right. */ html[dir="rtl"] .pubview-body blockquote { border-left: 0; border-right: 3px solid var(--accent-cyan, #1473e6); padding-left: 0; padding-right: 1rem; border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px); } /* Tables inside pasted content. */ html[dir="rtl"] .pubview-body table th, html[dir="rtl"] .pubview-body table td { text-align: right; } /* --- Bootstrap 4 directional utilities ------------------------------------ Bootstrap 4 never shipped an RTL build, so its padding, margin and float utilities stay physical. Only the ones the blog views actually use are flipped here; flipping the whole set would risk changing something unrelated. */ html[dir="rtl"] .pr-lg-5 { padding-right: 0 !important; } @media (min-width: 992px) { html[dir="rtl"] .pr-lg-5 { padding-left: 3rem !important; padding-right: 0 !important; } } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } /* --- Bidirectional text --------------------------------------------------- Arabic copy is full of Latin runs: product names, "Beveron Technologies", version numbers, URLs. Without isolation the bidi algorithm drags trailing punctuation to the wrong end of the line, which is the single most common way an Arabic page looks broken. */ html[dir="rtl"] .pubview-body p, html[dir="rtl"] .pubview-body li, html[dir="rtl"] .pubview-body h1, html[dir="rtl"] .pubview-body h2, html[dir="rtl"] .pubview-body h3, html[dir="rtl"] .pubview-title { unicode-bidi: plaintext; } /* Anything explicitly marked as Latin stays Latin, left to right. */ html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; text-align: left; } /* Phone numbers. "+971-55-7648808" begins with '+', which bidi treats as neutral, so in an RTL paragraph it is pushed to the visual end and reads "971-55-7648808+". Forcing the link itself to LTR fixes the sign and also puts the call icon back on the leading edge, since inline children otherwise lay out right to left. nav.html is shared with the English site and is not touched; this sheet only ever loads on an Arabic page. */ html[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* The English call-to-action block is English copy sitting inside an RTL page. Left to the page direction its trailing '?' and '.' jump to the wrong end ("?Ready for LegalTech Automation"), so the whole card reads as LTR. */ html[dir="rtl"] .webview-side-form { direction: ltr; text-align: left; } html[dir="rtl"] .webview-side-form h3, html[dir="rtl"] .webview-side-form p, html[dir="rtl"] .webview-side-form label, html[dir="rtl"] .webview-side-form input, html[dir="rtl"] .webview-side-form textarea, html[dir="rtl"] .webview-side-form select, html[dir="rtl"] .webview-side-form button { direction: ltr !important; text-align: left !important; } /* Western digits read correctly inside Arabic sentences. */ html[dir="rtl"] time, html[dir="rtl"] .pubview-meta, html[dir="rtl"] .pubview-recent-date { unicode-bidi: isolate; } /* Meta and recent-card icons sit on the leading edge, which is the right in RTL. style-v2.css gives them a physical margin-right. */ html[dir="rtl"] .pubview-meta i, html[dir="rtl"] .pubview-recent-date i { margin-right: 0; margin-left: 5px; } /* --- Components ----------------------------------------------------------- The sidebar, cards and pagination pick up their new side from the flex direction. Only their internal decoration needs a nudge. */ html[dir="rtl"] .pubview-sidebar-sticky, html[dir="rtl"] .pubview-sidebar-title { text-align: right; } /* The sidebar column carries a physical left pad in style-v2.css. */ html[dir="rtl"] .pubview-sidebar { padding-left: 0; padding-right: 8px; } @media (max-width: 991px) { html[dir="rtl"] .pubview-sidebar { padding-left: 16px; padding-right: 16px; } } html[dir="rtl"] .pagination { padding-right: 0; } html[dir="rtl"] .breadcrumb { padding-right: 0; } /* Search and filter inputs on the webinars / publications index. */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="search"], html[dir="rtl"] select, html[dir="rtl"] textarea { text-align: right; direction: rtl; } /* Fields that must stay Latin whatever the page direction is. */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: left; } /* Font Awesome arrows point the other way in an RTL reading order. */ html[dir="rtl"] .fa-angle-right:before { content: "\f104"; } html[dir="rtl"] .fa-angle-left:before { content: "\f105"; } html[dir="rtl"] .fa-arrow-right:before { content: "\f060"; } html[dir="rtl"] .fa-arrow-left:before { content: "\f061"; }