Display RTL text in the correct manner (#315)

mlcommons · Dec 6, 2024 · 6549677 · 6549677
1 parent 97877ca
commit 6549677
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/frontends/web/src/index.css b/frontends/web/src/index.css
@@ -127,3 +127,12 @@ h2.active {
 .btn-link:hover {
     color: #344854;
 }
+
+.rtl {
+    direction: rtl;
+    text-align: right;
+}
+
+.ltr {
+    direction: ltr;
+}
diff --git a/...ateSamples/CreateSamples/AnnotationInterfaces/Contexts/SelectMultipleTextMultipleTags.tsx b/...ateSamples/CreateSamples/AnnotationInterfaces/Contexts/SelectMultipleTextMultipleTags.tsx
@@ -14,6 +14,30 @@ import MultiSelect from "new_front/components/Lists/MultiSelect";
 
 import generateLightRandomColor from "new_front/utils/helpers/functions/GenerateRandomLightColor";
 
+const RTLtexts = [
+  "ara",
+  "ary",
+  "arz",
+  "ars",
+  "arb",
+  "aeb",
+  "aii",
+  "aze",
+  "azj",
+  "azb",
+  "div",
+  "heb",
+  "hbo",
+  "ckb",
+  "kur",
+  "kmr",
+  "sdh",
+  "nqo",
+  "fas",
+  "syc",
+  "urd",
+];
+
 type MultipleTagsTypes = {
   preselectedTag?: string;
 };
@@ -62,6 +86,7 @@ const SelectMultipleTextMultipleTags: FC<
   const [contextId, setContextId] = useState<number | null>(null);
   const [loading2, setLoading2] = useState<boolean>(false);
   const [extraLabel, setExtraLabel] = useState<any>({});
+  const [rtl, setRTL] = useState<boolean>(false);
 
   const submitButton: HTMLElement | null = document.getElementById("submit");
 
@@ -107,6 +132,7 @@ const SelectMultipleTextMultipleTags: FC<
     submitButton && (submitButton.hidden = false);
     setLoading2(true);
     setSelectionInfo([]);
+    setRTL(RTLtexts.includes(value as string));
     fetch(
       `${process.env.REACT_APP_API_HOST_2}/context/get_random_context_from_key_value`,
       {
@@ -306,7 +332,7 @@ const SelectMultipleTextMultipleTags: FC<
                 />
               </div>
             </div>
-            <div>
+            <div dir="auto" className={`unicode-text ${rtl ? "rtl" : "ltf"}`}>
               <TextAnnotator
                 style={{ whiteSpace: "pre-line" }}
                 content={text}