/* RIGHT-TO-LEFT GLYPH DIRECTION -- cars channel. Created 29 August 2026 by the RTL campaign. Every rule here is scoped to [dir="rtl"], and the sheet is only linked when the locale is right-to-left, so an English reader never downloads it and English rendering cannot change. WHY A SEPARATE SHEET, AND WHY IT EXISTS AT ALL --------------------------------------------- The campaign's directional sweep looked for directional PROPERTIES: left and right longhands, insets, asymmetric shorthands, text-align. A glyph pointing the wrong way is none of those. An arrow is a full of coordinates; it declares nothing a property scanner can match and getComputedStyle reports nothing unusual about it. So the sweep was complete on its own terms while every forward affordance on the Arabic site still pointed at the wrong edge. The homepage hero search button was the one a human finally noticed. Enumerated by /home/demo/i18n-guard/glyph-recon.py, which classifies a glyph by its path geometry rather than by its class name. Re-run it after adding any icon; it will list what is unmirrored and what must stay put. WHAT IS DELIBERATELY ABSENT --------------------------- Pagination and breadcrumb separators are NOT here. This codebase draws those with the angle-quote characters < > and << >> (U+2039/U+203A, U+00AB/U+00BB), which carry Unicode Bidi_Mirrored=Yes: the shaper flips them automatically in a right-to-left run. They are already correct, and adding scaleX(-1) would flip a working glyph BACK to wrong. Twenty-two glyphs on this site are in that category. Arrow characters like -> (U+2192) do NOT have the property, which is why the two cases have to be told apart rather than treated alike. Also absent: play triangles, pencils, magnifiers, plus signs, lightning bolts and every up/down caret. A dropdown caret points down in Arabic too, and a glyph whose meaning is fixed rather than directional must never mirror -- the same reasoning that keeps the Jordanian flag upright. */ /* ---------------------------------------------------------------- homepage -- The reported defect. A "go and search" affordance points toward the reading direction, so it points left in Arabic. The transform is on the SVG, not on the button, throughout this file: several of these buttons already carry a transform of their own for vertical centring, and a second transform declaration on the same element REPLACES it rather than adding to it. */ [dir="rtl"] .op-hs-go svg, [dir="rtl"] .op-dealer-band__cta svg { transform: scaleX(-1); } /* Category and offers rails. Both members of each prev/next pair flip: the layout already puts "previous" at the inline start, which is the right-hand side in Arabic, so the glyph that sits there must point right. Mirroring only one of a pair leaves two arrows pointing the same way. .op-cat-carousel__nav and .op-offers__nav both carry translateY(-50%) for vertical centring -- which is exactly why these target the inner svg. */ [dir="rtl"] .op-cat-carousel__nav svg, [dir="rtl"] .op-offers__nav svg { transform: scaleX(-1); } /* ------------------------------------------------------- offers and dealers -- */ [dir="rtl"] .op-offer__cta svg, [dir="rtl"] .offers-pagination__item svg { transform: scaleX(-1); } /* ------------------------------------------------ showrooms, sellers, sell -- */ [dir="rtl"] .sr-pager__link svg, [dir="rtl"] .seller-others li a svg, [dir="rtl"] .showroom-others li a svg, [dir="rtl"] .sfm-speed__go svg, [dir="rtl"] .sfm-back svg { transform: scaleX(-1); } /* The showroom card's call to action, and its hover nudge. .sr-card:hover .sr-card__cta svg already declares transform: translateX(3px), at specificity (0,3,1) -- higher than the (0,2,1) of the rule below. Without the second rule the arrow would flip correctly at rest and then snap back to pointing the wrong way the moment the card was hovered, because the hover declaration replaces the whole transform rather than adding to it. The nudge is also negated: 3px toward the reading direction is -3px in Arabic. */ [dir="rtl"] .sr-card__cta svg { transform: scaleX(-1); } [dir="rtl"] .sr-card:hover .sr-card__cta svg { transform: translateX(-3px) scaleX(-1); } /* ------------------------------------------------------------- my account -- The "view this" chevron that ends every account summary row, on nine pages. .acct-link, .acct-policy__view and .acct-appt__view carry no transform of their own and hold no glyph other than this chevron. */ [dir="rtl"] .acct-link svg, [dir="rtl"] .acct-policy__view svg, [dir="rtl"] .acct-appt__view svg { transform: scaleX(-1); } /* The one back arrow in the account page-header actions area. .acct-btn is a general button class used at seventeen sites carrying pencils, plus signs and a refresh mark -- mirroring those would be a defect of its own, so this must NOT be written as `.acct-btn svg`. Every icon-bearing button in an actions slot is .acct-btn--primary; the single back chevron, on listing-edit, is the only plain one. Hence the :not(). If a non-primary icon-bearing button is ever added to a page header, glyph-recon will surface it and this selector should be narrowed rather than widened. */ [dir="rtl"] .acct__head-aside .acct-btn:not(.acct-btn--primary) svg { transform: scaleX(-1); } /* ------------------------------------------------------------- sell form -- The disclosure chevron on a `label -- value -- chevron` row, which sits at the row's inline end and points along the reading direction. The class is on the svg itself, so this is not a descendant selector. The open state is deliberately left alone: .sell-row.is-open .sell-row__chevron declares rotate(90deg) at specificity (0,3,0), beats the (0,2,0) below, and replaces the transform entirely -- which is correct, since an expanded row's chevron points DOWN in both languages. */ [dir="rtl"] .sell-row__chevron { transform: scaleX(-1); } /* --------------------------------------------------- mobile header search -- The back arrow that leaves the fullscreen search overlay. Both buttons in .op-hs__form share the class .op-hs__iconbutton -- this one and the "clear the term" button -- so the child-and-first-of-type scope is what separates them without touching markup. Should the overlay button ever be absent when this rule applies, the fallback target is the clear button, whose glyph is a symmetric X: flipping it is a visual no-op rather than a defect. */ [dir="rtl"] .op-hs__form > .op-hs__iconbutton:first-of-type svg { transform: scaleX(-1); }