PE-Analog-Clock-icon-font

A set of icons for displaying a visual ("analog") representation of time stamps.

The Analog Clock icon set allows <time> elements to have a visual notation in a simple, progressive way using a @font-face to deliver a custom font for the clock face. The icon is therefore scalable and can be styled with CSS to match most site designs.

The required HTML can be implemented server-side in any application to output the desired icons. Optionally, for users that do not have server-side access, a javascript plug-in can sniff out <time> elements and add the HTML necessary for the icon set. Both options are documented in the sample and can be modified to fit specific situations.

The CSS uses :before pseudo elements to place the icons, therefore, there is no extraneous HTML content present when the :before element is not supported. Graceful fallback to the contents of the <time> element.

Supports:

Military time
Overlapping digit notations: hour-00, hour-24, minute-00, minute-60
Single digit hour values: hour-01 as well as hour-1

Sample

Since GitHub readme does not support @font-face, here is a sample image of what the icon font looks like with very little CSS applied to it:

How it Works

The font file contains glyphs for hours and minutes. The glyphs for the hours contains the circle outline as well. To cut down on the number of glyphs needed for minutes, the font contains a glyph for every third minute (3, 6, 9, 12, 15, etc...) which hits the quarter hours perfectly. We also decided that at most sizes, a difference of three minutes is all most people will recognize. For browsers that support CSS3 for transform: rotate() every position for the minute hand is represented.

The <span> for the minute hand is nested inside of the hour. The hour has position: relative while the minute has position: absolute. In this way, they can overlap each other to create a clock face and represent many different combinations of hour and minute.

More information and samples in the index.htm file.

Browser Support

Browsers need to support @font-face as well as :before pseudo-elements. This font and CSS has been tested in:

Windows browsers

IE 8 and above
Firefox 3.6 and above
Safari 4.0 and above
Chrome 14.0 and above
Opera 11.1 and above

Mac browsers (Snow Leopard)

Firefox 3.6 and above
Safari 4.0 and above
Chrome 14.0 and above
Opera 11.1 and above

iOS

iPhone 4S (iOS 5.1) and above

Android

Android 4.0.3 and above on most devices

skopp / pe-analog-clock-icon-font Goto Github PK