/* * Right-to-left page layout. Linked only from the docinfo.html of RTL * locales (Arabic now; Yiddish when its human-reviewed translation lands), * so nothing here needs a [dir] guard: if this file is loaded, the page is * RTL. * * `direction: rtl` on is the part that works with JavaScript off; the * one-line js/dir-rtl.js sets the real dir="rtl" attribute as well, which is * what assistive tech and the browser's bidi algorithm want. The rest of * this file flips the handful of physical left/right choices in * grilled-cheese.css: the base stylesheet predates the locales and uses * physical properties throughout, and overriding the few that matter here * beats rewriting seven hundred lines to logical properties in the same * change that adds sixteen locales. */ html { direction: rtl; } /* The site nav has no override here any more. It is the part of the page that had to mirror in the most places (the links pushed to the far edge, the controls group, the language menu's dropdown panel), so it was rewritten in logical properties instead: margin-inline-start and inset-inline-end mirror themselves, and a rule that mirrors itself cannot fall out of step with this file the next time the header changes. */ /* The user guide's TOC rail moves to the right edge. */ @media (min-width: 62rem) { body.toc2 { padding-left: 0; padding-right: 17rem; } body.toc2 #toc.toc2 { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--gc-hairline); } } #toc ul { padding-left: 0; padding-right: 1.1rem; } #toc > ul { padding-right: 0; } ul, ol { padding-left: 0; padding-right: 1.4rem; } /* Section anchors hang off the start of the heading, now its right side. */ h2 > a.anchor, h3 > a.anchor, h4 > a.anchor, h5 > a.anchor, h6 > a.anchor { margin-left: 0; margin-right: -0.85em; } blockquote, .quoteblock blockquote { padding: 0.25rem 1.25rem 0.25rem 0; border-left: 0; border-right: 3px solid var(--gc-hairline); } /* The admonition accent stripe moves to the reading edge. */ .admonitionblock > table { border-left: 1px solid var(--gc-hairline); border-right: 4px solid var(--gc-accent-bright); } .admonitionblock.warning > table, .admonitionblock.caution > table { border-left-color: var(--gc-hairline); border-right-color: #d0521b; } table.tableblock caption, th.tableblock, td.tableblock { text-align: right; } /* The floated walkthrough wireframes mirror: a "right" wireframe was chosen to sit away from the start of the prose, and in RTL that side is the left. Same breakpoint as the base rules. */ @media (min-width: 48rem) { .imageblock.wireframe.left { float: right; margin: 0.5rem 0 1rem 1.75rem; } .imageblock.wireframe.right { float: left; margin: 0.5rem 1.75rem 1rem 0; } } /* The build stamp reads as three left-aligned Latin facts either way; keep the block itself anchored to the reading direction. */ .build-stamp { text-align: right; } /* Technical literals stay left-to-right, isolated from the RTL paragraph around them. Without this the Unicode bidi algorithm reorders a LEADING NEUTRAL character to the other end of the string: `@you.grilledcheese.app` rendered as `you.grilledcheese.app@`, because `@` is neutral, the Latin run after it is strong LTR, and a neutral between an RTL boundary and an LTR run takes the paragraph direction (UAX #9 rule N2) and is reordered to the visual right. The handle is then simply wrong: the at-sign is part of the name, not a trailing mark. `isolate` makes each literal its own bidi context, so the leading `@` resolves against the literal's own LTR direction and stays where it was typed. Handles, URLs, commands and file paths are all LTR strings whatever the page direction, so this applies to every monospace run. */ code, kbd, samp, pre, .literal, .literalblock pre, .listingblock pre { direction: ltr; unicode-bidi: isolate; } /* Block literals also read from the left edge; only their inline cousins sit inside RTL prose and inherit its alignment. */ pre, .literalblock pre, .listingblock pre { text-align: left; }