/** * Damas Rose right-to-left. * * Loaded only when the page is Arabic. The browser mirrors text direction on its own once * is set, but it does not mirror the layout: a margin written margin-left stays on * the left whichever way the text runs. design.css and theme.css between them hold about a hundred * such declarations, so this file restates each of them on the other side. * * Only the asymmetric ones are here. A rule that already sets both sides (left: 0; right: 0) or * centres with translateX(-50%) needs nothing, and repeating it would only add something else to * keep in step. * * Every selector below is prefixed [dir="rtl"] so this file is inert on the English site even if it * is ever loaded there by mistake. * * @package DamasRose */ /* ------------------------------------------------------------------------- * Type. * * The self-hosted faces are latin and latin-ext only — Fraunces and DM Sans carry no Arabic * glyphs, so Arabic text falls back to whatever the browser picks and the page loses its * typography. This names a reasonable Arabic stack per platform so the fallback is at least * consistent and readable. A self-hosted Arabic face is the real fix and a design decision. * ---------------------------------------------------------------------- */ [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3 { font-family: 'Tajawal', "Segoe UI", Tahoma, "Geeza Pro", sans-serif; } /* Arabic has no italics; a slanted Arabic face is a browser-synthesised distortion. */ [dir="rtl"] em, [dir="rtl"] i, [dir="rtl"] cite, [dir="rtl"] blockquote { font-style: normal; } /* Arabic numerals in prices stay latin, so keep those runs left-to-right inside the RTL flow. */ [dir="rtl"] .woocommerce-Price-amount, [dir="rtl"] .price, [dir="rtl"] .amount { direction: ltr; unicode-bidi: embed; } /* The containers need the same treatment, not just the figures inside them. A sale price is two inline boxes - the new figure and the struck original - and an RTL container reorders them as a bidi run. The reordering also carries the 8px margin that separates them out to the edge of the line, which is why the Arabic cards read "44.99 AED60.00 AED" with the two figures welded together while English reads correctly. Making the container itself an LTR context keeps the pair in the order the design intends and puts the gap back between them; text-align holds the block against the right edge of the RTL card. */ [dir="rtl"] .card__p, [dir="rtl"] .fx__price, [dir="rtl"] .pprice__now, [dir="rtl"] .line__p { direction: ltr; text-align: right; } /* ------------------------------------------------------------------------- * design.css — pinned elements and spacing. * ---------------------------------------------------------------------- */ [dir="rtl"] .dot { right: auto; left: 1px; } [dir="rtl"] .sound { right: auto; left: var(--pad); } [dir="rtl"] .card { text-align: right; } [dir="rtl"] .card__t { left: auto; right: 12px; } [dir="rtl"] .quiz__p { left: auto; right: 0; } /* * Sliding panels. * * These are parked off-screen with a translateX and slid in by removing it, so moving the anchor to * the other edge without flipping the sign pushes the panel *into* view instead of out of it — which * is how the wishlist drawer ended up sitting open across the page in Arabic. * * The .on rules have to be restated too. "[dir=rtl] .drw" and ".drw.on" carry the same specificity, * and this file loads last, so without these the panel could never open. */ [dir="rtl"] .drw { right: auto; left: 0; transform: translateX(-102%); } [dir="rtl"] .drw.on { transform: none; } /* The filter panel is only a drawer below 1024px; above that it is a sticky sidebar at top:120px. Mirroring it outside a media query moved the desktop sidebar 255px across the page and reset its sticky offset to zero, so the override lives in the same breakpoint the drawer does. LTR slides it in from the left, so RTL brings it from the right. */ @media (max-width: 1024px) { [dir="rtl"] .filters { inset: 0 0 0 auto; transform: translateX(102%); } [dir="rtl"] .filters.on { transform: none; } } [dir="rtl"] .modal button { right: auto; left: var(--pad); } [dir="rtl"] .acc__h { text-align: right; } [dir="rtl"] .cat__x { text-align: right; } [dir="rtl"] .fx__meta { text-align: right; } [dir="rtl"] .fx__play { right: auto; left: 16px; } [dir="rtl"] .fx__play svg { margin-left: 0; margin-right: 2px; } [dir="rtl"] .crumbs li + li::before { margin-right: 0; margin-left: 8px; } [dir="rtl"] .cbadges { left: auto; right: 12px; } [dir="rtl"] .cwish { right: auto; left: 10px; } /* Prices are a latin-digit run, so bidi keeps them left-to-right even inside an RTL line: the sale figure stays on the left and the struck original on the right, exactly as in English. Mirroring this margin moved the 8px gap to the outer edge and welded the two figures together ("44.99 AED60.00 AED"). The gap belongs where the design put it, so nothing is flipped here. */ [dir="rtl"] .pth__play svg { margin-left: 0; margin-right: 1px; } [dir="rtl"] .pbadges { left: auto; right: 16px; } [dir="rtl"] .pzoomhint { right: auto; left: 14px; } [dir="rtl"] .plabel em { margin-left: 0; margin-right: 8px; } [dir="rtl"] .rbar em { text-align: left; } [dir="rtl"] .rev time { margin-left: 0; margin-right: auto; } [dir="rtl"] .shopbar__r { margin-left: 0; margin-right: auto; } [dir="rtl"] .facet summary i { border-right: 0; border-left: 1.5px solid var(--ink-3); } [dir="rtl"] .fopt em { margin-left: 0; margin-right: auto; } [dir="rtl"] .fopt.on .fbox::after { left: auto; right: 5px; } [dir="rtl"] .loadmore em { margin-left: 0; margin-right: 8px; } [dir="rtl"] .sumry__t b { text-align: left; } [dir="rtl"] .opt2__p { margin-left: 0; margin-right: auto; } [dir="rtl"] .acct__nav a, [dir="rtl"] .acct__out { text-align: right; } /* ------------------------------------------------------------------------- * theme.css — WooCommerce surfaces and page furniture. * ---------------------------------------------------------------------- */ [dir="rtl"] .skip-link:focus { left: auto; right: 12px; } [dir="rtl"] .mnav__a { text-align: right; } [dir="rtl"] .card__acts { left: 10px; right: 10px; } [dir="rtl"] .card__acts .card__add { left: auto; right: auto; } [dir="rtl"] .mega { left: auto; right: 0; } [dir="rtl"] .prose ul, [dir="rtl"] .prose ol, [dir="rtl"] .comments__list, [dir="rtl"] .legal__b ul, [dir="rtl"] .legal__b ol { padding-left: 0; padding-right: 1.2em; } [dir="rtl"] .fx__buy .btn { margin-left: 0; margin-right: auto; } /* Same latin-digit run, same reason as .card__p s above: not mirrored. */ [dir="rtl"] .opt2__icon { margin-left: 0; margin-right: auto; } [dir="rtl"] .sumry .woocommerce-remove-coupon { margin-left: 0; margin-right: 6px; } [dir="rtl"] .opt2 input.shipping_method[type="hidden"] + .opt2__b { padding-left: inherit; padding-right: 0; } [dir="rtl"] .line__note { padding-left: 0; padding-right: calc(64px + 14px); } [dir="rtl"] .pdp2 table.variations th, [dir="rtl"] .pdp2 table.variations td, [dir="rtl"] .woocommerce-orders-table th, [dir="rtl"] .woocommerce-orders-table td, [dir="rtl"] .woocommerce-table th, [dir="rtl"] .woocommerce-table td { text-align: right; } /* The coloured rule that marks a notice belongs on the side the eye starts from. */ [dir="rtl"] .woocommerce-message, [dir="rtl"] .woocommerce-info, [dir="rtl"] .woocommerce-error, [dir="rtl"] .woocommerce-noreviews, [dir="rtl"] .wc-block-components-notice-banner { border-left: 0; border-right: 3px solid var(--world-accent); } [dir="rtl"] .ordnotes li { border-left: 0; border-right: 2px solid var(--world-accent); } [dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow { right: auto; left: 8px; } /* The service strip divides between cells, and the divider has to move with the reading order. */ [dir="rtl"] .svc__i + .svc__i { border-left: 0; border-right: 1px solid var(--line); } [dir="rtl"] .svc__i:first-child { padding-left: inherit; padding-right: 0; } [dir="rtl"] .svc__i:last-child { padding-right: inherit; padding-left: 0; } [dir="rtl"] .svc__i:nth-child(odd) { padding-left: inherit; padding-right: 0; border-left: inherit; border-right: 0; } [dir="rtl"] .svc__i:nth-child(even) { padding-right: inherit; padding-left: 0; } [dir="rtl"] .svc__i, [dir="rtl"] .svc__i:nth-child(even) { border-left: inherit; border-right: 0; } /* ------------------------------------------------------------------------- * Icons that point. * * A chevron or arrow drawn pointing right means "forward" in English and "backward" in Arabic, so * the ones used for direction are flipped. Decorative marks are left alone. * ---------------------------------------------------------------------- */ [dir="rtl"] .crumbs li + li::before, [dir="rtl"] .loadmore em, [dir="rtl"] .pagination .next svg, [dir="rtl"] .pagination .prev svg, [dir="rtl"] .acc__h svg, [dir="rtl"] .facet summary svg { transform: scaleX(-1); } /* Display type ------------------------------------------------------------ .disp is set for Fraunces, and every part of that setting is wrong for Arabic: 1. font-family. Tajawal was applied to body and to h1-h4, but .disp is just as often on a link or a span, so 11 of the 13 .disp elements on the Arabic home page were still resolving to Fraunces. Fraunces carries no Arabic, so the browser substituted per character and the page quietly ran two Arabic faces. 2. line-height:1. Latin display type can sit on its own cap height; Arabic cannot. Between the alif and lam ascenders and the shadda in تسوّق, the ink measured 104px inside a 93px box - the tops were being cut off. 3. letter-spacing:-.018em. Arabic is a connected script. Negative tracking pulls the joins into each other; there is nothing to tighten. 4. font-variation-settings. SOFT and WONK are Fraunces axes. They mean nothing to Tajawal and are cleared so they cannot interfere with weight synthesis. */ [dir="rtl"] .disp, [dir="rtl"] .disp em { font-family: 'Tajawal', "Segoe UI", Tahoma, "Geeza Pro", sans-serif; font-variation-settings: normal; letter-spacing: normal; line-height: 1.3; } /* Cart page --------------------------------------------------------------- The page header and the line-item column inherit text-align from a chain that includes the LTR price contexts above, so "start" does not always resolve to the right edge the way the rest of the Arabic page does. Stating it outright keeps the bag reading from the right, while the price figures inside keep their own LTR run. */ [dir="rtl"] .phero, [dir="rtl"] .phero .wrap, [dir="rtl"] .cartpage, [dir="rtl"] .cart__lines, [dir="rtl"] .line, [dir="rtl"] .line__m, [dir="rtl"] .sumry { text-align: right; } /* The line-item figures stay a left-to-right run, right-aligned in their column. .sumry__t b is deliberately left-aligned further up - that is the summary value sitting opposite its label - so it is not touched here. */ [dir="rtl"] .line__p { direction: ltr; text-align: right; } /* The films strip reuses .fx__price for a subtitle when a film has no product attached, so the latin-run rule above was forcing Arabic prose left-to-right. The modifier hands it back. */ [dir="rtl"] .fx__price--text { direction: rtl; } /* Legal pages ------------------------------------------------------------ Terms, Privacy and Shipping & Returns are published in English on both sites, pending a human legal translation. Inside an RTL page that English was being right-aligned, which puts every full stop on the wrong side of the sentence and makes a long document genuinely hard to read. The body reads left-to-right; the page around it, and the Arabic notice at the top of it, stay right-to-left. Remove this block once the legal text is actually translated. */ [dir="rtl"] .legal__b { direction: ltr; text-align: left; } [dir="rtl"] .legal__b .dr-legal-lang-note, [dir="rtl"] .legal__b .mut { direction: rtl; text-align: right; } /* WooCommerce prints the "includes VAT" note as a inside the total value cell, which is deliberately left-aligned in RTL because it holds a figure. The note is a sentence, not a figure, so it was the one piece of Arabic prose on the cart and checkout reading against the page. */ [dir="rtl"] small.includes_tax, [dir="rtl"] .includes_tax { display: block; direction: rtl; text-align: right; } /* Fields whose value is never Arabic ------------------------------------ An email address, a phone number, a URL or a plain number is a latin run whatever the page direction. Typed into an RTL field the value still stores correctly, but the caret jumps to the wrong end and the text sits against the wrong edge while it is being entered. Pinning these to LTR only changes how they behave under the cursor. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="number"], [dir="rtl"] input[name*="email"], [dir="rtl"] input[name*="phone"], [dir="rtl"] input[name*="postcode"] { direction: ltr; text-align: right; } /* Word-reveal headings ---------------------------------------------------- .split wraps each word in a .w with overflow:hidden so the inner can slide up out of a mask. Two things break that in Arabic: 1. A .w is meant to hold exactly one word, but nothing stops the text inside it wrapping. When it does, the second line sits outside the mask and is cut: "مراحل" and "الإبداع" measured 110px of ink inside a 52px box. nowrap keeps each word on the single line the mask expects. 2. Arabic ink is taller than the latin the mask was sized for, so even unwrapped words lost a few pixels off the bottom. The .04em the design allows is right for Fraunces and not enough for Tajawal's descenders. */ [dir="rtl"] .split .w { white-space: nowrap; padding-bottom: .14em; } /* Card actions ------------------------------------------------------------ On a pointer the bar is anchored to both card edges (design.css: left:10px;right:10px) and .card__add flexes to fill it, so there is no side to mirror -- the generic RTL rule above just restores that symmetry. The phone layout is different: theme.css collapses the bar to a single filled circle pinned to the bottom-right corner, and that corner does have to mirror. */ @media (max-width: 640px) { [dir="rtl"] .card__acts { left: 10px; right: auto; } }