diff --git a/public/css/style.scss b/public/css/style.scss index 87880b73f..641136c97 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -1337,6 +1337,14 @@ key { align-content: flex-start; user-select: none; + /* a little hack for right-to-left languages */ + &.rightToLeftTest { + flex-direction: row-reverse; + .word { + flex-direction: row-reverse; + } + } + &.flipped { .word { color: var(--text-color); @@ -1522,16 +1530,6 @@ key { opacity: 0 !important; } } - - /* a little hack for right-to-left languages */ - div.pageTest.rightToLeftTest { - #words { - flex-direction: row-reverse; - .word { - flex-direction: row-reverse; - } - } - } } #showWordHistoryButton { diff --git a/public/js/script.js b/public/js/script.js index fdddc82be..b2aa2480c 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -554,8 +554,8 @@ function initWords() { wordsList.push(w[i]); } } - //special case right-to-left languages. - if (config.language == "hebrew") { + //special case right-to-left languages (currently only Hebrew) + if (config.language === "hebrew") { arrangeCharactersRightToLeft(); } else { arrangeCharactersLeftToRight(); @@ -564,11 +564,11 @@ function initWords() { } function arrangeCharactersRightToLeft() { - $("#middle > div.pageTest").addClass("rightToLeftTest"); + $("#words").addClass("rightToLeftTest"); } function arrangeCharactersLeftToRight() { - $("#middle > div.pageTest").removeClass("rightToLeftTest"); + $("#words").removeClass("rightToLeftTest"); } function setToggleSettings(state) { @@ -1412,7 +1412,7 @@ function updateCaretPosition() { .querySelectorAll("letter")[currentLetterIndex]; if ($(currentLetter).length == 0) return; - //special case right to left languages + //special case right to left languages (currently only Hebrew) const isLeftToRight = config.language !== "hebrew"; let currentLetterPosLeft = isLeftToRight ? currentLetter.offsetLeft