/* ============================================================================ Right-to-left support. ---------------------------------------------------------------------------- Setting dir="rtl" on (js/i18n.js) already gives us the important half for free: text flow, caret movement, selection, word wrapping, list markers, scrollbar side and default text alignment are all mirrored by the browser. What it does NOT mirror is CSS that names a physical side — `left`, `right`, `margin-left`, `border-right`, and so on. The existing stylesheets use those heavily, so this file flips the ones that carry layout meaning. Rule of thumb applied here: mirror STRUCTURE (which side a panel sits on, which way a chevron points, which edge a border hugs) but never mirror CONTENT that is inherently left-to-right — code blocks, formulas and URLs stay LTR, because Arabic-language users still read `const x = 1` in that order. That's the difference between a translated app and a broken one. ============================================================================ */ /* ---------------------------------------------------------------- shell -- */ /* The sidebar/main split is a flex row, so reversing it moves the rail to the right — where a right-to-left reader expects primary navigation. */ html[dir="rtl"] body { direction: rtl; } html[dir="rtl"] #sidebar { border-right: none; border-left: 1px solid var(--border, rgba(0, 0, 0, .08)); } /* The collapse/expand chevrons point the other way when the rail is on the right. */ html[dir="rtl"] #btn-collapse svg, html[dir="rtl"] #btn-expand svg { transform: scaleX(-1); } /* Section twisties rotate from the mirrored baseline. */ html[dir="rtl"] .sb-sec-twist { transform: scaleX(-1); } html[dir="rtl"] .sb-section[data-collapsed] .sb-sec-twist { transform: scaleX(-1) rotate(-90deg); } /* Tree indentation is a left padding in LTR. */ html[dir="rtl"] .tree-item { padding-left: 0; padding-right: var(--tree-indent, 0px); } /* ------------------------------------------------------------- topbar --- */ html[dir="rtl"] .topbar-right { margin-left: 0; margin-right: auto; } html[dir="rtl"] #breadcrumbs .crumb-sep { transform: scaleX(-1); display: inline-block; } html[dir="rtl"] .navhist svg { transform: scaleX(-1); } /* ------------------------------------------------------------- editor --- */ /* Block gutter affordances (＋ and ⋮⋮) live off the left edge in LTR. */ html[dir="rtl"] .block-gutter { left: auto; right: -52px; } html[dir="rtl"] .block { padding-left: 0; padding-right: 0; } html[dir="rtl"] .block[data-indent] { margin-left: 0; } /* Quote and callout accents hug the reading edge. */ html[dir="rtl"] .b-quote { border-left: none; border-right: 3px solid var(--border-strong, rgba(0, 0, 0, .2)); padding-left: 0; padding-right: 14px; } html[dir="rtl"] .b-callout { text-align: right; } /* Checkbox / bullet markers sit on the reading edge. */ html[dir="rtl"] .b-todo .todo-box, html[dir="rtl"] .b-bullet::before { left: auto; right: 0; } /* Toggle triangles point inward from the right. */ html[dir="rtl"] .toggle-tri { transform: scaleX(-1); } html[dir="rtl"] .block.open > .toggle-tri { transform: scaleX(-1) rotate(90deg); } /* --- content that must STAY left-to-right ------------------------------- */ /* Code, math and URLs are not natural-language text; mirroring them would be actively wrong. `unicode-bidi: isolate` keeps them from disturbing the surrounding RTL paragraph either. */ html[dir="rtl"] pre, html[dir="rtl"] code, html[dir="rtl"] .b-code, html[dir="rtl"] .code-wrap, html[dir="rtl"] .math-wrap, html[dir="rtl"] .katex, html[dir="rtl"] .bm-url, html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="email"], html[dir="rtl"] .settings-input[type="url"] { direction: ltr; text-align: left; unicode-bidi: isolate; } /* ---------------------------------------------------------- database --- */ /* Table cells inherit direction, but the row gutter and sticky first column are physically positioned. */ html[dir="rtl"] .db-row-gutter { left: auto; right: 0; } html[dir="rtl"] .db-col-frozen { left: auto !important; right: var(--frozen-offset, 0); } html[dir="rtl"] .db-col-frozen-last { box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .18); } html[dir="rtl"] .db-tool-spacer { margin-left: 0; margin-right: auto; } /* Board columns read right-to-left. */ html[dir="rtl"] .db-board { flex-direction: row-reverse; } /* ------------------------------------------------------------ overlays -- */ html[dir="rtl"] .db-pop-item, html[dir="rtl"] .result-item, html[dir="rtl"] .wsearch-item { text-align: right; } html[dir="rtl"] #comments-drawer { right: auto; left: 0; } html[dir="rtl"] .palette-all { margin-left: 0; margin-right: auto; } html[dir="rtl"] .toast-action { margin-left: 0; margin-right: 12px; } /* Floating docks pinned to a corner swap corners. */ html[dir="rtl"] .voice-dock, html[dir="rtl"] .focus-timer { right: auto; left: 18px; } html[dir="rtl"] .outline-rail { right: auto; left: 0; } /* ------------------------------------------------------------- login ---- */ /* The split screen keeps the brand panel on the outside edge. */ html[dir="rtl"] .login-split { flex-direction: row-reverse; } html[dir="rtl"] .login-in-ic { left: auto; right: 12px; } html[dir="rtl"] .login-input { padding-left: 14px; padding-right: 40px; } html[dir="rtl"] .login-pw-toggle, html[dir="rtl"] .login-in-ok { right: auto; left: 10px; } html[dir="rtl"] .login-home svg { transform: scaleX(-1); } /* ------------------------------------------------- per-paragraph direction -- A notes app is multilingual by nature: an Arabic workspace still contains English paragraphs, quoted code, and product names. Forcing all of it to RTL produces the classic bidi artefact where an English sentence renders its full stop at the *start* of the line (".Start a fresh page"). `unicode-bidi: plaintext` fixes this at the root: each paragraph takes its direction from its own first strong character. Arabic text flows RTL, English text flows LTR, and both are correct in the same document without the user tagging anything. `text-align: start` then aligns each to its own reading edge. This is applied to CONTENT, not chrome — chrome is translated, so it always matches the interface direction. Note that `unicode-bidi` does NOT inherit, so it has to land on the elements that actually contain the text — hence the tag sweep rather than one rule on a container. Scoped to the scrolling content region so translated chrome (sidebar, toolbars, modals) is unaffected. */ html[dir="rtl"] #page-scroll :is( p, h1, h2, h3, h4, h5, h6, li, td, th, dd, dt, figcaption, blockquote, span, div, a, small, strong, em, label, summary ) { unicode-bidi: plaintext; text-align: start; } /* Editable surfaces need it too, so typing English inside an Arabic workspace behaves — the caret and punctuation follow the paragraph you're actually in. */ html[dir="rtl"] .block-content, html[dir="rtl"] #page-title, html[dir="rtl"] .col-tx, html[dir="rtl"] .t-cell, html[dir="rtl"] .cv-card-text, html[dir="rtl"] .db-cell-text, html[dir="rtl"] .db-card-title, html[dir="rtl"] .cmt-body, html[dir="rtl"] .ai-md, /* the assistant's own copy is migrating to t() incrementally, so an Arabic workspace still shows English strings here — without plaintext they render with the full stop leading the line (".Ask anything") */ html[dir="rtl"] .ai-chat-input, html[dir="rtl"] .ai-thread-empty, html[dir="rtl"] .ai-ctx-text { unicode-bidi: plaintext; text-align: start; } /* --------------------------------------------------------------- misc --- */ /* Arabic has no letter case, so uppercase transforms just look shouty and render some glyphs oddly. Drop them. */ html[lang="ar"] .sb-section-title, html[lang="ar"] .settings-section-label, html[lang="ar"] .lg-mark { text-transform: none; letter-spacing: 0; } /* Arabic script needs a little more line height to breathe. */ html[lang="ar"] body { line-height: 1.75; } /* ------------------------------------------- refine.css follow-ups (RTL) -- css/features/refine.css docked the AI drawer to the pane and re-pinned the voice dock; both name a physical side, so they need flipping here. The dock rule below also replaces a long-standing dead selector: this file mirrored `.voice-dock`, but the element ai.js actually renders is `.vdock`, so the mic FAB never moved and sat on the wrong edge in Arabic. */ html[dir="rtl"] .vdock { right: auto; left: 18px; } html[dir="rtl"] .ai-panel-root .ai-panel { right: auto; left: 8px; } @media (min-width: 1100px) { html[dir="rtl"].ai-panel-open #main { margin-right: 0; margin-left: calc(440px + 8px); } } @media (max-width: 760px) { html[dir="rtl"] .ai-panel-root .ai-panel { left: 0; } } /* the active-row accent seat hugs the reading edge */ html[dir="rtl"] #sidebar .sb-action.active, html[dir="rtl"] #sidebar .tree-item.active, html[dir="rtl"] .lib-item:hover { box-shadow: inset -2px 0 0 var(--accent-soft); } /* the split "+ New" button's rounded corners follow the flip */ html[dir="rtl"] .db-root .db-new-btn { border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; } html[dir="rtl"] .db-root .db-new-caret { border-radius: var(--radius-ctl) 0 0 var(--radius-ctl); } /* the sidebar keycap hint is pushed by margin-inline, not margin-left */ html[dir="rtl"] .sb-kbd { margin-left: 0; margin-right: auto; }