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

[NadAlaba]

Description

1. Support RTL in tape mode:

   • In scrollTape(): flip the sign of #words.margin-left and add .word.margin-right to center first letter in RTL.
   • In Caret.getTargetPositionLeft(): flip the direction of tapeMargin in RTL.
   • Remove restriction on RTL tape mode from test-logic.ts.

2. Support zero-width characters in tape mode:

   • Subtract the width of the last letter that has a positive width if the current letter has a zero width (e.g, diacritics). This is needed when calculation is based on letter widths instead of letter position, which is done in caret.ts when tape=word, and in scrollTape() when tape=letter.

3. Remove the width change of #words in tape mode to 200vw because it's not needed anymore now that we're using white-space: nowrap:

   • Also adjust the limit of .afterNewline.margin-left to be 3 times the new width of #words which is now equal to #wordsWrapper.width by default.

4. Make .word.height in .withLigature langs similar to their height in english:

   • Imitate the appearance and behavior of inline-block <letter>s in .withLigatures lanuages. These languages make the display of <letter> elements inline in order to allow the joining of letters. However, this causes <letter>'s border-bottom to be ignored, which changes .word height, so we add a padding-bottom to the .word in that case.
   • Also, inline <letter>s overflow the #wordWrapper without wrapping (e.g, when maxLineWidth = 20ch and we type 30 letters), so we add the property overflow-wrap: anywhere, but we don't allow .hints to inherit this property.
   • P.S, it is necessary that all .words have the same height (with and without ligatures), because we now set the height of .beforeNewlines in css, and we depend on these elements to have the same height as .words so that the user won't feel a vertical shift in lines in tape mode.

5. Animate turning off tape mode in updateWordsMargin() if SmoothLineScroller is on.

6. Block removing words at the first call of scrollTape():

   • Because the inline style of #words.margin-left may be negative when restarting the test, making scrollTape() start when the first word is overflown to the left, which makes scrollTape() remove that word (this bug affects LTR and RTL langs).

closes #3923

[github-actions]

This PR is stale. Please trigger a re-run of the PR check action.

[Miodec]

Weird issue i ran into when testing this (sometimes words are slow to appear on the right)

Screen.Recording.2024-08-23.at.14.49.04.mov

[NadAlaba]

Weird issue i ran into when testing this (sometimes words are slow to appear on the right)

Resolved!

Please merge #5824 before this to perform final test on this one.

[github-actions]

This PR is stale. Please trigger a re-run of the PR check action.

[NadAlaba]

This is built on top of #5868, so it'd be easier to review that PR first

[github-actions]

This PR is stale. Please trigger a re-run of the PR check action.