Boxes with arab text are larger than those with non-arab text

[WebSnke]

This is how the arab page currently looks:

The button on the right is larger than the other ones.

Disabling the font-family entirely would resolve this issue but that solution would also affect the other pages:

[Nightfirecat]

It doesn't look like that for me. Do you have some different font installed, or different browser zoom/scaling applied or something of the sort?

[WebSnke]

It doesn't look like that for me. Do you have some different font installed, or different browser zoom/scaling applied or something of the sort?

Oh, that's probably because I use Firefox 111 on Fedora 37. The font should therefore be Open Sans once font-family is removed.

[Nightfirecat]

What font family is causing this behavior for you? It looks fine for me with Arial on Debian 11/Firefox 112, as well as using whatever default is selected for san-serif.

[WebSnke]

What font family is causing this behavior for you? It looks fine for me with Arial on Debian 11/Firefox 112, as well as using whatever default is selected for san-serif.

This error does not occur because of the fonts Firefox uses by default since the error only appears once I click "Allow pages to choose their own fonts, instead of your selections above".

[Nightfirecat]

That really doesn't answer my question. In the font stack we're using ("Helvetica Neue", "Helvetica", "Arial", sans-serif), which of those fonts is causing this behavior for you? My system does not have either version of Helvetica, but works fine with Arial, and my default sans-serif font , DejaVu Sans.

[WebSnke]

That really doesn't answer my question. In the font stack we're using ("Helvetica Neue", "Helvetica", "Arial", sans-serif), which of those fonts is causing this behavior for you? My system does not have either version of Helvetica, but works fine with Arial, and my default sans-serif font , DejaVu Sans.

Sorry, it is probably sans-serif as it highlighted in inspector:

[Nightfirecat]

What does Fonts > Advanced show in about:preferences then? I have this: (the same is shown for Arabic fonts)

[WebSnke]

What does Fonts > Advanced show in about:preferences then? I have this: (the same is shown for Arabic fonts)

This is what is looks like on my machine:

[Nightfirecat]

So the issue is that Noto Sans doesn't have a consistent size for Latin and Arabic characters, I guess. I'm not sure this is an issue we should be fixing, as other fonts don't have this behavior.

I suppose this could be opened as an issue on https://github.com/notofonts/arabic?

[WebSnke]

So the issue is that Noto Sans doesn't have a consistent size for Latin and Arabic characters, I guess. I'm not sure this is an issue we should be fixing, as other fonts don't have this behavior.

I suppose this could be opened as an issue on notofonts/arabic?

I don't think Noto Sans is the problem as the issue does not occur once I uncheck the box in the font settings.

[Nightfirecat]

Does that font modal window show the same fonts selected when choosing either "Latin" or "Arabic" in the Fonts for selection? I'm still having a hard time understanding how this could be an issue with our font stack, since your browser is picking a font (or multiple fonts?) which have different heights from the same CSS rule.

[WebSnke]

Does that font modal window show the same fonts selected when choosing either "Latin" or "Arabic" in the Fonts for selection? I'm still having a hard time understanding how this could be an issue with our font stack, since your browser is picking a font (or multiple fonts?) which have different heights from the same CSS rule.

This is what it looks like for Arabic:

[Nightfirecat]

I don't really know what to make of this. I'd recommend playing with overriding the font-family definition in the browser's CSS inspector and seeing if you can pin down exactly what font families do and don't work properly here. My best guess is that the Arabic text is falling back on some other font in your first screenshot, as it doesn't look visually different when using the current font stack versus disabling the definition.

Ultimately, it's my personal opinion this is likely an issue on your system as I can't reproduce it on mine, though I'm hard-pressed to say exactly what is the problem for sure.

[WebSnke]

I don't really know what to make of this. I'd recommend playing with overriding the font-family definition in the browser's CSS inspector and seeing if you can pin down exactly what font families do and don't work properly here. My best guess is that the Arabic text is falling back on some other font in your first screenshot, as it doesn't look visually different when using the current font stack versus disabling the definition.

Ultimately, it's my personal opinion this is likely an issue on your system as I can't reproduce it on mine, though I'm hard-pressed to say exactly what is the problem for sure.

I can try to reinstall Fedora to make sure that it is not a problem with "my machine". Thanks for your ambitions to solve the issue.

[WebSnke]

I just tested it on Fedora 38 and the problem still occurs.

I don't really know what to make of this. I'd recommend playing with overriding the font-family definition in the browser's CSS inspector and seeing if you can pin down exactly what font families do and don't work properly here. My best guess is that the Arabic text is falling back on some other font in your first screenshot, as it doesn't look visually different when using the current font stack versus disabling the definition.

Ultimately, it's my personal opinion this is likely an issue on your system as I can't reproduce it on mine, though I'm hard-pressed to say exactly what is the problem for sure.