feat: added rtl attribute to scripts

Author: josiahwall

components/language-chooser/common/find-language/findLanguageInterfaces.ts

@@ -6,6 +6,7 @@ export interface IRegion {
 export interface IScript {
   code: string;
   name: string;
+  rtl: boolean;
   languageNameInScript?: string;
 }
 
@@ -56,3 +57,10 @@ export interface IOrthography {
   script?: IScript;
   customDetails?: ICustomizableLanguageDetails;
 }
+
+export function isRTLScript(scriptCode: string): boolean {
+  const locale = new Intl.Locale(`und-${scriptCode}`);
+  // getTextInfo is the standardized property; textInfo is the older name
+  const info = locale.getTextInfo?.() ?? locale.textInfo;
+  return info?.direction === "rtl";
+}

components/language-chooser/common/find-language/language-data/languageData.json

@@ -1,6 +1,11 @@
 import { iso31661 } from "iso-3166";
 import { iso15924 } from "iso-15924";
-import { ILanguage, IRegion, IScript } from "./findLanguageInterfaces";
+import {
+  ILanguage,
+  IRegion,
+  IScript,
+  isRTLScript,
+} from "./findLanguageInterfaces";
 
 // ISO-3166-1 is a region code to region name lookup
 export function getAllRegions(): IRegion[] {
@@ -31,6 +36,7 @@ export function getAllScripts(): IScript[] {
     return {
       name: script.name,
       code: script.code,
+      rtl: isRTLScript(script.code),
     } as IScript;
   });
 }
@@ -54,6 +60,7 @@ export function getScriptForLanguage(
     return {
       name: scriptInfo.name,
       code: scriptInfo.code,
+      rtl: isRTLScript(scriptInfo.code),
     } as IScript;
   }
   return undefined;

components/language-chooser/common/find-language/regionsAndScripts.ts

@@ -1,4 +1,4 @@
-import { IScript, ILanguage } from "../findLanguageInterfaces";
+import { IScript, ILanguage, isRTLScript } from "../findLanguageInterfaces";
 import {
   getAllPossibleNames,
   isMacrolanguage,
@@ -57,6 +57,7 @@ function addOrCombineLangtagsEntry(
       langs[entry.indivIsoCode].scripts[entry.script] = {
         code: entry.script,
         name: scriptNames[entry.script],
+        rtl: isRTLScript(entry.script),
         languageNameInScript:
           (entry.localnames || [undefined])[0] ||
           langs[entry.indivIsoCode].scripts[entry.script]
@@ -85,6 +86,7 @@ function addOrCombineLangtagsEntry(
       scripts[scriptCode] = {
         code: scriptCode,
         name: scriptNames[scriptCode],
+        rtl: isRTLScript(scriptCode),
         languageNameInScript:
           (entry.localnames || [undefined])[0] || entry.localname,
       } as IScript;

components/language-chooser/common/find-language/scripts/langtagProcessing.ts

@@ -37,7 +37,7 @@ const DEFAULT_EXCLUDED_SCRIPT_CODES = new Set([
   "Zzzz",
 ]);
 
-const latinScriptData = { code: "Latn", name: "Latin" } as IScript;
+const latinScriptData = { code: "Latn", name: "Latin", rtl: false } as IScript;
 
 function replaceIsoCode(
   origIsoCode: string,
@@ -88,9 +88,14 @@ function modifyAkaLanguageResult(
     return {
       ...result,
       scripts: [
-        { code: "Latn", name: "Latin", languageNameInScript: "Akan" },
-        { code: "Arab", name: "Arabic" },
-        { code: "Brai", name: "Braille" },
+        {
+          code: "Latn",
+          name: "Latin",
+          rtl: false,
+          languageNameInScript: "Akan",
+        },
+        { code: "Arab", name: "Arabic", rtl: true },
+        { code: "Brai", name: "Braille", rtl: false },
       ],
       isMacrolanguage: false,
       parentMacrolanguage: undefined,
@@ -170,11 +175,13 @@ function modifyChineseResult(results: ILanguage[]): ILanguage[] {
         {
           code: "Hans",
           name: "Chinese (Simplified)",
+          rtl: false,
           languageNameInScript: "中文",
         } as IScript,
         {
           code: "Hant",
           name: "Chinese (Traditional)",
+          rtl: false,
           languageNameInScript: "中文",
         } as IScript,
         { ...latinScriptData, languageNameInScript: "Chinese" } as IScript,

components/language-chooser/common/find-language/searchResultModifiers.ts

@@ -50,6 +50,7 @@ function getAllScriptOptions() {
     return {
       label: script.name,
       id: script.code,
+      rtl: script.rtl,
     };
   });
 }
@@ -89,8 +90,7 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
   // name (dialect) and country (region) are required for unlisted language
   const isReadyToSubmit =
     !isUnlistedLanguageDialog ||
-    (formatDialectCode(dialogSelectedDialect) !== "" &&
-      !!dialogSelectedRegion);
+    (formatDialectCode(dialogSelectedDialect) !== "" && !!dialogSelectedRegion);
 
   const theme = useTheme();
 
@@ -209,16 +209,18 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
               value={{
                 label: dialogSelectedScript?.name || "",
                 id: dialogSelectedScript?.code || "",
+                rtl: dialogSelectedScript?.rtl || false,
               }}
               onChange={(
                 _event,
-                newValue: { label: string; id: string } | null
+                newValue: { label: string; id: string; rtl: boolean } | null
               ) => {
                 setDialogSelectedScript(
                   newValue
                     ? ({
                         code: newValue.id,
                         name: newValue.label,
+                        rtl: newValue.rtl,
                       } as IScript)
                     : undefined
                 );
@@ -425,7 +427,7 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
                   region: dialogSelectedRegion,
                   dialect: isUnlistedLanguageDialog
                     ? normalizedDialect
-                    : dialogSelectedDialect
+                    : dialogSelectedDialect,
                 } as ICustomizableLanguageDetails,
                 dialogSelectedScript
               );

components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageDialog.tsx

@@ -124,7 +124,9 @@ export const DialogDemo: React.FunctionComponent<{
                 <br />
                 Language Code: {selectedValue?.language?.languageSubtag}
                 <br />
-                Script: {selectedValue?.script?.name}
+                Script:
+                {selectedValue?.script &&
+                  ` ${selectedValue?.script?.name} (${selectedValue?.script?.rtl ? "RTL" : "LTR"})`}
                 <br />
                 Region: {selectedValue?.customDetails?.region?.name}
                 <br />