impr(tape mode): support RTL languages (@nadalaba)

Author: nadalaba

frontend/src/styles/test.scss

@@ -294,8 +294,17 @@
     }
   }
   &.withLigatures {
-    letter {
-      display: inline;
+    .word {
+      overflow-wrap: anywhere;
+      padding-bottom: 0.05em; // compensate for letter border
+
+      .hints {
+        overflow-wrap: initial;
+      }
+
+      letter {
+        display: inline;
+      }
     }
   }
   &.blurred {
@@ -723,8 +732,17 @@
           }
         }
         &.withLigatures {
-          letter {
-            display: inline;
+          .word {
+            overflow-wrap: anywhere;
+            padding-bottom: 2px; // compensate for letter border
+
+            .hints {
+              overflow-wrap: initial;
+            }
+
+            letter {
+              display: inline;
+            }
           }
         }
       }

frontend/src/ts/test/caret.ts

@@ -114,11 +114,17 @@ function getTargetPositionLeft(
 
     if (Config.tapeMode === "word" && inputLen > 0) {
       let currentWordWidth = 0;
+      let lastPositiveLetterWidth = 0;
       for (let i = 0; i < inputLen; i++) {
         if (invisibleExtraLetters && i >= wordLen) break;
-        currentWordWidth +=
-          $(currentWordNodeList[i] as HTMLElement).outerWidth(true) ?? 0;
+        const letterOuterWidth =
+          $(currentWordNodeList[i] as Element).outerWidth(true) ?? 0;
+        currentWordWidth += letterOuterWidth;
+        if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
       }
+      // if current letter has zero width move the caret to previous positive width letter
+      if ($(currentWordNodeList[inputLen] as Element).outerWidth(true) === 0)
+        currentWordWidth -= lastPositiveLetterWidth;
       if (isLanguageRightToLeft) currentWordWidth *= -1;
       result += currentWordWidth;
     }

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

@@ -431,13 +431,6 @@ export async function init(): Promise<void> {
     }
   }
 
-  if (Config.tapeMode !== "off" && language.rightToLeft) {
-    Notifications.add("This language does not support tape mode.", 0, {
-      important: true,
-    });
-    UpdateConfig.setTapeMode("off");
-  }
-
   const allowLazyMode = !language.noLazyMode || Config.mode === "custom";
   if (Config.lazyMode && !allowLazyMode) {
     rememberLazyMode = true;

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

@@ -283,7 +283,7 @@ export function updateActiveElement(
     void updateWordsInputPosition();
   }
   if (!initial && Config.tapeMode !== "off") {
-    scrollTape();
+    void scrollTape();
   }
 }
 
@@ -425,11 +425,10 @@ export function showWords(): void {
   }
 
   updateActiveElement(undefined, true);
+  updateWordWrapperClasses();
   setTimeout(() => {
     void Caret.updatePosition();
   }, 125);
-
-  updateWordWrapperClasses();
 }
 
 export function appendEmptyWordElement(): void {
@@ -575,7 +574,7 @@ export function updateWordsWrapperHeight(force = false): void {
 
 function updateWordsMargin(): void {
   if (Config.tapeMode !== "off") {
-    scrollTape(true);
+    void scrollTape(true);
   } else {
     setTimeout(() => {
       $("#words").css("margin-left", "unset");
@@ -933,7 +932,7 @@ export async function updateActiveWordLetters(
       "<div class='beforeNewline'></div><div class='newline'></div><div class='afterNewline'></div>"
     );
   if (Config.tapeMode !== "off") {
-    scrollTape();
+    await scrollTape();
   }
 }
 
@@ -959,15 +958,18 @@ function getNlCharWidth(
 }
 
 let allowWordRemoval = true;
-export function scrollTape(noRemove = false): void {
+export async function scrollTape(noRemove = false): Promise<void> {
   if (ActivePage.get() !== "test" || resultVisible) return;
 
   const waitForLineJumpAnimation = lineTransition && !allowWordRemoval;
   if (waitForLineJumpAnimation) {
-    setTimeout(() => scrollTape(true), 50);
+    setTimeout(() => void scrollTape(true), 50);
     return;
   }
 
+  const currentLang = await JSONData.getCurrentLanguage(Config.language);
+  const isLanguageRTL = currentLang.rightToLeft;
+
   // index of the active word in the collection of .word elements
   const wordElementIndex = TestState.activeWordIndex - activeWordElementOffset;
   const wordsWrapperWidth = (
@@ -1045,7 +1047,11 @@ export function scrollTape(noRemove = false): void {
       const wordOuterWidth = $(child).outerWidth(true) ?? 0;
       const forWordLeft = Math.floor(child.offsetLeft);
       const forWordWidth = Math.floor(child.offsetWidth);
-      if (!noRemove && forWordLeft < 0 - forWordWidth) {
+      if (
+        !noRemove &&
+        ((!isLanguageRTL && forWordLeft < 0 - forWordWidth) ||
+          (isLanguageRTL && forWordLeft > wordsWrapperWidth))
+      ) {
         toRemove.push(child);
         widthRemoved += wordOuterWidth;
         wordsToRemoveCount++;
@@ -1085,30 +1091,43 @@ export function scrollTape(noRemove = false): void {
         parseFloat(afterNewlineEl.style.marginLeft) || 0;
       afterNewlineEl.style.marginLeft = `${currentLineIndent - width}px`;
     });
+    if (isLanguageRTL) widthRemoved *= -1;
     const currentWordsMargin = parseFloat(wordsEl.style.marginLeft) || 0;
     wordsEl.style.marginLeft = `${currentWordsMargin + widthRemoved}px`;
   }
 
   /* calculate current word width to add to #words margin */
   let currentWordWidth = 0;
-  if (Config.tapeMode === "letter") {
-    if (TestInput.input.current.length > 0) {
-      const letters = activeWordEl.querySelectorAll("letter");
-      for (let i = 0; i < TestInput.input.current.length; i++) {
-        const letter = letters[i] as HTMLElement;
-        if (
-          (Config.blindMode || Config.hideExtraLetters) &&
-          letter.classList.contains("extra")
-        ) {
-          continue;
-        }
-        currentWordWidth += $(letter).outerWidth(true) ?? 0;
+  const inputLength = TestInput.input.current.length;
+  if (Config.tapeMode === "letter" && inputLength > 0) {
+    const letters = activeWordEl.querySelectorAll("letter");
+    let lastPositiveLetterWidth = 0;
+    for (let i = 0; i < inputLength; i++) {
+      const letter = letters[i] as HTMLElement;
+      if (
+        (Config.blindMode || Config.hideExtraLetters) &&
+        letter.classList.contains("extra")
+      ) {
+        continue;
       }
+      const letterOuterWidth = $(letter).outerWidth(true) ?? 0;
+      currentWordWidth += letterOuterWidth;
+      if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
     }
+    // if current letter has zero width move the tape to previous positive width letter
+    if ($(letters[inputLength] as Element).outerWidth(true) === 0)
+      currentWordWidth -= lastPositiveLetterWidth;
   }
+
   /* change to new #words & .afterNewline margins */
-  const tapeMargin = wordsWrapperWidth * (Config.tapeMargin / 100);
-  const newMargin = tapeMargin - (wordsWidthBeforeActive + currentWordWidth);
+  let newMargin = wordsWrapperWidth * (Config.tapeMargin / 100);
+  if (isLanguageRTL)
+    newMargin +=
+      wordsWidthBeforeActive +
+      currentWordWidth -
+      wordsEl.offsetWidth +
+      wordRightMargin;
+  else newMargin -= wordsWidthBeforeActive + currentWordWidth;
 
   const jqWords = $(wordsEl);
   if (Config.smoothLineScroll) {
@@ -1120,7 +1139,7 @@ export function scrollTape(noRemove = false): void {
         duration: SlowTimer.get() ? 0 : 125,
         queue: "leftMargin",
         complete: () => {
-          if (noRemove) scrollTape();
+          if (noRemove) void scrollTape();
         },
       }
     );
@@ -1140,7 +1159,7 @@ export function scrollTape(noRemove = false): void {
     afterNewlinesNewMargins.forEach((margin, index) => {
       (afterNewLineEls[index] as HTMLElement).style.marginLeft = `${margin}px`;
     });
-    if (noRemove) scrollTape();
+    if (noRemove) void scrollTape();
   }
 }
 

frontend/src/ts/ui.ts

@@ -102,7 +102,7 @@ const debouncedEvent = debounce(250, () => {
   void Caret.updatePosition();
   if (getActivePage() === "test" && !TestUI.resultVisible) {
     if (Config.tapeMode !== "off") {
-      TestUI.scrollTape();
+      void TestUI.scrollTape();
     } else {
       TestUI.updateTestLine();
     }