Arabic letters not connecting when on Safari

[ZiadAlbitar]

Did you clear cache before opening an issue?

• I have cleared my cache

Is there an existing issue for this?

• I have searched the existing issues

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:

Expected Behavior

The letters are supposed to join like so:

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

• OS: MacOS Sonoma 14.4.1
• Browser: Safari
• Browser Version: 17.4.1

Anything else?

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

[Miodec]

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

[NadAlaba]

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, ر‍ا‍ح

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]

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]

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.