mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-27 01:06:21 +08:00
5ca47e116b
### 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 `.word`s have the same height (with and without ligatures), because we now set the height of `.beforeNewline`s in css, and we depend on these elements to have the same height as `.word`s 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 --------- Co-authored-by: Jack <jack@monkeytype.com> |
||
|---|---|---|
| .. | ||
| __tests__ | ||
| docker | ||
| scripts | ||
| src | ||
| static | ||
| .eslintrc.cjs | ||
| .firebaserc_example | ||
| .oxlintrc.json | ||
| firebase.json | ||
| gulpfile.js | ||
| knip.json | ||
| package.json | ||
| tsconfig.json | ||
| vite.config.dev.js | ||
| vite.config.js | ||
| vite.config.prod.js | ||
| vitest.config.js | ||