rtl attr & set languages

packages/client/src/init.ts

@@ -33,6 +33,7 @@ import widgets from "@/widgets";
 import directives from "@/directives";
 import components from "@/components";
 import { version, ui, lang, host } from "@/config";
+import { langmap } from "@/scripts/langmap";
 import { applyTheme } from "@/scripts/theme";
 import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
 import { i18n } from "@/i18n";
@@ -119,6 +120,7 @@ function checkForSplash() {
 	//#region Set lang attr
 	const html = document.documentElement;
 	html.setAttribute("lang", lang || "en-US");
+	html.setAttribute("dir", langmap[lang].rtl ? "rtl" : "ltr");
 	//#endregion
 
 	//#region loginId

packages/client/src/scripts/langmap.ts

@@ -20,15 +20,19 @@ export const langmap = {
 	},
 	ar: {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-AR": {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-MA": {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-SA": {
 		nativeName: "العربية (السعودية)",
+		rtl: true,
 	},
 	"ay-BO": {
 		nativeName: "Aymar aru",
@@ -206,9 +210,11 @@ export const langmap = {
 	},
 	fa: {
 		nativeName: "فارسی",
+		rtl: true,
 	},
 	"fa-IR": {
 		nativeName: "فارسی",
+		rtl: true,
 	},
 	"fb-LT": {
 		nativeName: "Leet Speak",
@@ -275,9 +281,11 @@ export const langmap = {
 	},
 	he: {
 		nativeName: "עברית‏",
+		rtl: true,
 	},
 	"he-IL": {
 		nativeName: "עברית‏",
+		rtl: true,
 	},
 	hi: {
 		nativeName: "हिन्दी",
@@ -485,6 +493,7 @@ export const langmap = {
 	},
 	"ps-AF": {
 		nativeName: "پښتو",
+		rtl: true,
 	},
 	pt: {
 		nativeName: "Português",
@@ -614,9 +623,11 @@ export const langmap = {
 	},
 	ur: {
 		nativeName: "اردو",
+		rtl: true,
 	},
 	"ur-PK": {
 		nativeName: "اردو",
+		rtl: true,
 	},
 	uz: {
 		nativeName: "O'zbek",
@@ -635,9 +646,11 @@ export const langmap = {
 	},
 	yi: {
 		nativeName: "ייִדיש",
+		rtl: true,
 	},
 	"yi-DE": {
 		nativeName: "ייִדיש (German)",
+		rtl: true,
 	},
 	zh: {
 		nativeName: "中文",