search

monkeytypegame / monkeytype

The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
https://monkeytype.com/
GNU General Public License v3.0
15.87k stars 2.41k forks source link

Arabic letters not connecting when on Safari #5909

Open ZiadAlbitar opened 2 months ago

ZiadAlbitar commented 2 months ago

Did you clear cache before opening an issue?

Is there an existing issue for this?

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

ZiadA

Account config

No response

Current Behavior

The arabic letters are not joining like they are supposed to when there are characters next to them. Making it very unreadable. Like so:

Screenshot 2024-09-22 at 20 40 09

Expected Behavior

The letters are supposed to join like so:

Screenshot 2024-09-22 at 20 40 53

The way I managed to get the word to render correctly is by using safari's inspect element tool and adding a zero width joiner before the letter in the beginning of the word, before and after the letter in them middle, and after the word in the end. However, I have no idea if that is a good solution.

Steps To Reproduce

  1. Go to monkeytype.com on safari on a mac computer.
  2. Change the language to Arabic.

Environment

Anything else?

This might be considered a bug in safari instead of a bug in monkeytype, I am not sure.

Miodec commented 2 months ago

Can you try different font settings in monkeytype to see if that helps?

NadAlaba commented 2 months ago

Zero-width joiners fix the issue only if you know the text before hand. If you don't, you may get characters trying to join when they shouldn't, e.g, ر‍ا‍ح went AFAIK it is only safari's webkit that has this breaking text behavior, and the w3c says this is not standard:

Text shaping must not be broken across inline box boundaries when there is no effective change in formatting, or if the only formatting changes do not affect the glyphs (as in applying text decoration).

On MT, letter stylings do not affect the glyphs (there is only color changes), so there should not be a break, but safari does what safari wants. So for now, you may want to stick to other browsers when typing cursive languages on MT. However, it may be fixed in the future, there's a bug report filed 19 years ago.

Miodec commented 1 month ago

So for now, you may want to stick to other browsers when typing cursive languages on MT. However, it may be fixed in the future, there's a bug report filed 19 years ago.

19 year old bug - fantastic 😵‍💫

Miodec commented 1 month ago

Ah, wait - can you make sure you select "arabic" language in the options first, and then go to custom mode? There are some CSS classes that are only applied if the language is set to arabic.