monkeytype icon indicating copy to clipboard operation
monkeytype copied to clipboard

fix: Indicate typos below disjoining letters in languages with ligatures (NadAlaba)

Open NadAlaba opened this issue 5 months ago • 9 comments

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!
  • [x] Check if any open issues are related to this PR; if so, be sure to tag them below.
  • [x] Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
  • [x] Make sure to include your GitHub username inside parentheses at the end of the PR title

NadAlaba avatar Feb 23 '24 15:02 NadAlaba