/* * Phase 3 RTL (JLRMED-1047) — content-only RTL stylesheet. * * Gated by the `lang-rtl-content` class added to in * jlr_media_preprocess_html() / jlr_media_2024_preprocess_html() when * _jlr_rtl_should_apply() returns TRUE (Arabic interface + Arabic translation * present + field_rtl_enabled = 1 + non-admin theme). * * Scope: only the article text inside text-only strips and the news header * block (title / date / "Further information" / "Notes to editors"). * Chrome (header, hamburger, language switcher, footer), forms, buttons, * carousels, hero media and the strip-level wrappers themselves are NEVER * targeted here. */ body.lang-rtl-content .strip-body-copy, body.lang-rtl-content .text-area-with-editor, body.lang-rtl-content .title-block-template .title-block, body.lang-rtl-content .subheading-template, body.lang-rtl-content .col2-text-template, body.lang-rtl-content.page-node-type-news .section-title, body.lang-rtl-content.page-node-type-news .headline, body.lang-rtl-content.page-node-type-news .bullet-strip, body.lang-rtl-content.page-node-type-news .blockquote-template, body.lang-rtl-content.page-node-type-news .panel-body, body.lang-rtl-content.page-node-type-news .tint-text { direction: rtl; text-align: right; unicode-bidi: plaintext; } body.lang-rtl-content.page-node-type-news .page-title, body.lang-rtl-content.page-node-type-news .date-holder, body.lang-rtl-content.page-node-type-news .foot-titles, body.lang-rtl-content.page-node-type-news .upper-title-description, body.lang-rtl-content.page-node-type-news .additional-information .col-first > div, body.lang-rtl-content.page-node-type-news .additional-information .notes-to-editors > div { direction: rtl; text-align: right; unicode-bidi: plaintext; } body.lang-rtl-content.page-node-type-news .container.wysiwyg { direction: rtl; text-align: right; unicode-bidi: plaintext; } /* * JLRTR-200: only text that is left aligned flips to the right. Anything the * templates deliberately centre stays centred. * * The wrapper rules above set `text-align: right` on containers, so most * centred elements only inherit it and a plain class selector is enough to win. * `.page-title` is the exception: it is targeted directly at (0,3,1), so the * compound `.page-title.text-center` at (0,4,1) is needed to beat it without * reaching for `!important`. Only `text-align` is overridden; `direction: rtl` * and the `unicode-bidi` handling still apply. */ body.lang-rtl-content .blockquote-template :is(.text-center, .central-quote-titles), body.lang-rtl-content .title-block-template .text-center, body.lang-rtl-content.page-node-type-news .page-title.text-center { text-align: center; } /* * `.blockquote-template blockquote p` is `display: inline-block` in main.css, * so `text-align: center` on the paragraph only centres the glyphs inside its * own shrink-to-fit box. Where that box sits is decided by the parent's * `text-align`: `start` on most bundles, `right` on news via the wrapper rule * above. Short Arabic quotes therefore hugged one edge while the speaker names * below, which are full-width blocks, centred correctly. Centre the parent so * the box lands in the middle. `text-align` has no physical side, so rtlcss * has nothing to flip. */ body.lang-rtl-content .blockquote-template blockquote { text-align: center; } /* * JLRTR-200: bullet markers sit on the right, on every bundle. * * `direction: rtl` puts the `list-style-position: outside` marker on the * inline-start side, which is the right, and the logical padding follows it. * This was previously chained to `.page-node-type-news .bullet-strip`, so * lists on page, feature_article, image_packs and video_pack kept their * markers on the left while the text moved. */ body.lang-rtl-content .bullet-strip ul, body.lang-rtl-content .inline-list ul { direction: rtl; padding-inline-start: 40px; padding-inline-end: 0; } /* * Lists authored in the WYSIWYG inherit `direction: rtl` from their wrapper, * so the markers already sit right, but the indent was left to the browser * default. Logical properties only, never padding-left/right, so rtlcss has * nothing to flip. * * `.container.wysiwyg` is kept news-scoped to match the wrapper rule above. * Widening it would flip lists inside `strip_body_full_width`, which uses a * bare `.container.wysiwyg` and is enabled on blog and feature_article, where * the surrounding prose gets no direction override. The list would then read * right-to-left inside left-to-right body copy. */ body.lang-rtl-content .strip-body-copy :is(ul, ol), body.lang-rtl-content .text-area-with-editor :is(ul, ol), body.lang-rtl-content.page-node-type-news .container.wysiwyg :is(ul, ol) { direction: rtl; padding-inline-start: 40px; padding-inline-end: 0; } /* * WYSIWYG bullets are not list markers. main.css sets list-style-type: none on * `.wysiwyg li` and draws a 5px square with `li:before` at a physical * `left: 0`, with a physical `padding-left: 18px` gutter and, on news and * feature pages, `margin-left: 15px`. `direction: rtl` on the list moves the * text but none of those, which is why the squares stayed on the left edge * while the text sat on the right. Physical properties on purpose: the `li` * carries `unicode-bidi: plaintext`, so logical sides could follow a Latin-only * item's content direction instead of the list's. This file is on the rtlcss * skip list, so nothing inverts them. */ body.lang-rtl-content .strip-body-copy li, body.lang-rtl-content .text-area-with-editor li, body.lang-rtl-content.page-node-type-news .container.wysiwyg li { padding-left: 0; padding-right: 18px; margin-left: 0; margin-right: 15px; } body.lang-rtl-content .strip-body-copy li:before, body.lang-rtl-content .text-area-with-editor li:before, body.lang-rtl-content.page-node-type-news .container.wysiwyg li:before { left: auto; right: 0; } body.lang-rtl-content .strip-body-copy :is(p, li, h1, h2, h3, h4, h5, h6, blockquote), body.lang-rtl-content .text-area-with-editor :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) { unicode-bidi: plaintext; } body.lang-rtl-content .tint-text i.jlrnew-arrow_right { display: inline-block; transform: scaleX(-1); } /* * JLRMED-1047 follow-up — image-overlay / inset-text strips on feature_article, * page, image_packs, video_pack. The narrow news-only scope above leaves these * strips LTR. Targets the text wrapper inside the inset card, not the strip's * structural columns (image stays on the original side). */ body.lang-rtl-content .image-with-inset-text .inset-text-box .panel-body, body.lang-rtl-content .image-with-inset-text .inset-text-box .panel-body :is(h1, h2, h3, h4, h5, h6, p, div, li), body.lang-rtl-content .big-image-left .panel-box .panel-body, body.lang-rtl-content .big-image-right .panel-box .panel-body, body.lang-rtl-content .impact-full .tint-block, body.lang-rtl-content .impact-half .tint-block, body.lang-rtl-content .impact-full .tint-block :is(h1, h2, h3, h4, h5, h6, p), body.lang-rtl-content .impact-half .tint-block :is(h1, h2, h3, h4, h5, h6, p), body.lang-rtl-content .hero-image-strip .hero-text-box, body.lang-rtl-content .hero-image-strip .hero-text-box :is(h1, h2, h3, h4, h5, h6, p) { direction: rtl; text-align: right; unicode-bidi: plaintext; }