search

salmannotkhan / typing-test

Typing test website build with React
https://salmannotkhan.github.io/typing-test/
MIT License
189 stars 55 forks source link

[Bug] Offset of caret from the letter #36

Open aashishpanthi opened 1 year ago

aashishpanthi commented 1 year ago

Describe the bug image In the above screenshot, you can see that the caret(cursor) is a little farther away from where it needs to be. It often happens with longer words.

I have seen the problem when I had a much longer word. I didn't find a much longer word when reporting the issue so it is just a small demo.

To Reproduce Steps to reproduce the behavior:

  1. Go to the project or website
  2. Select words, sentences, or anything that have a larger number of letters in a single word
  3. Start typing letters for a longer word
  4. See the error

Expected behavior The caret should be at the beginning of the letter to be typed. It should be just after the typed letter and before the letter to be typed.

Desktop (please complete the following information):

Suggested solution Use a monospace font-family to solve this bug.

salmannotkhan commented 1 year ago

I am already using monospace font family. Maybe it's time to dive into font related css