Hebrew language is messed up in Firefox, Safari
drehelis opened this issue Β· comments
Badge tested using npm run badge https://img.shields.io/endpoint?color=neon&style=plastic&url=https%3A%2F%2Ftg.sumanjay.workers.dev%2Fsammy_ofer_notification_channel
Output is available here
Hmm.
I get the same behaviour as you. I suspect this is about what fonts are available on the client side.
If I view a badge in chromium, the badge is rendered using DejaVu Sans for me.
In firefox, it looks like it is falling back to the default sans serif font.
I wouldn't be able to test safari.
I'm not sure why the subset of fonts available to firefox is different here. Not sure if this is a browser thing, or if there is anything we can do.
Native Hebrew speaker here, so i gave it a try.
Tested in Firefox only as i don't have Safari.
- Changed the font yet it did not change the issue.
- The text is squashed due to the
textLength
attribute. When the attribute is changed the text is getting spaced. Made sure both browsers default units are in px, yet i see the difference. - After playing a bit with
textLength
i found out this! The value we use in this example is2250
. This is squashed. So i increased to make it more spaced out, which works but it was reversed regardless of thedirection
attribute. (4500 is a bit shorter then 2250 on chromium). Untill, i usedtextLength=890
then the letter order was currect and it started getting spaced out the smaller i made the textLength. - I then went to test
textLength
in an example on mdn web docs and confirmed that this is not related to shields.io but a firefox issue. Here is a short animation to show how the mmdn docs example starts breaking once the text is hebrew instead of English. I suspect the length calculated for each letter is somehow a negative value as the 0px behavior is rendered at large values (620px~ in the example bellow).
Video taken from this part in mdn web docs replaced the innerHtml with herbew for hello world.
Peek.2024-04-23.16-55.mp4
The text acts odd, the 0 point for textLength is about 620px and after crossing it the text is reveresed, before crossing it lower values create higher length.
edit: searched firefox for open issue on that, couldn't find one. I will look into firefox source.