A Guide to Using Pictograms in Mobile Web Applications

A Long-Standing Feature

Developers inspecting the user agent profile of a modern handset like the Motorola XT682 ATRIX TV may be surprised to discover the following declaration:

<prf:ImageCapable>Yes</prf:ImageCapable>

This clause is a remnant from a time when mobile phones boasted displays that showed just a few lines of monospaced characters and could not render bitmap images. As a remedial feature, mobile clients included a set of glyphs conveying stereotypical representations of actions, states and objects. These graphical symbols, frequently stored as a special font in the terminal, could be referred to in Web pages and served as a substitute for richer, but unprocessable pictures. HDML, a markup format for the mobile Web elaborated in the mid-1990s, offered a syntactic construct to this effect.

Pictograms were soon considered to be useful as such, and made their way into i-Mode, WAP and UNICODE specifications.

Pictograms differ from icon resources of native smartphone applications:

Whether in household appliances, packaging, or car dashboards, pictograms are ubiquitous in daily life; their application in mobile services is thus a natural step.

Application

Symbols with easily recognizable semantics can improve the usability of mobile Web applications when used judiciously, for example in the following cases:

  1. Distinguishing similar elements from each other.

    In the mobile Web, a clickable link may serve to navigate to another Web page; to initiate a file download; to establish a telephone call or a video call; to send an SMS, an MMS or an e-mail. A pictogram identifies the type of action corresponding to each URL.

  2. Drawing attention to specific items.

    A pictogram makes elements with important properties stand out:

    • marking items in a list which have been recently modified;
    • tagging those form fields that contain erroneous values;
    • signalling that the activation of a button or a link entails a side-effect.
  3. Summarizing information.

    If a picture is worth a thousand words, a pictogram is possibly worth a short sentence – as demonstrated by entrenched practices and conventions:

    • railway timetables rely upon symbols to condense instructions such as “seat reservation is compulsory”, “runs only on Saturdays”, etc;
    • tourist guides summarize the description of an accommodation with symbols for the hotel category and its amenities;
    • meteorological forecasts provide overviews constructed out of images for each weather condition (e.g. “heavy snow shower during the day”).
  4. Expressing concepts.

    Pictograms act as signifiers so that textual expressions of those concepts are never employed. Well-known instances are emoticons and traffic signs.

examples of pictograms

The preceding picture illustrates various forms of pictograms. From left to right: a WAP XHTML document with symbols identifying link types; a typical i-Mode page generously spiced with emojis; and a Wikipedia article showing support for ISO pictographs on an Android handset.

Just like with many other aspects of the mobile Web, the deployment of this venerable, albeit little-known building block must cater for various generations of competing standards and discrepancies between implementations. In the following, we survey the ways to declare pictograms in mobile Web pages and provide correspondence tables between relevant symbol dictionaries.

OpenWave Icons

The browser developed by the firm Openwave (formerly called Unwired Planet, then phone.com, today Myriad) is the longest serving mobile Web client in existence, and is still deployed on numerous handsets with limited hardware capabilities. It supports a form of pictograms identified by name or by number:

<img localsrc="star2" src="" alt="" />
<img localsrc="69" src="http://www.site.ch/star.gif" alt="*" />

The syntax works in XHTML and WML. Attribute localsrc takes precedence over src and alt, in both cases displaying the pre-defined icon star2. The numbering scheme is recommended. Recognizing an Openwave browser is easy, since its user agent identifier matches the egrep/Perl pattern:

(UP\.Browser\/[0-9\.]+)|([Oo]pen[Ww]ave[\/ ]?[0-9\.]+)

Version Icon range Remarks
≥ 4.1 1 – 175 The browser implements WML
≥ 5.0 1 – 175, 500 – 518 The browser also implements XHTML
≥ 6.1 1 – 175, 500 – 536
≥ 6.2 1 – 175, 500 – 561 The browser supports WAP pictograms

Nowadays, the original Openwave browser documentation can be retrieved only from the Internet archive.

To this day, the Japanese operator KDDI commercializes phones featuring Openwave software which, depending on the device class, incorporates built-in icon sets supplementing the basic dictionary, or retrieves them as external resources.

Version Icon range Remarks
A, B 1 – 175 176 – 330, 500 – 518 as downloadable images; old models
C (1) 1 – 304 305 – 330, 500 – 518 as downloadable images; old models
C (2) 1 – 304, 500 – 518
D (1) 1 – 334 some models with animated icons
D (2) 1 – 518, 700 – 822 some models with animated icons
D (3), F 1 – 518, 700 – 828 some models with animated icons in D; no animations in F

KDDI publishes on its WWW site a correspondence table between handset models and supported icon ranges. Although all pictograms are assigned names, they are usually embedded in Web pages with the Openwave numbering scheme.

Icons in overlapping ranges are compatible across all Openwave devices, but slight variations exist: several arrows pointing straight upwards or downwards (numbered 42, 43, 70, 71) become oblique in later implementations, whereas some simple triangles become doubly tipped ones (7, 8, 34, 35).

WAP Pictograms

The WAP standard from the Open Mobile Alliance comprises a dictionary of 62 core and 205 optional pictograms, markup to declare them, and a fall-back mechanism in case a symbol is not implemented in the handset. In XHTML mobile profile:

<object data="pict:///core/info/new">
    <img src="http://mobile.site.ch/new.png" alt="NEW" />
</object>

The browser outputs the pictogram for new if locally available; otherwise, it downloads the file indicated in the img tag, or displays the string in the alt attribute if the image itself cannot be rendered. Older browsers (such as Motorola MIB) may subject pictograms to the same restrictions as external bitmaps – for instance enforcing a limit on the number of images that can appear on a Web page.

The local presence of specific symbols may vary from a browser version to another; the following compatibility table therefore considers whether the client software recognizes the WAP pictogram syntax and defaults correctly to an external image when appropriate.

Browser Vendor Version Support Remarks
Android Google ≤ 4.1 no displays error placeholder
Bada / Dolfin Samsung ≥ 2.0 partial uses the fall-back
Blackberry RIM ≤ 7.1 partial uses the fall-back
iOS / Safari Apple ≤ 6.0 no error alert, empty placeholder
Meego Nokia ≥ 8.5 partial uses the fall-back
MIB Motorola ≥ 2.2 yes core set; emotion set ≥ 2.2.1
Mobile IE Microsoft ≤ 9.0 partial uses the fall-back
NetFront Access ≥ 3.2 yes implements the core set
Obigo Teleca ≥ Q05A yes implements the core set
Opera Mini Opera ≥ 4.0 partial uses the fall-back
Opera Mobile Opera ≥ 10.0 partial uses the fall-back
S40 Nokia ≤ dp 2.0 no displays error placeholder
SEMC SonyEricsson ≥ 4.0 yes implements the core set
Symbian Nokia < 7.0 partial uses the fall-back
≥ 7.0 no displays empty placeholder
TSS Samsung ≥ 2.5 partial uses the fall-back
UP.Browser Openwave ≥ 6.2 yes implements the core set

It appears that, while most browsers recognize the syntax declaring WAP pictograms, this feature is fully supported only by legacy browsers not based on Webkit and explicitly preferring XHTML mobile profile over HTML and XHTML basic. This presumably excludes the newest generation of the NetFront (NX), Obigo (v. 10) and Myriad (Openwave v. 9) software built upon Webkit, which could not be tested at the time of this writing. One should also keep in mind that interactive mobile Web validators such as mobileOK and mobiReady are geared towards XHTML basic, and hence may erroneously flag WAP pictograms as mobile-unfriendly resources.

The official reference for WAP pictograms is published on the OMA WWW site.

ISO Pictographs

ISO normalized numerous pictograms with UNICODE 6.0, refining proposals originally submitted by Google and Apple to harmonize Japanese emojis. The corresponding code points are reserved in various blocks of the UNICODE space, chiefly “miscellaneous symbols and pictographs”, “emoticons”, and “enclosed alphanumerics supplement”; blocks “transport and maps”, “miscellaneous symbols and arrows”, “miscellaneous symbols”, “dingbats”, “enclosed alphanumerics” also contain useful pictograms.

Web pages access all these symbols via numeric character references:

&#127775; <!-- code point U+1F31F represents a star -->

ISO pictographs are thus dealt with exactly like characters; there is no graceful fall-back if the necessary font is not installed in the terminal – missing glyphs might appear as question marks, black squares, or blank spaces. Absent a Javascript routine to test the existence of specific glyphs on a client, support for ISO pictograms must be determined on the application server via a device description repository.

Since they are resources of the operating system, pictographs are in principle not tied to the browser and are available to other software modules as well. However, because of their intrinsic nature as characters, some caution is required:

In the following, we consider the pictograms listed in tables of sections 7 and 8. IPR symbols refer to signs for “copyright”, “trademark” and “registered trademark”.

OS Version core emotions Remarks
Android ≥ 4.1 partial yes Extensive coverage of the ISO norm, with just a couple of omissions in the core dictionary.
Bada ≥ 2.0 no no Supports circled digits, IPR symbols and a couple of isolated pictographs.
Blackberry ≤ 7.1 no no Implements circled digits one to ten, IPR symbols and the single traditional smiley.
iOS ≥ 6.0 yes yes Exhaustive provision of “emoticons” and “miscellaneous symbols and pictographs”.
Meego ≥ 1.2 no no Circled digits, most arrows, IPR symbols and a handful of other pictographs.
Nokia S40 ≤ dp 2.0 no no Only implements the IPR symbols and the single traditional smiley.
Symbian ≥ Belle no no Implements circled digits one to ten, IPR symbols, the single traditional smiley.
Windows Phone ≥ 7.5 partial yes Good coverage, except for some blocks like “miscellaneous symbols and arrows”.

With Bada, BlackberryOS, Meego, Symbian and WebOS being either wound down, neglected or undergoing an uncertain overhaul, support for ISO pictographs is likely to remain the preserve of Windows Phone, iOS and Android in the foreseeable future. Only Nokia S40 might be in a position to adopt this feature in the short term.

Emojis

Mobile applications developed in the Far East rely extensively on pictograms. The Japanese mobile Web is a world unto itself, and its implementations of pictograms (called emojis) exhibit a number of peculiarities:

This article at technotes.areppim.com clarifies the underlying concepts and the intricacies of character encoding.

Operator Dictionary Emoji Representation of symbol “telephone call”
DoCoMo 2 levels
252 symbols max.
DoCoMo phone call &#63858; (Shift_JIS)
&#xE6CE; (UNICODE)
KDDI 7 levels
647 symbols max.
KDDI phone call &#xF7DF; (Shift_JIS)
&#xEB08; (UNICODE)
Softbank 6 levels
485 symbols max.
Softbank phone call chr(27).'$E$'.chr(15) (PHP string equivalent of Shift_JIS binary code)
&#xE104; (UNICODE)
Willcom 2 sets
163 symbols + 252 i-Mode emojis
Willcom phone call &#xF095; (Shift_JIS, Willcom-specific)
&#63858; (Shift_JIS, i-Mode compatible)

Operators have published (mainly in Japanese) detailed documentation about their versions of emojis; they can be obtained from the WWW sites listed above. Comprehensive correspondence tables describing how to insert emojis into Web pages are presented at trialgoods.com. In 2012, Japanese operators harmonized the design of their pictograms in the style of i-Mode emojis.

Emojis are so popular that Apple was compelled to implement a version derived from the Softbank dictionary upon launching the iPhone in the Japanese market. Version 5.0 of iOS also made these pictograms generally available to non-Japanese iPhone models after a reorganisation to comply with the ISO norm – which implies that pre- and post-iOS 5.0 devices refer to emojis through separate numeric ranges.

iOS version emojis Remarks
≥ 2.2.1 469 pictograms stored in a private code space
e.g. symbol glowing star: &#xE335;
≥ 5.0 468 most pictograms re-mapped to standard UNICODE ranges
e.g. symbol glowing star: &#x1F31F;
≥ 6.0 845

The site iemoji.com lists each iOS emoji with its numeric encodings.

Core Dictionary

While there is ample on-line documentation about finding equivalent symbols in Japanese emoji dictionaries, such information is sorely lacking for the formats used in the rest of the world. We present here a correspondence table between WAP, Openwave, ISO, and iOS pictograms. The entries are organized according to the core WAP dictionary, and therefore deal with a limited subset of the standards under consideration. This is justified on the following grounds:

Hence, these tables should prove especially useful when setting up universally accessible mobile Web sites – despite the fact that several pictograms (especially “beginner”, “clear” and “toll-free”) betray their Japanese origins. Developers exclusively targeting modern smartphones need only refer to the ISO norm when inserting pictograms in their applications.

WAP Openwave ISO WP android iOS
Class – name Nr Name Icon Code 7.5 4.1 ≥ 5.0 < 5.0
core/arrow
up 42 uparrow2 2B06 7no yes yes E232
down 43 downarrow2 down 2B07 7no yes yes E233
right 70 rightarrow2 right 27A1 yes yes yes E234
left 71 leftarrow2 left 2B05 7no yes yes E235
upperRight 537 upperRight upperRight 2B08 7no 2197 2197 E236
upperLeft 538 upperLeft upperLeft 2B09 7no 2196 2196 E237
lowerRight 539 lowerRight lowerRight 2B0A 7no 2198 2198 E238
lowerLeft 540 lowerLeft lowerLeft 2B0B 7no 2199 2199 E239
fingerUp 541 fingerUp fingerUp 1F446 yes yes yes E22E
fingerDown 542 fingerDown fingerDown 1F447 yes yes yes E22F
fingerRight 141 righthand fingerRight 1F449 yes yes yes E231
fingerLeft 140 lefthand fingerLeft 1F448 yes yes yes E230
core/button
1 527 one 1 22460 yes 5yes 0031 20E3 E21C
2 528 two 2 22461 yes 5yes 0032 20E3 E21D
3 529 three 3 22462 yes 5yes 0033 20E3 E21E
4 530 four 4 22463 yes 5yes 0034 20E3 E21F
5 531 five 5 22464 yes 5yes 0035 20E3 E220
6 532 six 6 22465 yes 5yes 0036 20E3 E221
7 533 seven 7 22466 yes 5yes 0037 20E3 E222
8 534 eight 8 22467 yes 5yes 0038 20E3 E223
9 535 nine 9 22468 yes 5yes 0039 20E3 E224
0 536 zero 0 224EA yes no 0030 20E3 E225
core/action
makePhoneCall 155 phone2 makePhoneCall 1F4F2 yes yes yes E104
find 119 magnifyglass find 1F50D yes yes yes E114
userAuthentication 517 personal userAuthentication 1F194 yes yes yes E229
password 543 password password 1F511 yes yes yes E03F
nextItem 544 nextItem nextItem 1F517 yes yes 6yes no
clear 545 clear clear 1F191 yes yes 6yes no
stop 98 stopsign stop 26D4 yes yes 6yes 1E337
top 35 uptri2 top 325B2 yes yes 1F53C E24C
next 8 righttri2 next 325C0 yes yes yes E23A
back 511 back back 325B6 yes yes yes E23B
no 34 downtri2 down 25BC yes yes 1F53D no
core/message
receive 546 receive receive 1F4E8 yes yes 6yes no
send 547 send send 1F4E9 yes yes yes E103
message 108 envelope1 message 1F4E7 yes yes 6yes no
document 56 document1 document 1F4C4 yes yes 6yes no
attachment 143 paperclip attachment 1F4CE yes yes 6yes no
folder 79 folder1 folder 1F4C1 yes yes 6yes no
inbox 154 inbox inbox 1F4E5 yes yes 6yes 1E101
outbox 153 outbox outbox 1F4E4 yes yes 6yes 1E102
core/state
secure 138 lockkey secure 1F512 yes yes yes E144
insecure 548 insecure insecure 1F513 yes yes yes E145
copyright 81 copyright copyright 00A9 yes 5yes yes E24E
trademark 54 trademark trademark 2122 yes 5yes yes E537
underConstruction 549 underConstruction underConstruction 1F6A7 yes yes yes E137
beginner 550 beginner beginner 1F530 yes yes yes E209
no 82 registered registered 00AE yes 5yes yes E24F
core/media
book 101 book3 book 1F4D6 yes yes yes E148
video 115 vidtape video 1F4FC yes yes yes E129
cd 551 cd cd 1F4BF yes yes yes E126
dvd 552 dvd dvd 1F4C0 yes yes yes E127
game 45 baseball game 1F3AE yes yes 6yes no
radio 553 radio radio 1F4FB yes yes yes E128
tv 554 tv tv 1F4FA yes yes yes E12A
no 171 newspaper newspaper 1F4F0 yes yes 6yes no
core/info
notice 555 notice notice 26A0 yes yes yes E252
charged 14 dollarsign charged 1F4B2 yes yes 6yes no
freeofcharge 557 freeofcharge freeofcharge 1F193 yes yes 6yes no
new 72 gem new 1F195 yes yes yes E212
position 556 position position 1F6A9 yes yes yes no
tollfree 558 tollfree tollfree 27BF 7no yes yes E211
sharpdial 559 sharpdial sharpdial 0023 20E3 7no no yes E210
reserved 560 reserved reserved 41F4BA yes yes yes E11F
speechinfo 561 speechinfo speechinfo 1F50A yes yes yes E141
no 87 creditcard creditcard 1F4B3 yes yes yes no

Values are hexadecimal references to code points in the UNICODE space, and images exemplary depictions of the associated symbols. Sometimes, an operating system provisions the pictogram via a different UNICODE character, whose code point is then mentioned explicitly. We suggest approximate substitutes whenever a straightforward translation from one dictionary to another is infeasible:

  1. No direct match; entry is a proposed surrogate.
  2. iOS implements these pictograms through UNICODE combining character sequences (numeral followed by an enclosing keycap) – a feature rarely present elsewhere. Relying upon “circled digits” instead is more portable.
  3. These symbols are more generic than ISO labelled arrows at code points U+1F51D (“top”), U+1F51C (“soon”), U+1F519 (“back”).
  4. ISO character U+1F22F embodies exactly the meaning of “reserved” (e.g. seat reservation), but is a Japanese ideogram. The proposed replacement is more suitable for other countries.
  5. Already available in Android version 1.6.
  6. Only available in iOS since version 6.0.
  7. Consistent implementation only in Windows Phone 8.0.

Emoticon Dictionary

Class “emotions” is the sole subset of the optional WAP dictionary that has enjoyed some (modest) level of support in mobile phones. It comprises a number of smileys for which we propose equivalent iOS, ISO and Openwave representations. This table also applies the tweaks and descriptive conventions used for the core dictionary.

WAP Openwave ISO WP android iOS
Class – name Nr Name Icon Code 7.5 4.1 ≥ 5.0 < 5.0
emotions
smile 520 :) smile 1F603 yes yes yes E057
cry no cry 1F622 yes yes yes E413
sad 521 :( sad 1F614 yes yes yes E403
angry no angry 1F620 yes yes yes E059
pullFace 525 :P pullFace 1F61C yes yes yes E105
inLove 51 heart inLove 1F60D yes yes yes E106
shock no shock 1F631 yes yes yes E107
coldSweat no coldSweat 1F613 yes yes yes E108
shakenHeart no shakenHeart 1F493 yes yes yes E327
brokenHeart no brokenHeart 1F494 yes yes yes E023
discourage 524 :| discourage 1F61E yes yes yes E058
flash 77 lightbulb flash 1F4A1 yes yes yes E10F
sleepy no sleepy 1F62A yes yes yes E408
anxious no anxious 1F628 yes yes yes E40B
surprised 526 :o surprised 1F632 yes yes yes E410
tutting no tutting 1F612 yes yes yes E40E
happy 523 :D happy 1F604 yes yes yes E415
punch no punch 1F44A yes yes yes E00D
wink 522 ;) wink 1F609 yes yes yes E405
thumbsUp 26 1plus thumbsUp 1F44D yes yes yes E00E
thumbsDown 27 1minus thumbsDown 1F44E yes yes yes E421
kiss no kiss 1F618 yes yes yes E418
smell no smell 1F60F yes yes yes E402
cool no cool 1F60E yes yes yes no
hug no hug 1F61A yes yes yes E417
trapped no trapped 1F633 yes yes yes E40D
shine no shine 1F60A yes yes yes E056
no 68 smileyface smiley 263A yes yes yes E414

Smileys have long been extremely popular in messaging applications and Internet discussion forums. Every major platform (Yahoo! Messenger, Microsoft Messenger, America Online, among others) offers a rich set of icons to let users liven up the texts they send to each other. Emoticons are entered as pre-defined identifiers or character sequences (for instance :-) or 8-|). The messaging clients of some mobile operating systems (notably Windows Phone) follow a similar approach.

Service Platforms

Unfortunately, major device description repositories provide very few data describing pictographic terminal capabilities. Developers may resort to attributes such as the type of browser or the version of the operating system run by the handset in order to fine-tune the representation of mobile pages.

DDR Attribute Values Description
51 degrees no specific attributes available
Detect Right supportedpictogramset array of literals List of WAP pictogram classes implemented (from UAProf).
Device Atlas no specific attributes available
Handset Detection no specific attributes available
WURFL emoji true / false Indicates support for i-Mode emojis.
opwv_xhtml_extensions_support true / false Indicate support for Openwave icons and other proprietary extensions.
opwv_wml_extensions_support true / false

Programs that map pictogram dictionaries and encodings to each other are necessary when generating content for terminals implementing different pictographic formats, or when exchanging messages amongst them. Here is a sample of public-domain tools that translate between popular Japanese conventions.

Language DoCoMo KDDI Softbank Willcom iOS < 5.0 ISO
RUBY partial yes yes no yes no
Only UNICODE encoding. DoCoMo codes erroneously assumed identical to those of KDDI.
PHP yes yes yes no partial yes
Only UNICODE encoding. Although not explicitly supported, iOS pre-5.0 uses Softbank codes.
PERL yes yes yes no partial no
Shift_JIS and UTF-8 encodings. Although not explicitly supported, iOS pre-5.0 uses Softbank codes.

We are not aware of any similar gateway utilities for ISO, Openwave and WAP.

Concluding Remarks

The interest in pictograms was rekindled when Apple released an iPhone model with an abundant collection of colourful icons embeddable in applications and Web pages. The revision of UNICODE published in October 2010 increases the relevance of pictograms for smartphones, but feature phones and legacy handsets have long been endowed with a comparable capability – albeit via different mechanisms. The information presented in this article should enable developers to decide how to integrate pictograms in their Web sites – taking into account requirements about application look-and-feel, the range of targeted devices, and the facilities to configure their Web service platform with pictogram generators.

We recommend a utilization of pictograms more parsimonious than what one can often observe in Asian mobile Web sites. Hence, the core dictionary should suffice for the first couple of – very common – scenarios listed in section 2.

Beyond this basic set, ISO specifies a profusion of idiosyncratic signs for the Chinese horoscope, Japanese places and holidays, Nippon cuisine, service ideograms, manga characters, as well as more universally interesting pictographs related to office supplies, commercial and professional activities, sports, games, vehicles, plants, animals, the weather, geometric shapes and additional emoticons. WAP defines many optional items that map easily to those ISO code points, but lacking support in WAP handsets makes this compatibility immaterial in practice. On the other hand, about 160 actual Openwave icons correspond to symbols scattered throughout UNICODE and may prove occasionally useful when catering for low-end devices. Developers can peruse the Openwave documentation to ascertain the equivalence of individual pictograms on a case-by-case basis. Sites such as shapecatcher.com and fileformat.info have query tools that facilitate the exploration of the UNICODE character space.

Of course, the situation may arise where the symbol of interest is completely unsupported by a handset or a standard. The manipulation of custom icons (such as those used in the present article, extracted from the fatcow collection of free icons) is an issue to be addressed in another installment.

Reference

A version of this paper has been published at mobiforge.com.

It is PDFdownloadable as a PDF document.

First published: 2012-10-20.