Grow your CSS skills. Land your dream job.

Unicode Characters for Class Names

Published by Chris Coyier

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don't think I had seen it before and it's a bonafide "CSS Trick" so I thought I would share.

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>
.♫ { 
   display: block;
   background: #eee;
   padding: 5px;
 }

Pretty cool eh? I'd call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But...

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn't run it just sits there as text.


That ain't right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like "container" or "box" style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don't have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'

Comments

  1. This is funny!

  2. Very interesting and a quite semantic-way for using Class-names.

  3. David Jones
    Permalink to comment#

    Chris, this is a real neat trick. Though every programming bone in my body is screaming “don’t use this in production” hehe.

    One thing about the php, I don’t see any tags in the source of the demo page – http://pastebin.com/1hG0Xdzu

  4. iostream
    Permalink to comment#

    Cool idea! I don’t see any problem with PHP tags though, and I’m always using UTF-8.

    For example:

    http://hatboats.se/unicode/

    http://hatboats.se/unicode/index.phps

  5. Permalink to comment#

    haha awesome! I might try it and use a heart for my link love section on my blog lol

  6. That is very cool, I like the corner of the box approach. Wonder if the likes of Tim Berners-Lee had that in mind when he was talking about the semantic web – musical notes for DRM encrypted files.

    • As a programmer involved in the Semantic Web for some time, I can fairly confidently say that UTF-8 class names – though cool – aren’t exactly what timbl means by the Semantic Web.

  7. Would be cool to use ♠ ♣ ♥ ♦ on a casino/online betting site. Just gotta find someone who wants one!

  8. Permalink to comment#

    though probably something that i would not use everyday this just made my day. too funny, i really would never have even thought to consider using any of those characters.

  9. Permalink to comment#

    some things are down right sad, and others just across the line are down right cool!

    not sure where this lies yet lol

  10. Hitesh Chavda
    Permalink to comment#

    Chris,
    So, you should use for your main class.

    Like it.

  11. Ronny
    Permalink to comment#

    I think everyone should always use UTF-8. There are much more advantages to it, than using for example ISO-8859-1.

  12. Bettie
    Permalink to comment#

    I ♥ it. It’s exciting how all comms r now getting more symbolic than alphabetic.

  13. Anthony
    Permalink to comment#

    haha…this IS funny…and pretty cool

    Thanks Chris, for a fun article to distract me from the brain dissolving code I’ve been staring at for the past 6 hours! ; )

  14. This is really cool. Never even crossed my mind that you could do something like this? Are there any issues at all apart from the warning?

    The box idea is really interesting and could be highly useful, I get fed up of forgetting what I have named certain classes etc and relating it too a symbol would be much easier to remember.

    Plus the fact that it will make your stylesheet look pretty funky!

    Might start giving it a go see what the reactions are too it!

  15. Permalink to comment#

    This is such a neat trick! And strangely enough, I completely agree on the semantic nature of the note symbol in place of “music”. I’d love to see someone sneak that into their markup.

    Also, here’s a Forrst invite code good for 25 signups, just for you guys: tricky (use it at forrst.com/signup)

  16. This could sure be a lot of fun to use. Thanks for the tip and also, thanks @Kyle for the Forrst invite code!!

  17. Eliazer
    Permalink to comment#

    This is cute!

    here you have a Unicode map

    http://www.atm.ox.ac.uk/user/iwi/charmap.html

  18. Roger
    Permalink to comment#

    Please don’t ever do this, everyone. Please.

  19. Roger, you’re right. It isn’t really practical or semantic, just kinda fun. I don’t agree that the ♫ is a more semantic way to mark up artists and song titles. If you were actually marking up a musical score maybe (somehow?), but not the labels used to identify musical pieces.

    What about the section symbol § though? Would that be an appropriate alternative to the word section?

  20. Excellent post Chris. I like using the □ idea, and will probably start doing it for clears.

  21. Johno
    Permalink to comment#

    But isn’t this akin to including presentational class names? Doesn’t seem very semantic…

    • The traditional argument is that a class name like “left” is non-semantic because it’s presentational. That thing that it wraps may not always be on the “left” side. A better name would be “sidebar”, because that may better describe the content inside it.

      A music note as a class name for a div wrapping information about music seems awesomely semantic to me. What is “presentational” about that?

    • Johno
      Permalink to comment#

      Hm, I guess I was thinking that the music note is more of a visual symbol than an actual description.

      (I actually love this idea, I just feel there’s something a little off about it.)

    • “sidebar” is only marginally more semantic than “left”. Sidebar still implies position and visual interpretation of content, rather than actual content. “sidebar” tells me nothing about what is IN that element, it tells me what it should be.

      A music note as a class name for a div wrapping information about music is certainly semantic in spirit, however to a code editor it is entirely inaccessible. It relies on interpretation of the symbol, intellectually and potentially audibly if someone has sight problems.

      You’re developing sites semantically for accessibility, and then make the delicious irony that the editing and reading of your code itself isn’t accessible to all? It’s creative but practically just seems ridiculous, even on the base level of how the hell someone finds that character on their keyboard without using copy and paste.

  22. pretty neat… but that php bug can cause some serious security issues don’t you think?

  23. David Hucklesby
    Permalink to comment#

    Chris – I just tried entering that symbol into Coda and had no problem at all. I used the Edit > Special Characters menu item to insert it– but I do have Coda set to use UTF-8 encoding….

  24. How is this a trick? We europeans have been using UTF-8 strings for years. Symbols are original, but UTF-8 strings such as “class=’entête’” are pretty common.

  25. joolss
    Permalink to comment#

    Cool trick. I use symbols like !?+~ for short, special classnames, like the pipe character (“|”) for vertical dividers. Then I escape the character in CSS (“.\|”). Works fine in Javascript too, and in jQuery (but not Dojo unfortunately).

  26. lol, what the hack class=”⧻ഞﶈ”

  27. Mark
    Permalink to comment#

    Does anyone know if this can be used for id’s as well as class names?

  28. blake
    Permalink to comment#

    Chris – can’t wait until you come back and have to modify some code you’ve written using this “trick” six months from now… you’re going to hate yourself when you try and remember the keystrokes for ♫ as opposed to ♣.

    That being said, the PHP executables don’t support UTF-16. Save your source document as UTF-8 and you should be fine. If you examine the source for your demo, although you’ve set the meta header to UTF-8, the document itself is still actually in UTF-16.

  29. I’m with Blake. Part of the engineering tradeoff in writing code is maintainability. Non-textual names are cute and novel, but it’s not clear to me they are better.

    One of my software engineering teachers claimed that source code (and this would apply to CSS also) is a medium for the original developer to communicate with all the future maintainers of the code, and that the behaviour of the computer on executing the code was a side effect.

  30. Using FF3.6 and view source shows the php calls, rather than running them, like you said.

    Nice find by the way. A fun way to spice up your classnames :B

  31. funny, cool, awkward.. all at the same time.. and we’re talking css. we must be nerds ;)

  32. Petter
    Permalink to comment#

    I’m sorry, but I don’t think this is semantic at all. I would actually say that it’s less semantic than words in this case.

    The note symbol could for some people represent actual notes (this is what I myself couple with a note symbol), music in general or simply sound.

    I don’t think semantics and abstract is such a good combination. This is for example why I guess you’ve written “Articles” next to you news paper icon in the menu.

  33. Hey Chris thanks for mentioning me in the article.

    For valid XHTML character entity reference I would recommend everyone this site: http://www.digitalmediaminute.com/reference/entity/

  34. Really interesting thing; I’ve seen all over the net some subdomains named with a character also =)

  35. Leave it to you, Chris, to think outside the box like this. Nice.

  36. I don’t see it as semantical at all. A pair of eighth notes can represent so many things. An artist name? A song? An artist name and a song? An album? A rhythm? If you have to look at the context it is being used in to find its meaning, it isn’t semantic.

    If the □ can mean a box, container, or a clear fix, then it isn’t semantic.

    The problem with using pictures for semantics is they can be interpreted differently by other people. Seeing a □ isn’t going to provide anyone, but the page creator, any information. They have to look at the elements around it to get an idea of what that class is supposed to do. Contrast that with a class name of clearfix – you know without a shadow of a doubt that that class is a clearfix.

    Cool? Yes. Semantic? No.

    • I disagree again here. I think “clearfix” is incredibly non-semantic. How does that help describe the content it contains? It absolutely doesn’t, it’s purely a presentational fix. Describing without specifying is what I think semantics is all about.

    • But you haven’t described anything. You’ve used a picture that means something to you and you alone. How is that semantic?

    • Because a music note is a symbolic representation of music and symbolic representation = semantics. I am not the only person on Earth that knows that, so it’s not “me and me alone”. If I had two pocket folders on my desk, one of them had a cross on it and the other one had a music note on it, which one do think I’d keep my sheet music in?

    • You’re making the assumption that I know you keep sheet music in a folder labeled with a pair of eighth notes.

      I know nothing about you. If I were to look at your desk and see two folders, one labeled with a cross and one labeled with a pair of eighth notes, I would start making assumptions about your faith and your musical background. The folder with a cross could contain scripture, sermon transcripts, pictures of fellow church-goers, church bulletins from the year 2000. I can look around your office/room, and try to discern exactly what the folder contains, but I know nothing of that folder until I look inside it and see what exactly you keep in a folder labeled with a cross. It’s clear to you because you know exactly what is in the folder. To me it’s a folder with a picture on it, and I have to look at contextual clues or look in the folder to find out exactly what the folder contains.

      I agree that musical notation is a universal representation of music, but a pair of eighth notes tells me nothing of what you keep in the folder labeled with the notes. It could be sheet music, it could be papers that you have to grade from a theory class, it could be lyrics to songs you like, or it could contain a detailed list of the CDs, cassettes, and MP3s you own. I don’t know what it contains until I look inside it. Generically, yes, I know it pertains something to music, but that’s all I know from looking at the picture. If the picture was semantical, I would have no trouble discerning the exact contents of the folder.

      You make the assumption that someone knows what a picture means to you. In doing so, you make the reader/maintainer have to assume the contents by looking at contextual clues or by looking at the contents of the container.

    • Lil
      Permalink to comment#

      I think Jeremy has a really good point here -about the symbols anyway- but I feel like most of you guys are completely missing the point of unicode class names.

      The unicode character set doesn’t just contain cool symbols; unicode is multilingual. <div class="コンテナ"> might be easier to read for a Japanese designer/developer in terms of semantics.

      Also, what oakleafs said :p

      oakleafs says:
      03/05/2010 at 2:00 pm

      How is this a trick? We europeans have been using UTF-8 strings for years. Symbols are original, but UTF-8 strings such as “class=’entête’” are pretty common.

  37. lorth
    Permalink to comment#

    sounds like fun.

    …how did you do the upside-down-writing? :-)
    i know a website where you can enter a text and get it back flipped, but how to do it yourself?

  38. Actually, the corners idea is pretty clever! I believe we are going to use that from now one!

    I love the corners idea, just emailed the link to six people! hahaha I can’t believe how cool it will look ;)

    Thanks for that one, can’t stop giggling about how great the trick is!

    Cheers!
    Mr.Crazy Chimp

  39. Ronald H.
    Permalink to comment#

    This is coool! I love this idea. Does it work for all browsers?

  40. It’s nice, but i was confused to find these characters more…

  41. This is quite cool. But as @Ronald has also said, does it support all the major browsers?

  42. so awesome

  43. This is fun and unusual, but I think it is useless.

  44. This is funny, but IMHO an “icon” is not really semantyc.

  45. chris
    Permalink to comment#

    well yes, a note symbol is more semantic, if you’ve completely insane. actually (seriously) a note symbol is loosely associated with anything related to music. thus song-lyrics or song-title are much better class names than a utf symbol for a note. maybe using a note symbol was a horrible example of a generally good idea. but maybe it’s akin to a html/css editor that uses syntax coloring as well as coloring all the hex color codes. a bit over the top for me.
    btw the horrid box css should hopefully disappear one day, to be replaced by something that does more presentatonal things like svg. sorry chris–i’m not insane and talking to myself–the box/note should be replaced by utf for a great white elephant. good to stimulate such discussion though.

  46. I had no idea this was possible! Thanks Chris.

    While we’re on the subject of semantic class names, isn’t it funny that there is a head, body and footer of a document and yet we don’t call a sidebar a “right-arm” or “left-arm”?

    We’re leaving out a whole bunch of body parts as a matter of fact. ha!

  47. seems we’re back to kindergarden!
    don’t get me wrong, I like the idea. also a great way to make your sitebuild frustrating to the coder, and vice verse, not to mention the multis employing a broad range of nationalities, the different natural write symbols can get frustrating as well =]
    so, it would be funny to use chinese names and symbols…
    c’mon, get serious!

  48. I can see using this for compressing extremely large style sheets where multiple class names are used per element.

    You could go all semantic in dev and then run your code through a minimizing script to just replace class names before pushing it live.

  49. Permalink to comment#

    Well, where would the internet be without unicode selectors.

  50. When this looks interesting, I wouldn’t recommend/use it. Class names as well as ID’s play a role in SEO, so better pick them wisely.

  51. Permalink to comment#

    What a fun idea. If you want a snazzy javascript app for browsing Unicode characters, try the Unicode Character Finder

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".