Page MenuHomePhabricator

Agree and make official statement about future of Wikifont
Closed, ResolvedPublic

Description

Task expectation:
Finding agreement and follow-up official statement about future of Wikifont.
It has already been moved to the Design/Archive section based on the outcome of our last UI-Standardization offsite, the message is not sufficient IMHO.

Agreement for resolving this task 2017-01-20:
We've (Foundation UX engineers and designers) identified and agreed, that providing icon fonts is an overhead that we don't want to keep:

  • The build step has to be kept updated and working while at the same time
  • icon fonts are having severe limitations, therefore we won't provide them as default option and recommend usage of SVGs instead.

@Prtksxna has started an repo with a build step for icon fonts out of the currently in-use OOjs UI icons. This can be used as is or forked. Just as note, he has put this together in his volunteer capacity, so there is no guarantee that he'll maintain this regularly.

A follow-up is on the way, providing icons as SVG source and web-optimized files in T155211

Event Timeline

How much resources does it require to maintain WikiFont?

Just a thought: If the WikimediaUI Style-Guide is advertised more and given more publicity, it'll help people learn how to create icons based on the guidelines provided (I have that repository on my watchlist since I like to see how it progresses/changes, so I did see that guidelines were created; awesome work!). What would even be better would be to be provide .ai and .sketch templates for both square and circular icons, which helps people get a foundation to work on. For those who aren't able to use these applications (Sketch and Adobe Illustrator), providing a .svg template would be good as well, so people could install free software such as Inkscape.

As a bonus, I'd be definitely willing to help create WikiFont icons whenever it's requested (e.g via a ticket). A dedicated WikiFont phabricator project could be created with workboards such as icon requests, icon changes, icon deletions, icon renames, etc (or like other WMF projects such as "In progress" / "Doing", "Investigate", "Needs code review", etc.) I think a dedicated phabricator project for WikiFont will help get work organized, and maybe more people will find about it! Obviously such a project creation request is non-trivial, which is why it's something for discussion. Thoughts on that?

I don't know how much influence of the fact that there's third-parties (non-WMF groups) using WikiFont, such as the Refreshed skin which is developed by Brickimedia. It's used throughout the skin, which includes the mobile header icons, desktop/tablet icons, along with inside the toolbar. I can't voice for other third-parties that might use it (I'm not aware of currently any, but I'm sure there's some!). However, as a third-party user of the WikiFont project myself, I would like to help keep it going. Volunteer work, not just WMF-work, is what keeps projects going - it's what the MediaWiki community is all about. If we can work together on spreading it out there, there's a bigger and better chance that more people will be willing to help out to contribute.

I'd also like to state that it seems like a lot of work has already been put into it, here's some example tasks related to it: T135081, T139351, T139347, T141801, T134752, T135080. From my understanding in T135080, it was already decided that work would be continued on WF. I'd like to point too that (from my understanding, I may be wrong though so feel free to correct me if need-be), they're already being used in Flow, VisualEditor, Echo, Maps, Minera, Translate, Newsletter, MultimediaViewer, the iOS Wikipedia app, etc. People are already familiar with the icons as well.

By WikiFont we mean the actual font files that were created with some of the icons, right? Not the SVG icons that OOUI provides?

https://github.com/wikimedia/WikiFont
https://www.mediawiki.org/wiki/Design/Archive/WikiFont


@SamanthaNguyen Those are some good ideas on maintaining the project. I was wondering why you have chosen to use the Wikifont over the OOUI icons?

@Prtksxna Thanks :) - at the time Refreshed was created by Brickimedia developers, WikiFont was what was available and OOJS-UI didn't exist yet. (Well, we originally used FontAwesome, but switched to WikiFont when we heard that it existed). From what I can remember, @georgebarnick was the main one that pushed for changing to use WikiFont, so he could provide more insight on that. I believe @MtMNC and @ashley participated in that discussion as well? It's stuck with us for a while, and we haven't had any interest in having Refreshed use OOUI widgets or stuff like that, as we want it to have some uniqueness to it. Non of our developers are familar with OOUI though, so here's a question I want to pose - would it be possible to be able to just use the OOUI icons as its own module instead of having to include the entirety of OOUI?

Also honestly, I wasn't aware there was a difference, so that's a misunderstanding on my part (oops!) My knowledge were that they were equivalent. WikiFont provides SVG icons as well, see - https://github.com/wikimedia/WikiFont/tree/master/svgs. They're all prefixed with uni and they're all .svgs, so ctrl+fing both of those shows that there's a grand total of 220 SVG icons. (so many icons that could be used!)

However from what you said, it seemed to me that you inferred WikiFont icons don't provide SVG icons? I'm a little confused - if you can explain the major differences between these two, that would be awesome :) Thanks in advance!

Thanks for clarifying everything @SamanthaNguyen, here, and on IRC. So the Refreshed skin is using the Wikifont as a font, and if I understand correctly, will no longer be needing the SVG files.

We haven't supported the Wikifont in a while, the latest commit 8499b27 was on 4 Jul 2016, and aren't planning to revive it. The OOUI icons on the other hand get updated with more regularity (P4728). All the tickets that you pointed out in your comment were for the process of keeping the OOUI icons updated.

We could however build a font and CSS file using the icons in the OOUI repo which could be used by you. Also, how difficult would it be for you to switch to the SVG icons in the OOUI repo (I am not suggesting you use OOUI widgets, just the icons)?


@Volker_E do we know other users and uses of the wikifont? Do you think it makes sense to automatically create a font and have that as an option from the new styleguide?

Just a thought: If the WikimediaUI Style-Guide is advertised more and given more publicity, it'll help people learn how to create icons based on the guidelines provided (I have that repository on my watchlist since I like to see how it progresses/changes, so I did see that guidelines were created; awesome work!). What would even be better would be to be provide .ai and .sketch templates for both square and circular icons, which helps people get a foundation to work on. For those who aren't able to use these applications (Sketch and Adobe Illustrator), providing a .svg template would be good as well, so people could install free software such as Inkscape.

Thanks for your interest and appreciation for the work we started with the design guideline, @SamanthaNguyen. The idea is to provide templates that make it easier for contributors to follow the guidelines, and I agree it makes sense to do it for common tool formats as well as the standard SVG format.

At the moment the guideline is in a very early stage where we are trying to put together the different design recommendations that are currently implicit or fragmented across different Phabricator tickets. It is a working document for discussion and it is expected to evolve as new ideas are discussed.

So we definitely want for interested people to contribute early to this process (with suggestions about the recommendations that make sense or not in their context, which tools/templates can be helpful for them, etc.). At the same time we need to be careful not to present it as a "production-ready" document since we don't want volunteers to make an effort updating their extension to find that they need to do it again because the guidelines changed too quickly at this stage.

I think "wikifont" is a topic that combines different aspects:

  • I think we need to have an icon repository. That is, a place we keep Wikimedia icons for use by Wikimedia products but also anyone interested. People should be able to download those icons, use them for any purpose (external apps, posters, powerpoint presentations, etc.) and contribute new icons or propose fixes to existing ones.
  • I think the UI libraries should make it easy for developers to use the icons in the repo (but not necessarily have the repo being embedded or part of a specific UI library).
  • I don't think that font formats are the best delivery mechanism for showing icons (an interesting comparison with SVGs). Currently it is possible to change the color of an SVG which was the main selling point for the use of font formats (avoiding issues such as blurriness due to font antialiasing). However, I'm ok in the font format to be generated if that is helpful for other people and it takes little effort. In any case the source icons will be in SVG and other formats will be exports of those.

Thanks for clarifying everything @SamanthaNguyen, here, and on IRC. So the Refreshed skin is using the Wikifont as a font, and if I understand correctly, will no longer be needing the SVG files.

We haven't supported the Wikifont in a while, the latest commit 8499b27 was on 4 Jul 2016, and aren't planning to revive it. The OOUI icons on the other hand get updated with more regularity (P4728). All the tickets that you pointed out in your comment were for the process of keeping the OOUI icons updated.

We could however build a font and CSS file using the icons in the OOUI repo which could be used by you. Also, how difficult would it be for you to switch to the SVG icons in the OOUI repo (I am not suggesting you use OOUI widgets, just the icons)?

It should be pretty easy with just a little bit of help if that's okay :) Just created T155083 for that, to separate discussion just in case this ticket's dicussion could get off-topic and also to have a ticket to point back to if a patch is written up

Just a thought: If the WikimediaUI Style-Guide is advertised more and given more publicity, it'll help people learn how to create icons based on the guidelines provided (I have that repository on my watchlist since I like to see how it progresses/changes, so I did see that guidelines were created; awesome work!). What would even be better would be to be provide .ai and .sketch templates for both square and circular icons, which helps people get a foundation to work on. For those who aren't able to use these applications (Sketch and Adobe Illustrator), providing a .svg template would be good as well, so people could install free software such as Inkscape.

Thanks for your interest and appreciation for the work we started with the design guideline, @SamanthaNguyen. The idea is to provide templates that make it easier for contributors to follow the guidelines, and I agree it makes sense to do it for common tool formats as well as the standard SVG format.

At the moment the guideline is in a very early stage where we are trying to put together the different design recommendations that are currently implicit or fragmented across different Phabricator tickets. It is a working document for discussion and it is expected to evolve as new ideas are discussed.

So we definitely want for interested people to contribute early to this process (with suggestions about the recommendations that make sense or not in their context, which tools/templates can be helpful for them, etc.). At the same time we need to be careful not to present it as a "production-ready" document since we don't want volunteers to make an effort updating their extension to find that they need to do it again because the guidelines changed too quickly at this stage.

Right, am I correct in guessing that it's currently in alpha/beta-ish stage? :) I'll try to create some more tickets this week related to icons for the style guide when I get time as I do have more ideas on how the guide can be improved to be more helpful :)

Also on a related note, we should end up deleting the gh-pages ( https://github.com/wikimedia/WikiFont/tree/gh-pages ) branch on WikiFont (if we end up archiving it?) or at least making an edit in the index.html with a notice pointing to the style guide. It's currently just using a template, but it shouldn't be existing anyways ( it exists now at http://wikimedia.github.io/WikiFont/ ).

What would be a good place to try and find users of the Wikifont (if any)?

Unfortunately I don't know of any :-(

On another note, I think we should probably merge WikiFont with OOUI icons. After all, there's 220 icons in total and they could have several good uses - this would take a bit of effort but I'm willing to help if we decide to do that. Thoughts?

I spent some time automatically generating a webfont using the SVG icons in OOUI. I think I have a good process in place, and it shouldn't be very hard to keep a "Wikifont" like thing alive if required. Check it out - https://prtksxna.github.io/ooui-icons-webfont/

Great work :) (For some reasons only icons become bigger on the first column, not on the 2nd or 3rd column though. I'll try to see what's going on, although that's somewhat unrelated)

I see you generated an .eot, .ttf, and .woff. Is there a reason why .otf isn't generated? (Just curious) Also maybe in the future when there's better browser support for .woff2, that could be generated also? It'll probably be a while though, so we can probably think about it later. (Source: http://caniuse.com/#feat=woff2 )

@SamanthaNguyen Just to understand your request better: Would the OTF be for using it in word processors?
I fully support the request for WOFF2 and think it's a necessity as it improves performance/user experience quite a bit.
A interesting read already shared on another task: https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/

Also maybe in the future when there's better browser support for .woff2, that could be generated also?

https://github.com/prtksxna/ooui-icons-webfont/commit/e33def999d35787ea0cd0e87ae4838b1a005384d

My apologies for taking so long to respond!

Also maybe in the future when there's better browser support for .woff2, that could be generated also?

https://github.com/prtksxna/ooui-icons-webfont/commit/e33def999d35787ea0cd0e87ae4838b1a005384d

Awesome :)

@SamanthaNguyen Just to understand your request better: Would the OTF be for using it in word processors?
I fully support the request for WOFF2 and think it's a necessity as it improves performance/user experience quite a bit.
A interesting read already shared on another task: https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/

From the article: We’ve eliminated the standalone TrueType/OpenType format because most web browsers support both WOFF and [True|Open]Type. It’s also worth noting that WOFF is just a container format—it adds a wrapper around existing TrueType/OpenType files.

I didn't have any ideas in particular, it was more of just an unfinished thought I wrote out but it looks like we don't need it, so feel free to ignore my suggestion :) That's also an interesting article, I'll have that bookmarked.

Volker_E updated the task description. (Show Details)