fix(indicate typos): letters not displaying correctly in RTL languages or with ligatures when set to below (NadAlaba)

[NadAlaba]

Description

1. Moved <hint> elements from <letter .incorrect> to <.word>, because hints were messing the joining of letters in languages with cursive attachments "withLigatures". Hint characters, that correspond to adjacent incorrect letters, now join together as a word when there is an overlap between them, which can happen in non monospaced fonts regardless if the current language has "ligatures" or not (In test-ui.ts: New functions createHintsHtml() and async function joinOverlappingHints(), and changes to updateWordElement()).
2. Recalculate hints position whenever font size or font family is changed (In test-ui.ts: New async function updateHintsPosition())
3. Made updateWordElement() async in order to call await joinOverlappingHints();, and made all calls to this function void updateWordWlement(); (In input-controller.ts and test-ui.ts)
4. Styled <.word> as position: relative instead of .word letter.incorrect {position: relative}, in order to be able to position <hint>s absolutely relative to the corresponding <.word> (In styles/test.scss).
5. Corrected the position of the caret, because after making <.word> relative, <letter>s were giving offsetLeft and offsetTop relative to the <.word> instead of relative to <#wordsWrapper>, so had to add the offset position of <.word .active> to the position of the caret. (In caret.ts: Changes to updatePosition()).
6. Same changes as 4 above to the pace caret (In pace-caret.ts: Changes to update()).
7. Corrected the position of the starting point of the pace caret in RTL languages, because it was starting after the first letter in each word, and had to make resetCaretPosition() and update() async in order to check if current language is RTL (to be able to call await Misc.getCurrentLanguage();), and made the call to update() void update() in function start() {} (In pace-caret.ts: Changes to resetCaretPosition(), update(), and start()).

Checks

• Adding quotes?
  • Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
• Adding a language or a theme?
  • If is a language, did you edit _list.json, _groups.json and add languages.json?
  • If is a theme, did you add the theme.css?
    • Also please add a screenshot of the theme, it would be extra awesome if you do so!
• Check if any open issues are related to this PR; if so, be sure to tag them below.
• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username inside parentheses at the end of the PR title

[NadAlaba]

P.S. There has to be better ways of checking current language in sync functions

[Miodec]

If you only type incorrect letters, the hints jump right after each keypress.

[NadAlaba]

If you only type incorrect letters, the hints jump right after each keypress.

Couldn't reproduce that!

Perhaps you're talking about the joining behavior of hint letters, which clusters (joins) consecutive hint-letters together, and centers the hint block with the incorrect letters block, this may cause the hint-letters block to be slightly longer or shorter than the incorrect letters block, but it will ensure that hints don't overlap each other in non monospaced fonts.

[Miodec]

Please test with english.

[NadAlaba]

Please test with english.

Done! Edited my first comment to reflect chagnes.

[NadAlaba]

@Miodec Any feedback?

[Miodec]

Will check soon.

[Miodec]

Seems to be good, all though when changing font size, could you recalculate the positions?

[NadAlaba]

Seems to be good, all though when changing font size, could you recalculate the positions?

Done!

2. Recalculate hints position whenever font size or font family is changed (In test-ui.ts: New async function updateHintsPosition())