Use Unicode for icons instead of Images

[mrjovanovic]

Right now, Shaarli uses images as icons in the default template. This is an issue for usability on HiDPI screens, where icons are either too small and unusable, or large and look terribly pixelated. This is also an issue for people with poor visibility who use larger fonts, or mobile devices which have high pixel density.

One can change the default templates (as I did), to use Unicode text. I use two icons in Unicode (✖ and ✎) that replicate standard functionality in Shaarli. It's a very simple change in the template file. I've attached a screenshot to show what it looks like with the (very slightly modified) default theme.

All the other icons (private links, calendar, tags) can be modified in the theme CSS. I was hoping someone could explain the logic behind their functionality as well (the date is self-evidently a date without the icons, and so are the tags, it seems). I'm new here and don't mean to step on any toes. :)

Another option is to use something like FontAwesome. This would be aesthetically very pleasing, but would add on load times.

[nodiscc]

This is an issue for usability on HiDPI screens, where icons are either too small and unusable, or large and look terribly pixelated

@mrjovanovic websites not displaying correctly on HiDPI screens is likely a browser/DE configuration problem. Have a look here: https://wiki.archlinux.org/index.php/HiDPI#Browsers for configuration tweaks on HiDPI screens.

This is also an issue for people with poor visibility

Zoom or screen readers are a common answer this problem, not forcing larger fonts (not proportional).

One can change the default templates (as I did), to use Unicode text

We can't use unicode glyphs by default without using a webfont, because there's no guarantee that these symbols will be available on every user machine with their default font (from experience default fonts on GNU/Linux have better unicode symbol sets than on Windows).

Another option is to use something like FontAwesome

So using a webfont is an option, but that means monochrome icons. We could get rid of the icons if we use a webfont, so that doesn't necessary mean more resources to load. We can also generate our own symbols set. However I'm not sure it would fit with the current shaarli theme. A more thorough theme rework would be needed for these to blend in (I used to have a branch that used a webfont... results were not great, but feel free to try)

the date is self-evidently a date without the icons, and so are the tags, it seems

The current icons on date, tags, etc. are part of the Shaarli theme historically. Again, anyone is free to try changing the default theme and submitting it as a Pull Request. If you're willing to do that, I suggest starting with more subtle changes, like colors (needs work) and paddings (not very consistent). The toolbar buttons placement is also a mess when you resize the window (biggest problem in my eyes). I personally like the icons, at least the tag item makes it clearere for visitors that they're dealing with tags. But you can also try removing them in your pull request.

Can we split this issue in more concise points if you want to address something specifically? We're planning to add contribution guidelines to this project for issue management, and what kind of patches would be accepted. Work in progress but feel free to read it.

[mro]

nice idea. pull-requests welcome I suppose :-)

[nodiscc]

Of course (not meaning it would be accepted, but it would be reviewed by volunteers). What point would you like to address?

[mrjovanovic]

I got your point. I started working on the issues you mentioned on the main theme (colors, menu, padding). Really appreciate the sound advice. Thanks.

[nodiscc]

Ok. I'll close this bug as it was about unicode icons. It can be referenced later.

[nicolasdanelon]

I agree with the idea of to be "retina friendly" but we can't add a font that got 1.000.000 icons if we'll use less than 10.

because of that I propose this two ideas :

Option 1

What about the github.io error pages?

Example: http://nicolasdanelon.github.io/error-404

      @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (   min--moz-device-pixel-ratio: 2),
      only screen and (     -o-min-device-pixel-ratio: 2/1),
      only screen and (        min-device-pixel-ratio: 2),
      only screen and (                min-resolution: 192dpi),
      only screen and (                min-resolution: 2dppx) {
        .logo-img-1x { display: none; }
        .logo-img-2x { display: inline-block; }
      }

      <a href="/" class="logo logo-img-1x">
        <img width="32" height="32" title="" alt="" src="data:image/png;base64,i*****II=">
      </a>

      <a href="/" class="logo logo-img-2x">
        <img width="32" height="32" title="" alt="" src="data:image/png;base64,iV*****fC">
      </a>

---

Option 2

Add a tiny SVG sprite & a fallback in PNG

---

Option 3

Create a reduce font awesome version using something like http://fontcustom.com/ or http://fontello.com/

[nicolasdanelon]

I got a friend who can add some style to this font awesome icons :) hes a Ubuntu-designer contributor
Here my "test-sprite"
http://nicolasmd.com.ar/dev/fa-shaarli.png
http://nicolasmd.com.ar/dev/fa-shaarli.svg

[mrjovanovic]

@nicolasdanelon
You're absolutely right about FontAwesome being huge.

Option 1 makes sense for HiDPI displays, but doesn't work for people with poor eyesight. Icons don't size up with the text on zoom. This is a functionality issue. Yes, accessibiity support isn't great in Shaarli anyway, but why not come up with a solution that works for everyone?

This leaves option 2 or option 3. It seems like option 3 - making a custom font with those nine icons might be less work, but we lose the ability to style them outside of basic CSS stuff (shadows, outlines, transitions). The problem with using a monochrome font is that the icons might not fit well in the default theme (I am more optimistic, however).

Does anyone know which browsers Shaarli is meant to support?

[nicolasdanelon]

@mrjovanovic Shaarli does not have crazy styles or javascript/jquery effects. Is very a compatible ''system'' I think we can design a pair or svg-icons y create a simple png-fallback. Maybe using modernizr or something like that? @nodiscc

[nodiscc]

A custom font using http://icomoon.io/app/#/select http://fontcustom.com/ http://fontello.com/ http://www.fontsquirrel.com/ or http://fontastic.me/ is possible and makes sense regarding bandwidth usage.

It is also possible to use sprites, whether png or svg. I had a branch that did exactly that, but I deleted it some time ago. The main advantage was that it reduced 1. total file size 2. number of HTTP requests (1 file instead of ~12). svg also fixes pixelation when using the browser zoom.

A problem with both sprites and custom webfonts is that we'd have to regenerate them every time we want to add/remove images; and check correct placement/charcodes every time we update them (hint: managing sprites alignment was horrible); so you may want to generate a comprehensive icon set in the first place.

Does anyone know which browsers Shaarli is meant to support?

There's no requirement currently; let's try not to add browser-specific hacks though. It should also degrade gracefully when Javascript is not available. Text-only browser (links, elinks) compatibility for bonus points. Pages have to stay W3C compliant.

Leaving this issue closed, as it is about using Unicode symbols or webfonts instead of images, which is not a desirable goal by itself. But as I said, proposing style changes that make use of webfonts is possible, if the proposal is better than what we currently have.

Feel free to open issues and pull requests about any aspect of the default theme

[mrjovanovic]

OK, thanks for the answer. Will think about this more before opening any new issues re: icons.

[nicolasdanelon]

@mrjovanovic do you want to start a branch to work in this feature? if you want my help I'm here.