Buttons look wrong in Firefox about wikimediaui-style-guide HOT 14 CLOSED

Hi @Nikerabbit - I can't reproduce this on my Firefox (84.0.1 (64-bit)) - would you mind refreshing and checking again?
It's a little strange since the entire set of buttons is one image, not code.

from wikimediaui-style-guide.

Refresh or private mode does not fix the issue. The issue is also present in https://design.wikimedia.org/style-guide/img/components/buttons_normal_and_primary_states.svg.

Maybe an SVG rendering issue in Firefox 78.6.0esr (Linux).

from wikimediaui-style-guide.

Ah, I think you're right about it being an issue with SVG rendering. I didn't realise till now that the button text is being rendered as SVG elements instead of as fills, and for whatever reason its rendering the font differently with greater letter-spacing than expected in certain browsers.
Here's an example with the font larger with more letter-space on one element which replicates your issue.

I've created new svgs with text outlined, though these are 4-6x larger in file size, and there may well be other reasons why @Volker-E would want to keep it to SVG text. However, it will be good to know first if this is solves the issue.

Can you open and see if these render correctly:
button svgs text outlined.zip

from wikimediaui-style-guide.

I can confirm that the outlined versions render as expected in my Firefox.

from wikimediaui-style-guide.

OK, I created a PR with the updated files in case this simple fix is sufficient, pending review from @Volker-E .

from wikimediaui-style-guide.

Hey @Nikerabbit Could you confirm that you're seeing the same issue with other images that have text in them too:
https://design.wikimedia.org/style-guide/img/components/buttons_designing.svg
https://design.wikimedia.org/style-guide/img/components/buttons_quiet_states.svg
https://design.wikimedia.org/style-guide/img/components/buttons_toggle_intro.svg

from wikimediaui-style-guide.

The way we've moved forward with integrating SVGs into Design Style Guide was to ensure OS dependent fonts selection in SVG rendering with setting sans-serif when 'Helvetica Neue' isn't available in build step to resemble current Vector way of showing interface components.

As SVG is less flexible on adapting to overflowing text rendering we might have been lucky with most sans-serif OS choices and your Linux is the first really problematic instance.

Flattening text would remove OS specific rendering, which is a decision we've specifically chosen for both, Vector and future interface to better address operating system and device specific and internationalization needs.
So flattening could be misleading and is optimization towards one specific look and wrong for other contexts.

We could consider using a future-wider OS specific font stack as alternative resulting in more complexity with wrong paddings applied due to different font stacks (same issue as above, just more to the future interface on main font choice).
The variable font might be mitigatable by SVG magic, but will need time and resourcing to clarify and resolve.

In the meantime we could address the specific Linux installation madness here by adding a different font to the render stack before sans-serif. Possible short-term solution. @Nikerabbit What is the default sans-serif font on your Firefox (see Preferences)?

Some background on how and why to go one way (text elements) or the other (flattened text) has been discussed at https://phabricator.wikimedia.org/T192137

from wikimediaui-style-guide.

DejaVu Serif. I don't see separate option for sans-serif, but I guess it would be DejaVu Sans.

from wikimediaui-style-guide.

I can contribute in this issue,how can i proceed?

from wikimediaui-style-guide.

i want to contribute in your project grant me access as well as permission

from wikimediaui-style-guide.

i want to work on this issue please assign me this issue.

from wikimediaui-style-guide.

I can fix this issue so please assign me this issue..

from wikimediaui-style-guide.

Assign me

from wikimediaui-style-guide.

Please note, that the Design Style Guide is deprecated in favor of its successor Codex, Design System for Wikimedia.
Nonetheless, in the new documentation the SVG on Linux issue should also have been fixed due to a different font family definition. In case there are remaining issues, please file a task in Wikimedia bug tracker Phabricator.

from wikimediaui-style-guide.