| • bzimport | |
| Mar 4 2014, 11:13 AM |
| F12970: Screen_Shot_2014-03-04_at_10.39.07_AM.png | |
| Sep 4 2015, 4:44 PM |
Author: swalling
Description:
200%
Even at normal sizes, the Wikipedia wordmark hosted on wikipedia.org looks fuzzy. When you use a high-density display or increase size, you can see this even more.
Simple fix is likely to use an SVG version of the wordmark, with PNG fallback.
Version: wmf-deployment
Severity: enhancement
Attached:
By fallback, do you mean like http://css-tricks.com/svg-fallbacks/?
I am not sure this even requires a bug -- the raw HTML can be edited in a sandbox [https://meta.wikimedia.org/wiki/Www.wikipedia.org_template/temp here] and any editprotected (admin, etc.) user can edit the raw HTML: https://meta.wikimedia.org/wiki/Www.wikipedia.org_template
Would this apply only to Wikipedia or to other portals as well?
swalling wrote:
(In reply to PiRSquared17 from comment #1)
By fallback, do you mean like http://css-tricks.com/svg-fallbacks/?
I don't know which technique we prefer but I do know this is our preferred solution, since it accounts for browsers without SVG support.
I am not sure this even requires a bug -- the raw HTML can be edited in a
sandbox [https://meta.wikimedia.org/wiki/Www.wikipedia.org_template/temp
here] and any editprotected (admin, etc.) user can edit the raw HTML:
https://meta.wikimedia.org/wiki/Www.wikipedia.org_template
Sure. I filed the bug because a developer needs to write the implementation.
Would this apply only to Wikipedia or to other portals as well?
It may. Some portals it seem (like Wiktionary.org) use plain text with Linux Libertine set in the CSS, which is probably not great considering very few users have that typeface installed. Others, like Wikivoyage, also use a PNG so this probably applies as well.
It already uses a background image, so the idea behind background-image-svg (in core) can be used. However, it can't actually use that mixin, since LESS is not available on-wiki so far. But the output can be copied.
Never mind, I missed that you were talking about the wordmark, so neither of the above apply. It's using an image, which means it's not as straightforward.
It should work in theory since there is a srcset. Maybe the problem is the explicit width. Which browser are you testing with?
Part of the problem might also be that jquery.hidpi is not loaded, since it's not a wiki page. So if there's no native support, it wouldn't work.
(In reply to Matthew Flaschen from comment #6)
Part of the problem might also be that jquery.hidpi is not loaded, since
it's not a wiki page. So if there's no native support, it wouldn't work.
mw and jQuery are not loaded on portal pages, but [[m:MediaWiki:Gadget-wm-portal.js]] is. I would certainly prefer a non-JS solution if feasible, as not everyone has JavaScript enabled.
(In reply to Steven Walling from comment #2)
Sure. I filed the bug because a developer needs to write the implementation.
That's reasonable. I have also posted this on the relevant talk page (for Wikipedia portal, not others).
(In reply to PiRSquared17 from comment #7)
(In reply to Matthew Flaschen from comment #6)
Part of the problem might also be that jquery.hidpi is not loaded, since
it's not a wiki page. So if there's no native support, it wouldn't work.mw and jQuery are not loaded on portal pages, but
[[m:MediaWiki:Gadget-wm-portal.js]] is. I would certainly prefer a non-JS
solution if feasible, as not everyone has JavaScript enabled.
Well, one option is to convert it to a background image, then use the same technique background-image-svg does. That wouldn't use JS.
(In reply to Matthew Flaschen from comment #8)
(In reply to PiRSquared17 from comment #7)
(In reply to Matthew Flaschen from comment #6)
Part of the problem might also be that jquery.hidpi is not loaded, since
it's not a wiki page. So if there's no native support, it wouldn't work.mw and jQuery are not loaded on portal pages, but
[[m:MediaWiki:Gadget-wm-portal.js]] is. I would certainly prefer a non-JS
solution if feasible, as not everyone has JavaScript enabled.Well, one option is to convert it to a background image, then use the same
technique background-image-svg does. That wouldn't use JS.
Feel free to implement it on the /temp subpages, then we can see if it works. Please do not edit the main portal without updating /temp (also, the main portal uses minified CSS)
I have done it please check temp at https://meta.wikimedia.org/wiki/Www.wikipedia.org_template/temp
I have uploaded the changes here https://meta.wikimedia.org/wiki/Www.wikipedia.org_template/temp not all Wikipedia svg logo I could find in the right pixel format so some have svg some doint just png.
PNG and HiDPI are not mutually exclusive. Serving SVGs at this point is not attractive due to them being unoptimised and containing too much detail and meta data (e.g. 90KB for a 2x optmimised PNG vs 170KB for the raw SVG).
The https://www.wikipedia.org/ portal now uses srcset with a 2x variant for both images.