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 :)

Tagged: ,

§ 22 Responses to The power of unicode art

  • Caspy7 says:

    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.

    • msujaws says:

      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.

    • Caspy7 says:

      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?)?

    • msujaws says:

      I believe the issue is the latter one.

    • Caspy7 says:

      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).

    • msujaws says:

      Yeah, it is a very valid concern. Maybe Bugzilla could use @font-face to include a font like Symbola?

    • msujaws says:

      Cool! Thanks for the link, I didn’t know about Symbola before.

  • Tomer Cohen says:

    Caspy7 :
    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).

    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

  • David says:

    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?

    • Tomer Cohen says:

      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.

    • msujaws says:

      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.

  • Tomer Cohen says:

    msujaws :
    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. 😞

    • msujaws says:

      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.

  • Tomer says:

    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.

  • David says:

    Tomer Cohen :
    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.

    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.

  • Simon says:

    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. ☺

    • msujaws says:

      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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading The power of unicode art at JAWS.

meta

Follow

Get every new post delivered to your Inbox.

Join 1,015 other followers