chore(languages): rename ligatures to joiningScript (@nadalaba) (#7788)

Co-authored-by: Jack <jack@monkeytype.com>

Author: nadalaba

docs/LANGUAGES.md

@@ -21,15 +21,19 @@ The contents of the file should be as follows:
 {
   "name": string,
   "rightToLeft": boolean,
-  "ligatures": boolean,
+  "joiningScript": boolean,
   "orderedByFrequency": boolean,
   "bcp47": string,
   "words": string[]
 }
 ```
 
-It is recommended that you familiarize yourselves with JSON before adding a language. For the `name` field, put the name of your language. `rightToLeft` indicates how the language is written. If it is written right to left then put `true`, otherwise put `false`.
-`ligatures` A ligature occurs when multiple letters are joined together to form a character [more details](<https://en.wikipedia.org/wiki/Ligature_(writing)>). If there's joining in the words, which is the case in languages like (Arabic, Malayalam, Persian, Sanskrit, Central_Kurdish... etc.), then set the value to `true`, otherwise set it to `false`. For `bcp47` put your languages [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). If the words you're adding are ordered by frequency (most common words at the top, least at the bottom) set the value of `orderedByFrequency` to `true`, otherwise `false`. Finally, add your list of words to the `words` field.
+It is recommended that you familiarize yourselves with JSON before adding a language. For the `name` field, put the name of your language.
+`rightToLeft` indicates how the language is written. If it is written right to left then put `true`, otherwise put `false`.
+`joiningScript` indicates whether the language requires joining letters to render correctly. Set it to `true` if characters must join with surrounding characters or if their shapes change based on position in a word (initial, medial, final, or isolated), or if they use connecting marks (matras/vowel signs) that reshape the base characters. Otherwise, set it to `false.`
+For `bcp47` put your languages [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
+If the words you're adding are ordered by frequency (most common words at the top, least at the bottom) set the value of `orderedByFrequency` to `true`, otherwise `false`.
+Finally, add your list of words to the `words` field.
 
 Then, go to `packages/schemas/src/languages.ts` and add your new language name at the _end_ of the `LanguageSchema` enum. Make sure to end the line with a comma. Make sure to add all your language names if you have created multiple word lists of differing lengths in the same language.
 

frontend/src/styles/test.scss

@@ -320,7 +320,7 @@
       unicode-bidi: bidi-override;
     }
   }
-  &.withLigatures {
+  &.joiningScript {
     .word {
       overflow-wrap: anywhere;
       padding-bottom: 0.05em; // compensate for letter border
@@ -531,8 +531,8 @@
   &.typed-effect-dots {
     /* transform already typed letters into appropriately colored dots */
 
-    &:not(.withLigatures) .word,
-    &.withLigatures .word.broken-ligatures {
+    &:not(.joiningScript) .word,
+    &.joiningScript .word.broken-joining {
       letter {
         position: relative;
         display: inline-block;
@@ -550,17 +550,17 @@
       }
     }
     // unify dot spacing
-    &.withLigatures .word.broken-ligatures {
+    &.joiningScript .word.broken-joining {
       letter {
         width: 0.4em;
       }
     }
-    .word.broken-ligatures:not(.needs-wrap) {
+    .word.broken-joining:not(.needs-wrap) {
       white-space: nowrap;
     }
 
-    &:not(.withLigatures) .word.typed,
-    &.withLigatures .word.broken-ligatures.typed {
+    &:not(.joiningScript) .word.typed,
+    &.joiningScript .word.broken-joining.typed {
       letter {
         color: var(--bg-color);
         animation: typedEffectToDust 200ms ease-out 0ms 1 forwards !important;
@@ -571,18 +571,18 @@
       }
     }
 
-    &:not(.withLigatures):not(.blind) {
+    &:not(.joiningScript):not(.blind) {
       .word letter.incorrect::after {
         background: var(--c-dot--error);
       }
     }
-    &.withLigatures:not(.blind) .word.broken-ligatures letter.incorrect::after {
+    &.joiningScript:not(.blind) .word.broken-joining letter.incorrect::after {
       background: var(--c-dot--error);
     }
 
     @media (prefers-reduced-motion) {
-      &:not(.withLigatures) .word.typed,
-      &.withLigatures .word.broken-ligatures.typed {
+      &:not(.joiningScript) .word.typed,
+      &.joiningScript .word.broken-joining.typed {
         letter {
           animation: none !important;
           transform: scale(0.4);
@@ -874,7 +874,7 @@
             unicode-bidi: bidi-override;
           }
         }
-        &.withLigatures {
+        &.joiningScript {
           .word {
             overflow-wrap: anywhere;
             padding-bottom: 2px; // compensate for letter border

frontend/src/ts/test/break-ligatures.ts frontend/src/ts/test/break-joining.tsfrontend/src/ts/test/break-ligatures.ts renamed to frontend/src/ts/test/break-joining.ts

@@ -3,9 +3,9 @@ import { ElementWithUtils } from "../utils/dom";
 
 function canBreak(wordEl: ElementWithUtils): boolean {
   if (Config.typedEffect !== "dots") return false;
-  if (wordEl.hasClass("broken-ligatures")) return false;
+  if (wordEl.hasClass("broken-joining")) return false;
 
-  return wordEl.getParent()?.hasClass("withLigatures") ?? false;
+  return wordEl.getParent()?.hasClass("joiningScript") ?? false;
 }
 
 function applyIfNeeded(wordEl: ElementWithUtils): void {
@@ -25,28 +25,25 @@ function applyIfNeeded(wordEl: ElementWithUtils): void {
     wordEl.setStyle({ width: "" });
     wordEl.addClass("needs-wrap");
   }
-  wordEl.addClass("broken-ligatures");
+  wordEl.addClass("broken-joining");
 }
 
 function reset(wordEl: ElementWithUtils): void {
-  if (!wordEl.hasClass("broken-ligatures")) return;
-  wordEl.removeClass("broken-ligatures");
+  if (!wordEl.hasClass("broken-joining")) return;
+  wordEl.removeClass("broken-joining");
   wordEl.removeClass("needs-wrap");
   wordEl.setStyle({ width: "" });
 }
 
-export function set(
-  wordEl: ElementWithUtils,
-  areLigaturesBroken: boolean,
-): void {
-  areLigaturesBroken ? applyIfNeeded(wordEl) : reset(wordEl);
+export function set(wordEl: ElementWithUtils, joiningBroken: boolean): void {
+  joiningBroken ? applyIfNeeded(wordEl) : reset(wordEl);
 }
 
 export function update(key: string, wordsEl: ElementWithUtils): void {
   const words = wordsEl.qsa(".word.typed");
 
   const shouldReset =
-    !wordsEl.hasClass("withLigatures") ||
+    !wordsEl.hasClass("joiningScript") ||
     Config.typedEffect !== "dots" ||
     key === "fontFamily" ||
     key === "fontSize";

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -747,7 +747,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           lang.name,
           {
             noLazyMode: lang.noLazyMode,
-            ligatures: lang.ligatures,
+            joiningScript: lang.joiningScript,
             rightToLeft: lang.rightToLeft,
             additionalAccents: lang.additionalAccents,
           },

frontend/src/ts/test/funbox/funbox.ts

@@ -115,8 +115,8 @@ export async function activate(
     return false;
   }
 
-  if (language.ligatures) {
-    if (isFunboxActiveWithProperty("noLigatures")) {
+  if (language.joiningScript) {
+    if (isFunboxActiveWithProperty("noJoiningScript")) {
       showNoticeNotification(
         "Current language does not support this funbox mode",
       );

frontend/src/ts/test/test-logic.ts

@@ -518,7 +518,7 @@ async function init(): Promise<boolean> {
   let wordsHaveTab = false;
   let wordsHaveNewline = false;
   let allRightToLeft: boolean | undefined = undefined;
-  let allLigatures: boolean | undefined = undefined;
+  let allJoiningScript: boolean | undefined = undefined;
   let generatedWords: string[] = [];
   let generatedSectionIndexes: number[] = [];
   try {
@@ -527,7 +527,7 @@ async function init(): Promise<boolean> {
     generatedSectionIndexes = gen.sectionIndexes;
     wordsHaveTab = gen.hasTab;
     wordsHaveNewline = gen.hasNewline;
-    ({ allRightToLeft, allLigatures } = gen);
+    ({ allRightToLeft, allJoiningScript } = gen);
   } catch (e) {
     hideLoaderBar();
     if (e instanceof WordGenError || e instanceof Error) {
@@ -590,8 +590,9 @@ async function init(): Promise<boolean> {
       ) as string,
     );
   }
+
   Funbox.toggleScript(TestWords.words.getCurrentText());
-  TestUI.setLigatures(allLigatures ?? language.ligatures ?? false);
+  TestUI.setJoiningClass(allJoiningScript ?? language.joiningScript ?? false);
 
   const isLanguageRTL = allRightToLeft ?? language.rightToLeft ?? false;
   TestState.setIsLanguageRightToLeft(isLanguageRTL);

frontend/src/ts/test/test-ui.ts

@@ -52,7 +52,7 @@ import * as MonkeyPower from "../elements/monkey-power";
 import * as SlowTimer from "../legacy-states/slow-timer";
 import * as CompositionDisplay from "../elements/composition-display";
 import * as AdController from "../controllers/ad-controller";
-import * as Ligatures from "./break-ligatures";
+import * as Joining from "./break-joining";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 import * as Keymap from "../elements/keymap";
 import * as ThemeController from "../controllers/theme-controller";
@@ -147,7 +147,7 @@ export function updateActiveElement(
       if (previousActiveWord !== null) {
         if (direction === "forward") {
           previousActiveWord.addClass("typed");
-          Ligatures.set(previousActiveWord, true);
+          Joining.set(previousActiveWord, true);
         } else if (direction === "back") {
           //
         }
@@ -164,7 +164,7 @@ export function updateActiveElement(
     newActiveWord.addClass("active");
     newActiveWord.removeClass("error");
     newActiveWord.removeClass("typed");
-    Ligatures.set(newActiveWord, false);
+    Joining.set(newActiveWord, false);
 
     activeWordTop = newActiveWord.getOffsetTop();
     activeWordHeight = newActiveWord.getOffsetHeight();
@@ -1238,15 +1238,15 @@ export async function lineJump(
   return;
 }
 
-export function setLigatures(isEnabled: boolean): void {
+export function setJoiningClass(isEnabled: boolean): void {
   if (isEnabled || Config.mode === "custom" || Config.mode === "zen") {
-    wordsEl.addClass("withLigatures");
-    qs("#resultWordsHistory .words")?.addClass("withLigatures");
-    qs("#resultReplay .words")?.addClass("withLigatures");
+    wordsEl.addClass("joiningScript");
+    qs("#resultWordsHistory .words")?.addClass("joiningScript");
+    qs("#resultReplay .words")?.addClass("joiningScript");
   } else {
-    wordsEl.removeClass("withLigatures");
-    qs("#resultWordsHistory .words")?.removeClass("withLigatures");
-    qs("#resultReplay .words")?.removeClass("withLigatures");
+    wordsEl.removeClass("joiningScript");
+    qs("#resultWordsHistory .words")?.removeClass("joiningScript");
+    qs("#resultReplay .words")?.removeClass("joiningScript");
   }
 }
 
@@ -2079,7 +2079,7 @@ configEvent.subscribe(({ key, newValue }) => {
   ) {
     if (key !== "fontFamily") updateWordWrapperClasses();
     if (["typedEffect", "fontFamily", "fontSize"].includes(key)) {
-      Ligatures.update(key, wordsEl);
+      Joining.update(key, wordsEl);
     }
   }
   if (["tapeMode", "tapeMargin"].includes(key)) {

frontend/src/ts/test/words-generator.ts

@@ -602,7 +602,7 @@ type GenerateWordsReturn = {
   hasTab: boolean;
   hasNewline: boolean;
   allRightToLeft?: boolean;
-  allLigatures?: boolean;
+  allJoiningScript?: boolean;
 };
 
 let previousRandomQuote: QuoteWithTextSplit | null = null;
@@ -625,7 +625,7 @@ export async function generateWords(
     hasTab: false,
     hasNewline: false,
     allRightToLeft: language.rightToLeft,
-    allLigatures: language.ligatures ?? false,
+    allJoiningScript: language.joiningScript ?? false,
   };
 
   isCurrentlyUsingFunboxSection = isFunboxActiveWithFunction("pullSection");
@@ -661,10 +661,10 @@ export async function generateWords(
     if (result instanceof PolyglotWordset) {
       const polyglotResult = result;
       currentWordset = polyglotResult;
-      // set allLigatures if any language in languageProperties has ligatures true
-      ret.allLigatures = Array.from(
+      // set allJoiningScript if any language in languageProperties has joiningScript: true
+      ret.allJoiningScript = Array.from(
         polyglotResult.languageProperties.values(),
-      ).some((props) => !!props.ligatures);
+      ).some((props) => !!props.joiningScript);
     } else {
       currentWordset = result;
     }

frontend/src/ts/utils/json-data.ts

@@ -82,7 +82,7 @@ export async function getLayout(layoutName: string): Promise<LayoutObject> {
 // used for polyglot wordset language-specific properties
 export type LanguageProperties = Pick<
   LanguageObject,
-  "noLazyMode" | "ligatures" | "rightToLeft" | "additionalAccents"
+  "noLazyMode" | "joiningScript" | "rightToLeft" | "additionalAccents"
 >;
 
 let currentLanguage: LanguageObject;

frontend/static/funbox/backwards.css

@@ -6,6 +6,6 @@
   direction: ltr;
 }
 
-#words.withLigatures .word {
+#words.joiningScript .word {
   unicode-bidi: bidi-override;
 }