Last modified: 2014-03-12 17:29:46 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T64186, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 62186 - Use SVG (with PNG fallback) for Wikipedia wordmark on wikipedia.org
Use SVG (with PNG fallback) for Wikipedia wordmark on wikipedia.org
Status: NEW
Product: Wikimedia
Classification: Unclassified
General/Unknown (Other open bugs)
wmf-deployment
All All
: Normal enhancement (vote)
: ---
Assigned To: Nobody - You can work on this!
: design
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2014-03-04 11:13 UTC by Steven Walling
Modified: 2014-03-12 17:29 UTC (History)
7 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
200% (306.20 KB, image/png)
2014-03-04 11:13 UTC, Steven Walling
Details

Description Steven Walling 2014-03-04 11:13:33 UTC
Created attachment 14733 [details]
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.
Comment 1 PiRSquared17 2014-03-04 18:16:49 UTC
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?
Comment 2 Steven Walling 2014-03-04 18:44:27 UTC
(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.
Comment 3 Matthew Flaschen 2014-03-04 19:21:16 UTC
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.
Comment 4 Matthew Flaschen 2014-03-04 19:22:47 UTC
Is https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg the right SVG?
Comment 5 Matthew Flaschen 2014-03-04 19:27:57 UTC
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?
Comment 6 Matthew Flaschen 2014-03-04 19:32:07 UTC
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.
Comment 7 PiRSquared17 2014-03-04 19:42:14 UTC
(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).
Comment 8 Matthew Flaschen 2014-03-04 21:11:18 UTC
(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.
Comment 9 PiRSquared17 2014-03-04 23:08:27 UTC
(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)

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links