retina compatible icons

[fuddl]

on the way to retina support (#104), one thing that has to be done is adding high res icons.

I mean these:

are these available as svg somewhere? or as a font?

[tomhughes]

Yes.

[smsm1]

Try https://github.com/openstreetmap/openstreetmap-website/blob/master/app/assets/images/sprite.svg or another file in that folder.

[tomhughes]

or in other words, just replace .png with .svg to find it ;-)

[HolgerJeromin]

HiDPI browsers probably support the new picture element (in the future http://caniuse.com/#search=picture). So the (few) img with png in it could be replaced by the following construct:

<picture>
   <source srcset="/assets/osm_logo-xxx.svg" type="image/svg+xml">
   <img alt="OpenStreetMap Logo" class="logo" src="/assets/osm_logo-xxx.png"/>
</picture>

But the logo seems to be the only img tag on the site. Edit: changed and tested with chrome.

[HolgerJeromin]

The sprite thing could perhaps be solved with this additional code

    @media
   ( -webkit-min-device-pixel-ratio: 2), /* old Webkit */
          (min-resolution: 150dpi) /* standard way */
      {  
      .icon {
        background:transparent url("sprite.svg") no-repeat 0 0;
      }
    }

And hope that the browsers announcing this properties are able to render svg background bugfree :-) Edit: changed and tested with chrome.

[fuddl]

the question-mark in the svg is just a text element:

    <text
       xml:space="preserve"
       style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
       x="264.8125"
       y="869.62622"
       id="text3021"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan3023"
         x="264.8125"
         y="869.62622">?</tspan></text>

without a font included… the font is specified as Sans Bold does anyone have more info what font that was?

[samanpwbb]

Open Sans Bold. It should be outlined... do you have this work started in a branch? Happy to fix this up.

[fuddl]

@samanpwbb I'm trying to fix this issue

[tomhughes]

Yes the question mark was just a massive hack on my part... It will be whatever my inkscape on my laptop though Sans Bold was - probably DejaVu Sans Bold or something.

Happy to take a better icon for the query tool.

[HolgerJeromin]

Perhaps we could keep it as a question mark in HTML markup.

[tomhughes]

I always intended the question mark icon to be temporary - it's just I didn't find anybody with the time and design skills to do something better so wound up releasing it.

[fuddl]

does anyone know where the clipboard and the chain icon are used? oh, and the check mark…

[tomhughes]

It's quite possible that they aren't used.

[fuddl]

I added all icons as fonts for all browsers and devices.

What do you think?

[tomhughes]

Hmm.... Icon fonts are very contentious. Will need to think about that.

[fuddl]

are they?

[yannickoo]

@tomhughes contentious?! Do you have any references for that statement?

[tomhughes]

I've seen a number of articles in the last year or so complaining about them, particularly for example the use GitHub makes of them.

I believe one complaint for example is the affect on screen readers, which expect text to be, well, text, and try and read it out.

[tomhughes]

The other common problem I think is people that deliberately override fonts in browser CSS perhaps for accessibility reasons.

It's all a bit hard to google for though because "icon fonts" gives you like a bazillion sites offering you one...

[fuddl]

how would a screenreader read an information mark (ℹ), a heart (❤) or a plus (+)?

[tomhughes]

Well according to http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html at least one screen reader reads ★ as "black star" so it's clearly not impossible that unicode pictogram type characters will be read out.

[fuddl]

maybe it would be an improvement to do something like <abbr title="Zoom in">+</abbr>, <abbr title="Zoom out">-</abbr> or <abbr title="star this">★</abbr>.

right now the control buttons aren't read at all, are they?

[HolgerJeromin]

Changing a font is much more work (and needs more knowledge) than changing a svg. For crossbrowser support we need eot and woff font. With a svg we need a png as a fallback. I would use a media query (like my code above) or a @supports rule (http://caniuse.com/#feat=css-featurequeries).

[fuddl]

I created the font using fontello which is pretty easy to use. Definitely easier then adding something to a svg sprite, adding it in css and keeping it up to date with a png sprite.

I can show you how to add anything you like to the woff and eot font, and stylesheet using fontello.

[yannickoo]

@fuddl could you upload the config.json file? :)

[HolgerJeromin]

Just for information http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

[fuddl]

@HolgerJeromin I read it carefully and I think most of it does not apply on us:

1. We use all these icons at the same time and they are always visible. The current approach also bundles the Icons in image files.
2. I didn't use the private use area
3. I have no idea what osm.org looks like in opera mini. Neither I have a testing tool… is it a thing?
4. A long fixed bug in chrome? this is a problem?

5. Can not confirm this one. it looks equally amazing in chrome firefox and safari:

   maybe I didn't understand the problem

6. I agree and I would also prefer not to use generated content in css. I would prefer putting real symbols to the html DOM which is also possible with the icon font approach but not with the current approach.
7. I find it very easy to position fonts with css… I'd do it if required. In the commit I actually removed a lot of unnecessary css
8. We don't need multi colour icons, do we?
9. We don't need animated icons, do we?
10. Popular approaches (pseudo elements, Private Use Area) seem indeed like hacks for me. I fail to see using unicode symbols for their supposed purpose as hacky.

I wonder why this technology is contentious here. Isn't it something normal in modern webdesign? also github uses an icon font, doesn't it?

[HolgerJeromin]

opera mini is not able to use interactive websites. So the osm page is not usable in the first place. No blocker for using a technology.

[Zverik]

Is this issue still relevant?

[bcherny]

yes - icons still look bad on retina:

can we just serve the SVG instead of PNG? svg is:

• supported by all modern browsers
• compatible with higher dpi devices that may appear in the near future
• smaller (just 1.1kb gzipped after running through svgo) compared to PNG (3.3kb gzipped)

[HolgerJeromin]

I am pretty sure osm.org should be usable with Internet Explorer < 9. Thats why i suggested a compatible version.

[bcherny]

can you make a pr?

[HolgerJeromin]

Made two PR for the two changes and thrown both SVGs into SVGO (nice tool btw :-) The directions button has no SVG file in the repo. Perhaps @zerebubuth can help here.

The markers (for routing and other stuff) were not changed. These are interacting with the map via drag and drop and i was not brave enough for changing them, too.

[HolgerJeromin]

could we close this or should we wait for https://github.com/openstreetmap/openstreetmap-website/blob/master/app/assets/images/directions.png

[tomhughes]

Well this is unfortunately the kind of ticket that is not sufficiently concrete to be easily closeable. There are many image that are still not retina compatible, and even some of the ones we have added patches for are not really sorted.

In particular I discovered after I merged your picture based fix for the logo that one of the two main browsers where retina support is needed (iOS Safari) doesn't actually support picture elements at all, so we really need to revisit that.

[HolgerJeromin]

You are right. Safari seems to ignore picture element, but rely on the uglier srcset for img tag. I hoped this is a temporary problem, but the bug report is quite old. IEs support for picture is under development, but srcset on img is ready now.

[danieldegroot2]

@gravitystorm Requesting to label this issue at least as ui to make it easier to find.

[hiddewie]

I made a pull request in https://github.com/openstreetmap/openstreetmap-website/pull/4775 to replace a number of commonly used icons. If this pull request is appreciated, I can replace many more of the icons with their SVG variants. This should improve the retina support of the OpenStreetMap website considerably.