RichStyle: The Angel is in The Detail.

Icon Standardization for Web Applications

Abstract

This research is derived from my talk at ArabNet conference held in Beirut on , and available as a PDF on Unicode.org.

The aim of this research is to develop standards for representing icons in web applications. This means giving proposed icons in this research addresses in «Miscellaneous Symbols and Arrows» and «Miscellaneous Technical» Unicode blocks. e.g.:

Methodology

Using Regular Image Files

The most popular solution used to display icons in web applications is called “CSS Sprites”, which is to collect the various needed icons —of all sizes and colors— in a single regular image file. Here is a sample of Google icons stored in a single regular image file. Notice that icons are spread over ​​the image canvas randomly.

A snapshot of Google-icons image file
Figure 1 - Google icons are stored in a one single image file

Using The Embed Fonts Technology

The embed fonts technology has paved a new way for web developers to represent icons using characters in the embedded fonts instead of the regular image formats used usually in the web, such as PNG, GIF… etc, which represents an important step for icon addressing in software industry generally, and in web development world particularly.

This step coincided with another important step as important as its previous one, which is the adoption of Unicode 6.0 for a broad spectrum of visual symbols (Emoji) and embedding it in its tables.

Emoji are the ideograms or smileys used in Japanese electronic messages and webpages, whose use is spreading outside Japan. Originally meaning pictograph, the word emoji literally means “picture” + “character”. Wikipedia, 2014

This step might lead us to a completely different usage of Emoji; providing a stable standard for addressing UI icons in software engineering. According to this version of Unicode, each popular UI icon had a stable address in Unicode blocks. For example; the muted speaker has the address 1F507, and the magnifying glass has the address 1F50D… and so on.

A table of some new icons supported by Unicode 6 and their addresses implemented using RichStyle font.
Figure 2 - Some of the new icons supported by Unicode 6 and implemented using RichStyle font

RichStyle font is an attempt to implement the idea of icons-addressing in the web pages through the Unicode 6.0 and above, but this project revealed a lack of some icons and visual symbols that are not addressed yet by Unicode. These icons are the ones that have a label in the preview page of RichStyle font.

Recommendations for Unicode: Missing Icons

In order to clarify this limitation I will try to develop a model for a generic web site covers the most popular requirements for a modern web site.

A UML class diagram for a simple web site
Figure 3 - A simple structure for a web site

Notice that:

In the light of this model, and comparing to the icons supported in Unicode 7.0 beta, web developer can use the following Unicode icons:

Table 1 - Avilable web Emoji icons for Unicode 7.0
Item Code Character Name Alias Name(s)
about class 1F6C8 🛈 CIRCLED INFORMATION SOURCE
audio class 1F3B5 🎵 MUSICAL NOTE music, being in good mood, audio clip
bookmark operation 1F516 🔖 BOOKMARK
close operation 1F5D9 🗙 CANCELLATION X close
contact-us class 2709 ENVELOPE
documentation class 1F4D6 📖 OPEN BOOK read operator's manual
document class 1F5CE 🗎 DOCUMENT
downloads class 2B8B DOWNWARDS BLACK CIRCLED WHITE ARROW
e-book class 1F56E 🕮 BOOK
edit operation 270E LOWER RIGHT PENCIL
flip-horizontal operation 2B0C LEFT RIGHT BLACK ARROW flip-horizontal
flip-vertical operation 2B0D UP DOWN BLACK ARROW flip-vertical
go-top operation 2B89 UPWARDS BLACK CIRCLED WHITE ARROW
home class 1F3E0 🏠 HOUSE BUILDING
image class 1F5BC 🖼 FRAME WITH PICTURE art, graphic document
line-wrap operation 2B92 NEWLINE LEFT
log-in operation 1F512 🔒 LOCK
log-out operation 1F513 🔓 OPEN LOCK
plain-text class 1F5B9 🖹 DOCUMENT WITH TEXT
preferences class 2699 GEAR tchnology, tools, preferences
presentation class 1F5BB 🖻 DOCUMENT WITH PICTURE BLACKBOARD WITH STATICAL SHAPES presentation
print operation 1F5A8 🖨 PRINTER
privacy-policy class 1F512 🔒 LOCK privacy
products class 1F4E6 📦 PACKAGE commodities
rich-text class 1F5BA 🖺 DOCUMENT WITH TEXT AND PICTURE
rotate-left operation 2B10 LEFTWARDS ARROW WITH TIP DOWNWARDS rotate-left
rotate-right operation 2B0E RIGHTWARDS ARROW WITH TIP DOWNWARDS rotate-right
search operation 1F50D 🔍 LEFT-POINTING MAGNIFYING GLASS search
services class 1F527 🔧 WRENCH service
show-comments operation 1F4AC 💬 SPEECH BALLOON comic book conversation bubble, comments
terms-of-use class 2696 SCALES legal term, jurisprudence
video class 1F39E 🎞 FILM FRAMES film clip

Underlined term means proposal. Notice also that I redfined 1F5BB as an icon for presentation document.

Whilst, web developer still not find matching unicode addresses for the following classes and operations, which means it need to be added in the next Unicode release:

Table 2 - Proposed web Emoji icons for Unicode 7.0
Item Proposed Code Character Names Alias Names
full-screen operation 23FB FOUR ANGULAR ARROWS FACING OUT full-screen
exit-full-screen operation 23FC FOUR ANGULAR ARROWS FACING IN exit full-screen
package class 2BE0 TIED FOLDER archive, compressed document
spreadsheet class 2BE1 DOCUMENT WITH TABLE OR BAR CHART spreadsheet
database class 2BE2 DRUM database
FAQ class 2BE3 TWO SPEECH BALLOONS WITH QUESTION MARK FAQ
help class 2BE4 LIFE RAFT help
RSS class 2BE5 RSS SYMBOL
shopping-cart class 2BE6 🛒 SHOPPING CART
crop operation 2BE7 CROP  SYMBOL crop
menu operation 2BE8 THREE HORIZENTAL LINES menu
share operation 2BE9 THREE NODES CONNECTED USING TWO LINES share
zoom-in operation 2BEA RIGHT-POINTING MAGNIFYING GLASS WITH PLUS SIGN zoom in
zoom-out operation 2BEB RIGHT-POINTING MAGNIFYING GLASS WITH MINUS SIGN zoom out
zoom-fit operation 2BEC RIGHT-POINTING MAGNIFYING GLASS WITH FRAME fit
zoom-original operation 2BED RIGHT-POINTING MAGNIFYING GLASS WITH 1 NUMBER original size

Icons marked with yellow background were adapted by Unicode organization later on, i.e. after this article has been published.

Recommendations for W3C: Representing Icons Using CSS

W3C standards stated that icons should be represented using the following syntax:

<menu>
    <menuitem icon='page-about.png'/>
    <menuitem icon='domain-settings.png'/>
</menu>

Unfortunately, this standard will not allow you to implement the popular ways used nowadays to represent icons, whether through CSS Sprites or embedded fonts technology, it’s a backward movement, and it means representing each icon using an independent image file, and therefore fatiguing the network with too many request for downloading a large amount of images.

As an alternative, I suggest representing icons using CSS pseudo element, not as an HTML element’s attribute. The reason for this is that icon —even though it represents an attribute— but:

practically; in the HTML page, we’ll use the element MenuItem with a class name, and in CSS file we’ll use a pseudo element called :icon, to be able to adjust all the presentation attributes of this icon, just like content, font name, font size, and position.

<menu>
    <menuitem class='page-about'/>
    <menuitem class='domain-settings'/>
</menu>
.page-about:icon {
    content: char(ℹ);
    font: 10pt RichStyle;
    icon-position: top;
}

.domain-settings:icon {
    content: char(⚙);
    font: 10pt RichStyle;
    icon-position: top;
}

Icon Standardization for Desktop Applications

A few years ago, Tango Icons project have tried to set a standard for icons naming for Linux, in order to be addressed in a standard way. However, I think that Unicode 6.0+ now represents a reliable alternative to be adopted as a standard for addressing icons within the software process.

Unicode 6.0 icons naming vs. Tango icons naming
Figure 4 - Unicode 6.0 icons naming vs. Tango icons naming

Here is an express view of proposed icons for desktop and mobile icons, inspired by Unicode 7.0 Beta itself.

Proposed Emoji icons for desktop, and mobile environments
Figure 5 - Proposed Emoji icons for desktop, and mobile environments

Icons with green check-mark were adapted by Unicode organization later on, i.e. after this article has been published.

Conclusion

References