Skip to content

feat(i18n): add RTL text direction and typography support for Persian and Arabic #4075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MRGhust wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(i18n): add RTL text direction and typography support for Persian and Arabic #4075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24bef58
feat(i18n): add non-destructive RTL text direction and typography sup…
MRGhust May 30, 2026
a703996
fix(css): remove invalid element selector html.rtl-text font-mono
MRGhust May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/client/LangSelector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { formatDebugTranslation } from "./Utils";
import en from "../../resources/lang/en.json";
import metadata from "../../resources/lang/metadata.json";

const RTL_LANGUAGES = new Set(["fa", "ar", "he"]);

type LanguageMetadata = {
code: string;
native: string;
Expand Down Expand Up @@ -98,6 +100,14 @@ export class LangSelector extends LitElement {
this.translations = translations;
this.currentLang = userLang;

const isRtl = RTL_LANGUAGES.has(userLang);
if (isRtl) {
document.documentElement.classList.add("rtl-text");
} else {
document.documentElement.classList.remove("rtl-text");
}
document.documentElement.setAttribute("lang", userLang);

await this.loadLanguageList();
this.applyTranslation();
}
Expand Down Expand Up @@ -200,6 +210,15 @@ export class LangSelector extends LitElement {
localStorage.setItem("lang", lang);
this.translations = await this.loadLanguage(lang);
this.currentLang = lang;

const isRtl = RTL_LANGUAGES.has(lang);
if (isRtl) {
document.documentElement.classList.add("rtl-text");
} else {
document.documentElement.classList.remove("rtl-text");
}
document.documentElement.setAttribute("lang", lang);

this.applyTranslation();
}

Expand Down
43 changes: 43 additions & 0 deletions src/client/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,49 @@
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant hover (&:hover);

html.rtl-text {
--font-display:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Tahoma, sans-serif;
}

html.rtl-text p,
html.rtl-text td,
html.rtl-text th,
html.rtl-text li,
html.rtl-text h1,
html.rtl-text h2,
html.rtl-text h3,
html.rtl-text .prose,
html.rtl-text .text-start,
html.rtl-text .text-left {
direction: rtl;
text-align: right;
}

html.rtl-text ul,
html.rtl-text ol {
padding-left: 0 !important;
padding-right: 1.25rem !important;
}

html.rtl-text .pl-4 {
padding-left: 0 !important;
padding-right: 1rem !important;
}

html.rtl-text .pl-5 {
padding-left: 0 !important;
padding-right: 1.25rem !important;
}

html.rtl-text .font-mono,
html.rtl-text kbd,
html.rtl-text code {
direction: ltr;
display: inline-block;
Comment on lines +42 to +46
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid overriding flex layouts for monospace controls

When Persian, Arabic, or Hebrew is selected, this selector applies display: inline-block to every .font-mono element, not just inline key labels/code. Several existing controls combine .font-mono with layout utilities such as flex (for example the keybind button in src/client/components/baseComponents/setting/SettingKeybind.ts), so this higher-specificity rule overrides their flex display and removes the centering/alignment behavior in RTL mode. Limit the display override to actual inline kbd/code elements or preserve the existing display for .font-mono containers.

Useful? React with 👍 / 👎.

}

@theme {
--default-ring-width: 3px;
--default-ring-color: var(--color-malibu-blue);
Expand Down
Loading