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> |
||
|---|---|---|
| .github | ||
| .husky | ||
| backend | ||
| docker | ||
| docs | ||
| frontend | ||
| packages | ||
| .dockerignore | ||
| .editorconfig | ||
| .eslintignore | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| commitlint.config.cjs | ||
| LICENSE | ||
| monkeytype.code-workspace | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| turbo.json | ||
| vitest.config.js | ||
| vitest.workspace.json | ||
About
Monkeytype is a minimalistic and customizable typing test. It features many test modes, an account system to save your typing speed history, and user-configurable features such as themes, sounds, a smooth caret, and more. Monkeytype attempts to emulate a natural typing experience during a typing test by unobtrusively presenting the text prompts and displaying typed characters in place, providing straightforward, real-time feedback on typos, speed, and accuracy.
Features
- minimalistic design, with optional advertisements and focus mode while typing
- type what you see, see what you type
- live errors, wpm, and accuracy displays
- a variety of test lengths and languages
- punctuation and numbers modes
- quotes
- themes
- smooth caret
- account system
- challenges and just-for-fun test modifiers
- and much more
Discord bot
On the Monkeytype Discord server, we added a Discord bot to auto-assign optional roles based on typing performance and challenge completion. You can find its code over at https://github.com/monkeytypegame/monkeytype-bot.
Bug report or Feature request
If you encounter a bug or have a feature request, send us an email, create an issue, create a discussion thread, or join the Discord server.
Want to Contribute?
Refer to CONTRIBUTING.md.
Code of Conduct
Before contributing to this repository, please read the code of conduct.
Security
To report a security vulnerability, please refer to SECURITY.md.
Credits
Montydrei for the name suggestion.
Everyone who provided valuable feedback on the original Reddit post for the prototype of this website.
All of the contributors have helped implement various features, add themes, fix bugs, and more.
Support
If you wish to support further development and feel extra awesome, you can donate, become a Patron or buy a t-shirt.