monkeytypegame
Arabic letters not connecting when on Safari
Did you clear cache before opening an issue?
- [X] I have cleared my cache
Is there an existing issue for this?
- [X] 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
- Go to monkeytype.com on safari on a mac computer.
- 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.
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~ WebKit does what ~safari~ WebKit 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.
[EDIT]: Apparently all browsers on iOS and iPadOS use the WebKit engine under the hood, so all browsers (yes, Chrome and FF too) on these platforms have the same issue. However, in the future there will be browsers with alternative engines on these platforms in the EU (and hopefully in other regions eventually).
iOS and iPadOS include capabilities that let apps use alternative browser engines — browser engines other than WebKit ... . These capabilities are available to EU users on devices running a minimum of iOS 17.4 or iPadOS 18. source
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 😵💫
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.