Hebrew language is messed up in Firefox, Safari

[drehelis]

Are you experiencing an issue with...

shields.io

🐞 Description

Safari (text is mirrored) -

Firefox -

However, works as expeced in Chrome, Chromium, Edge.

Anyway to make it work? :)

🔗 Link to the badge

https://img.shields.io/endpoint?color=neon&style=plastic&url=https%3A%2F%2Ftg.sumanjay.workers.dev%2Fsammy_ofer_notification_channel

💡 Possible Solution

No response

[github-actions]

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

[chris48s]

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.

[jNullj]

Native Hebrew speaker here, so i gave it a try.
Tested in Firefox only as i don't have Safari.

1. Changed the font yet it did not change the issue.
2. 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.
3. After playing a bit with textLength i found out this! The value we use in this example is 2250. This is squashed. So i increased to make it more spaced out, which works but it was reversed regardless of the direction attribute. (4500 is a bit shorter then 2250 on chromium). Untill, i used textLength=890 then the letter order was currect and it started getting spaced out the smaller i made the textLength.
4. 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.