-
- ${translateText("help_modal.hotkeys")}
-
-
-
-
- | ${translateText("help_modal.table_key")} |
- ${translateText("help_modal.table_action")} |
-
-
-
+
+
+
+ ${translateText("help_modal.hotkeys")}
+
+
+
+
+ | ${translateText("help_modal.table_key")} |
+ ${translateText("help_modal.table_action")} |
+
+
+
| Space |
${translateText("help_modal.action_alt_view")} |
@@ -443,7 +457,7 @@ export class HelpModal extends LitElement {
${translateText("help_modal.build_desc")} |
-
+
| ${translateText("help_modal.build_city")} |
|
diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index a842a42afb..9e55180f6e 100644
--- a/src/client/Utils.ts
+++ b/src/client/Utils.ts
@@ -146,6 +146,26 @@ export const translateText = (
}
};
+/**
+ * Returns the active language code from the LangSelector element, if present.
+ */
+export function getCurrentLanguage(): string | null {
+ const langSelector = document.querySelector(
+ "lang-selector",
+ ) as LangSelector | null;
+ return langSelector?.currentLang ?? null;
+}
+
+/**
+ * Checks whether the provided language (or current language if omitted) is
+ * right-to-left. Keeps RTL awareness centralized so UI components can align
+ * text correctly for languages such as Arabic and Persian.
+ */
+export function isRtlLanguage(lang?: string | null): boolean {
+ const currentLang = (lang ?? getCurrentLanguage() ?? "").toLowerCase();
+ return ["ar", "fa", "he"].some((rtl) => currentLang.startsWith(rtl));
+}
+
/**
* Severity colors mapping for message types
*/
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index e7c4529e44..61881f4c4f 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -190,13 +190,22 @@ export class ControlPanel extends LitElement implements Layer {
-
+