Added rtl attribute to scripts

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

@@ -6,6 +6,7 @@ export interface IRegion {
 export interface IScript {
   code: string;
   name: string;
+  isRtl?: boolean;
   languageNameInScript?: string;
 }
 
@@ -56,3 +57,23 @@ export interface IOrthography {
   script?: IScript;
   customDetails?: ICustomizableLanguageDetails;
 }
+
+// Intl.Locale takes in a bcp47 tag, but here we are giving it
+// the tag und-{insert script code}, where the und means no
+// specified language, so that the rtl attribute will be based
+// solely on the selected script. If you give the full tag generated
+// by createTagFromOrthography, and use .maximizeSince to get the
+// most possible values, then you can actually end up with the wrong
+// rtl attribute. For example, if you were to choose the Uzbek langauge
+// and the country Afghanistan, you would get the tag uz-AF. You can
+// specify the Latin script for this combination, but looking up the script
+// uz-AF can create a mismatch between Arabic(RTL) and Latin(LTR), since the
+// .maximize will return the Arabic script for uz-AF. We always want the
+// isRtl setting to match its IScript in every case, which can accomplish
+// with und-{script}.
+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 as any).textInfo;
+  return info?.direction === "rtl";
+}

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

@@ -88,7 +88,11 @@ function modifyAkaLanguageResult(
     return {
       ...result,
       scripts: [
-        { code: "Latn", name: "Latin", languageNameInScript: "Akan" },
+        {
+          code: "Latn",
+          name: "Latin",
+          languageNameInScript: "Akan",
+        },
         { code: "Arab", name: "Arabic" },
         { code: "Brai", name: "Braille" },
       ],

components/language-chooser/react/common/language-chooser-react-hook/useLanguageChooser.ts

@@ -1,6 +1,7 @@
 import {
   ILanguage,
   IScript,
+  isRTLScript,
   asyncSearchForLanguage,
   ICustomizableLanguageDetails,
   deepStripDemarcation,
@@ -238,10 +239,13 @@ export const useLanguageChooser = (
           script: selectedScript,
           customDetails: customizableLanguageDetails,
         }) as IOrthography;
-        onSelectionChange(
-          resultingOrthography,
-          createTagFromOrthography(resultingOrthography)
-        );
+        if (resultingOrthography.script) {
+          resultingOrthography.script.isRtl = isRTLScript(
+            resultingOrthography.script.code
+          );
+        }
+        const tag = createTagFromOrthography(resultingOrthography);
+        onSelectionChange(resultingOrthography, tag);
         setPreviousStateWasValidSelection(true);
       } else if (previousStateWasValidSelection) {
         onSelectionChange(undefined, undefined);

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

@@ -89,8 +89,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();
 
@@ -425,7 +424,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/demos/DialogDemo.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?.isRtl ? "RTL" : "LTR"})`}
                 <br />
                 Region: {selectedValue?.customDetails?.region?.name}
                 <br />