Comments (14)
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.
Related Issues (20)
- Typography - specimen svg image does not display as expected
- SVG image for tpography-readability is missing spaces around links HOT 1
- [Typography] - what is the preferred treatment for system messages/alerts/dialogs? HOT 1
- Move resources to a different folder and use submodules HOT 13
- Move icons into its own repo HOT 4
- Load Resource 404 Error HOT 10
- [CSS] Use partials for modular CSS architecture? HOT 4
- Alerts in Components HOT 7
- Specify "common meaning" for utility colors HOT 4
- Add a link to the design team blog HOT 4
- Menu icon in mobile view off alignment HOT 4
- Increasing the width of color blocks HOT 6
- Text flowing off the page HOT 1
- Add more component design guidelines HOT 12
- Add "scroll to top" button in web page HOT 11
- Add "dark mode" button in the website HOT 21
- ADD follow section in footer! HOT 3
- Transform build scripts from Grunt to npm based scripts HOT 9
- Consider dropping Squoosh HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wikimediaui-style-guide.