The power of unicode art
3 September, 2011 § 22 Comments
Recently I’ve been working on a bug to make Firefox’s location bar easier to read for users with right-to-left (RTL) languages. As part of the bug comments, I reused some Unicode artwork that I found in Tomer Cohen’s post to bug 610682.
LTR: ⬅ ➡ ⌂ [☕ http://bugzilla.mozilla.org/ ★ ∇ ⟳]
RTL: [☕ http://bugzilla.mozilla.org/ ★ ∇ ⟳] ⌂ ⬅ ➡| Character | Browser-equivalent |
|---|---|
| ☕ | Favicon (hot beverage) |
| ⬅ | Back arrow |
| ➡ | Forward arrow |
| ⌂ | Home button |
| ★ | Bookmark star |
| ∇ | Drop down list expander |
| ⟳ | Reload button |
At first glance, it may seem funny to be using Unicode symbols to recreate the toolbar layout of a browser. Images or text-based descriptions could also work fine for this conversation, but neither of those offer the power that the Unicode recreation provides. Images are hard to update and the same sentence in English can be interpreted in different ways.
Describing the layout of items with Unicode symbols is the digital equivalent to paper-prototyping. Quick ideas can be discussed, and users keep the discussion focused on the order of the items instead of one-off pixel adjustments.
The next time you need to describe a complex layout, consider using some Unicode symbols. It saves lots of typing and looks cool at the same time 🙂
JAWS 
Odd. For the back and forward arrows I’m getting placemarker squares (with numbers and letters in them).
This the most recent beta 7 on XP.
Yeah, and that is the drawback to using Unicode symbols 🙂
The symbols will be squares if the font being used doesn’t have those symbols defined.
So is the issue then the font being specified by the author (i.e. a different font on my computer might do it) or the characters being specified aren’t supported in anything other than the right font(s?)?
I believe the issue is the latter one.
You should install the symbola font, http://users.teilar.gr/~g1951d/
My concern is less that it doesn’t work properly for me, but that there are probably many others for whom it doesn’t look right (and we can’t expect they will know how to, or want to install a particular font just to view it).
Yeah, it is a very valid concern. Maybe Bugzilla could use @font-face to include a font like Symbola?
Cool! Thanks for the link, I didn’t know about Symbola before.
These characters are all part of the Unicode standard. If you can’t see them well, you should make sure you have good fonts installed on your system. As for the me, I am fonts which supports Unicode 6.0 which adds a lot of important glyphs such as a wider range of emotions. ☺
As for typing these characters, if you are using a good operating system you might be able to configure ComposeKey for those characters.
For some reason you have U+2615 in the table for favicon (hot beverage), but in the example use U+26FF before http://bugzi… which I seem to not have in my font support.
Its a flag http://www.fileformat.info/info/unicode/char/26ff/white_flag_with_horizontal_middle_black_stripe.png
er, I mean U+26FE* which is a cup…
I just switched the example in the blog post to use the ☕ (hot beverage) instead of the ⛾ (cup on black square) symbol since it seems most people don’t have that symbol.
I’m not sure if you did it on purpose, but Tomer’s mockup uses ‘⛾’ (cup on black square) for the favicon, while your table uses ‘☕’ (hot beverage) instead. Oddly, the former doesn’t display for me, even though I have Symbola installed (in my personal profile), which includes that character. This is on Ubuntu 11.04. Anyone have any idea why this is, and how it may be fixed? Is this a bug?
I use an nightly snapshot of Dejau (which I haven’t updated recently) in ~/.fonts and it has most of Unicode 6.0 glyphs if not all of them. I don’t find Symbola font useful for my needs.
It was on purpose, but wasn’t explained well 😦
‘⛾’ (cup on black square) doesn’t display well on my machine, so I found a similar symbol to place in the table and forgot to update the example. However, with that mistake it has brought about a great discussion about the support and availability of Unicode symbols 🙂
It would be interesting to do some kind of crowd-sourced study to see what Unicode characters people can display on their computers.
First you’d need to make sure that WordPress is capable of displaying all of them. For example I’ve found that my WordPress installation is unable to store some characters to the database. 😞
Yeah, WordPress wouldn’t be the best place for that. Would a simple survey suffice, or would doing some automated testing be better?
I think the survey would be easier to implement, but the automated testing way would be more complete in its results.
First I wish to create full browser-based Character Map tool, because the desktop-based application suffer from lack of updates. We are almost a year since Unicode 6.0 released, and I am not sure what percent of the desktop users actually have up-to-date fonts.
I just did that, with the latest DejaVu snapshot, rebooted, and ‘cup on black square’ still doesn’t display anywhere (Firefox, Chrome, Nautilus, gedit…). Checking Character Map shows that the DejaVu fonts don’t contain that glyph. It’s still odd that my system doesn’t find the one font that does include the character use that to display it.
Oddly, all of them appear for me, except the back button 0x2b05. Not sure what font I’m running, but this is an old CentOS desktop… could be an old version of DejaVu?
…It saves lots of typing…
…if you have a Unicode keyboard, or at least a virtual keyboard. If what you type Unicode with is an Input Method (Windows Global IME or any of several XIM widgets under X11) it may actually increase the number of keystrokes. But it’s fun. ☺
It is fun ☺
When Unicode works and displays correctly, it can save keystrokes. After the first user enters the characters, other users can just cut+paste them around to discuss their opinions.