Content generation in CSS and UNICODE

unicode and content generation in CSS

Inspecting the character palette of MAC-OS today, brought me to the Idea to take a closer look at the CSS properties that make it possible to do fancy things for your layout.I was first inspired by an article that I found last year at DaveSheas Blog.

Most of this is allready pretty well documented there,and it seems that with the apparent transition over to a real UTF world, that these things tend to be much more reliable.The goal is to replace some of your CSS background URL icons with symbols that are available mainly on the Basic Multilingual Plane.

As allready mentioned there,and if you are on MAC OS, you’d use your character pallette to make a collection of symbols and characters that could be used as Icons.One easy method to get at these is by selecting all characters from the view dropdown list and then by selecting “by category” below.Now you can filter the charcters by the categories that are displayed in the left pane.

Most usefull:Braille, Letterlike Symbols and Arrows.I’m wondering why there isn’t an Apple logo symbol available, but you can grab a rotated capital letter “℺” instead.
There is actually, but since I’m using Apple computers for only a couple of month’s that should be forgiven.
And those three apples are for my Apple ignorance:.

My own collection looks something like this:

Thai character KO KA Glyph in Character paletter as UNI-Code and UTF-8 value

Note, that the shape of the glyph could vary significantly depending on the specific font used that renders on a browser/platform.There is furthermore no garantee, that the glyph might be available in all cases on a Users platform or the Browser might be able to handle the specific code-point value.
I’ve allso found usefull a small app, called Unicodechecker (works on Tiger) Unicodechecker basic multilingual plane It lets you convert to HTML entities both in DEC and HEX values among a few other things, like IDN conversion.

Other Tools are available on windows as well.One that I found particularly good, is SC Unipad .(Unfortunatelly the licenced version is a little pricy)

Now, back to business.If you want to escape your Glyph for CSS2.1, select a new Utilities Window (Shortcut:⌘2 or ⌘N, for additional Utility windows) and from your collection in your Character pallette (Or alternatively from the App), drag those symbols one by one in the input field of the Utilities window, click the escape icon and select escape from the dropdown menu.

In the next menu that shows select CSS.2.1 from the dropdown menu, you can allready see the difference, instead of the xc HEX notification \00c is prepended to the HEX value.You should see something like this:

CSS Level 2.1 escaped entity value of Glyph

If you intend to use the pseudo-selectors :bofore and :after, your rule block could look like this.

body#article #maincontent .mainbox h3:before
 { content:'\002656 '  !important;padding-right:10px;color: #444;font-size:larger;}

You can allso use pseudo class rules like hover for example.
Here is one, that I use on the promotional frontpage blocks:

body#default #maincontent p.more  a::before
 {content:'\0027ac ';padding-right:10px;color:#C9F;}
 body#default #maincontent p.more a:hover::before
  {content:'\0027ab ';padding-right:10px;color:#C9F;}

(Those are actually Zapf Dingbats)
The advantage is, that you don’t have a response delay, when a User first hovers over an anchor element.
Previously you would have had to use Doug Bowmann’s trick to use one Image for both instances and change the background-position property.

In Safari version 2 any symbols that I choose, worked,in FF 1.5(Darwin), and Opera v8 some yes, some of them not.

What is good to do maybe, is to setup a testpage with all the symbols you try to use, or find testpages on the web.Here is two of them.

More insight about what works, (on MAC OS) at least, and what not can be gained from Allan Woods resources page.Whatever is not possible on your platform is replaced with a square symbol.

A little padding helps to keep the symbol apart, color to your likings.

You can see the result allso on this blog, take a look to the sidebar for example, at the content gennerated Header icons.

Another option , or to overcome those display Issues might be to Use a Flash based method or SIFr and load Unicode capabable fonts like Gentium for your Glyph Icons.

Could you imagine, what would be possible, if a whole plane of a UNI-code specification would be available explicitly for Icons and Navigation Symbols suited for Designers ?

Would be great, IMHO to see these things in the future.

Leonardo da Vinci probably would have designed a whole UNI-code Icon Set, especially suited for the web, if he lived in our century.

Posted ·2006-04-18 · by · marios ·

© 2006-2008 marios buttner

send this article to a friend

send article

Commenting is closed for this article.