8

I have a common understanding problem and it's unclear for me what would be the best way to go forward. So I decided to ask community for advices.

jQuery UI defines CSS Framework which contains class "ui-icon" and many specific classes for different standard icons (320 total icons) which one can see on the test page. There are a lot of plugins, web sites and so on who uses the CSS framework. For example jqGrid Pluging use it. The grid which will be created by jqGrid contains the icons.

After writing the answer about the usage of Font Awesome icons instead of some jQuery UI icons I am asking me regularly the same question: why jQuery UI CSS framework has raster icons instead of vector based icons? In my opinion it would be very practical to have another implementation of the Icon part of jQuery UI CSS Framework. In the case one could just replace the jQuery UI Theme and to have icons which implemented in better way.

We are living now in the time of monitors with high DPI (event for tablet PC and smartphones). So many people use zoom setting higher as 100% as the standard setting in the web browser. If one compares
enter image description here
with
enter image description here
one would see differences very clear.

Current versions of web browsers (including old IE7) supports vector based web fonts in at least one from formats WOFF, EOT, TTF, OTF or SVG. The fonts are the part of W3C Working Draft document "CSS Fonts Module Level 3" (see http://www.w3.org/TR/css3-fonts/#src-desc).

So why one don't replace current PNG icons of jQuery UI with web fonts alternatives? There are many free open source fonts which provides already (see here, here, here, here and so on) the most (but not all) icons which one need.

Additional benefit of using web fonts which I see will be simplifying of creating of jQuery UI Themes. If I compare the images ui-icons_XXX_256x240.png used inside of Base Theme, or if I compare there with the corresponding images of another Theme, then I see the color used in the images as the only difference between. In case of usage vector fonts one can just specify color, background-color or use linear-gradient or radial-gradient CSS styles to change colors or to produce nice color effects:
enter image description here

I see many advantaged in usage of vector icons, but I don't found till now a good place where one could place the feature request for vector icons. I posted the feature request and this one, but I think more and more that we have here common jQuery UI Framework problem.

After release of jQuery 2.0 which drops support of IE 6/7/8 is it not the time to consider to replace raster based PNG icons with vector based web fonts?

Probably I miss some important disadvantages of usage vector based web fonts? Very bad performance for example (which I didn't seen till now) or some other things? Is creating of all needed icons too complex? Are there some other problems?

I decided to ask the question to draw attention of other people to the problem which I see. I'm afraid, that without the corresponding feedback from community my feature request will be have no consequences.

Which way would be the best for placing of such feature request? I have to add that creating of fonts or picture is not the subject where I am good myself. So I can't participate in the implementation myself. Sorry.

Any advices or your opinions about the subject are welcome!

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798

1 Answers1

0

Fonts are not good for implementing icons. Look at the road signs - at least three colors are needed. For such a purpose, fonts will be replaced by SVG or similar format, possible with hinting instructions.

why jQuery UI framework has raster icons instead of vector

I think, from a lack of standards for vector-based icons realization at this moment.

Is creating of all needed icons too complex? Are there some other problems?

Yes, it's not so easy to create all icons within a font, that work well in all browsers. But there is another problem. The good solution is to implement google's logo in vector format, not raster. As you can see this is not happened yet.

yakunins
  • 636
  • 1
  • 9
  • 18
  • thanks your your answer, but I don't understand what you mean with requirements of "at least three colors". [W3 standard](http://www.w3.org/TR/css3-fonts/#src-desc) is in Working Draft stage and different web browsers allows now to use *at least one* from the font formats. If one defines CSS of jQurey UI classes like `ui-icon-trash` or `ui-icon-seek-next` using fonts with fallback to PNG (or conditional CSS like ` – Oleg Apr 29 '13 at 10:11
  • I mean using fonts to expose icons is a hack. This method will be replaced with a proper one. – yakunins Apr 29 '13 at 10:18
  • From the point of view of the user who uses CSS with icon I need place now classes "ui-icon ui-icon-triangle-1-n" from jQuery UI CSS to have the raster icon. If I would add instead the class "icon-sort-up" on the sane `` I would have raster icon instead. So my question: why not to have CSS which defined as before with "ui-icon" and "ui-icon-triangle-1-n" but which use definition from "icon-sort-up" with small fifing of icon position? In the cae I would can use **old code** on HTML page, but I will have some implementation of vector icons instead of old raster icons. – Oleg Apr 29 '13 at 10:18
  • Why usage of icons is a hack? Look at UNICODE standard. In contains a lot of *symbols* used in math, physic, graphic and so on. In the same way jQuery UI Framework defines a set of icons which persons which creates web sites using jQuery UI can use. Why the icons should be implemented as raster bitmaps? – Oleg Apr 29 '13 at 10:21
  • Here is the example of properly implemented icon: google Bingo! – yakunins Apr 29 '13 at 10:23
  • @Oleg >Why usage of icons is a hack? I said using font (to draw an icon) is a hack. Here is the the way of hacker: with a lot of CSS somewhere. – yakunins Apr 29 '13 at 10:27
  • Sorry, but the difference between "hacker" and "non-hacker" in the above examples is just whether one use image or background image. Moreover my question was about [**jQuery UI CSS Framework**](http://wiki.jqueryui.com/w/page/12137970/jQuery%20UI%20CSS%20Framework) defines other interface of usage jQuery UI Framework icons. One needs use CSS classes which suggest jQuery UI: "ui-icon" class and some icon specific class like "ui-icon-triangle-1-n". My question was about **implementation** of such CSS classes. – Oleg Apr 29 '13 at 10:35
  • There are a lot of web plugins and web sites which uses already the classes in the way in which jQuery UI CSS Framework required. My question described about changing of *implementation* of the existing classes. So that one could have replacement of raster icons to vector icons *without any changing of exiting applications*. One need just replace jQuery UI CSS on another version which use new implementation. – Oleg Apr 29 '13 at 10:38
  • @Oleg Please, fix and cleanup your question as you wish, because the question you needed answers for comes only in comments. – yakunins Apr 29 '13 at 10:52
  • I tried formulate in bold the question: "why jQuery UI framework has raster icons instead of vector based icons?", I tried to include examples and pictures but nobody is perfect. I'll add words "jQuery UI CSS Framework" in the title of my question and probably improve the text. – Oleg Apr 29 '13 at 11:13