Unicode for CSS Class Names

In doing some research, I discovered that you could use Unicode for CSS class names. Okay, nothing earth shattering by any means. But think of the ideograms that exist within and how applicable they might actually be.

Take for example a common rounded corner HTML setup:

<div class="container">
<div class="left-top">
<div class="right-top">
<div class="left-bottom">
<div class="right-bottom">
content
</div>
</div>
</div>
</div>

Now let's try using some fancy Unicode characters to give the same meaning:

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

I've used a number of the box drawing entities, namely U+250C, U+2510, U+2514, U+2518 and the square is U+25A1.

Then, to mark up our styles:

.□ { /* container styles */ }
.┌ { /* top-left styles */ }
.┐ { /* top-right styles */ }
.└ { /* bottom-left styles */ }
.┘ { /* bottom-right styles */ }

In any case, I'm just having fun with the idea. You're probably better off to stick to those standard letters and numbers for your class names.

Published June 12, 2007
Categorized as HTML and CSS
Short URL: http://snook.ca/s/818

Conversation

44 Comments · RSS feed
Montoya said on June 12, 2007

That's definitely cool, but not a good idea from an HTML perspective. Classes should be semantic and are sometimes used in that way (especially with microformats), so it's important to keep them as plain text. Nice find though.

Olav said on June 12, 2007

Wow, that's really useful. ;) No seriously, nice find..

Lucas Murray said on June 12, 2007

That is a very interesting technique however I do agree with Montoya that it may not actually be a good idea to use. Although you can shorten class names it only makes them harder to write and follow.

Arjan Eising said on June 12, 2007

First, I don't see the needs of so many divs. Second, both examples are semantically rubbish. A class or id name should always say something about the contents, not about how it will be displayed using CSS.
Nonetheless, this can only be useful, like sending special characters like <samp>é</samp> or <samp>ü</samp> within the (semantic) class or id name.

jm@goemaere.com said on June 13, 2007

"A class or id name should always say something about the contents, not about how it will be displayed using CSS."

Dont you think it is the developer to decide that ?

Harmen Janssen said on June 13, 2007

Ha! I like it :)
Nice find. As said above; they're not easy to type and therefore not very easy to maintain, but it provides an option for throwing in some geeky humor every now and then.

Jens Meiert said on June 13, 2007

Interesting approach, but the loss of semantics and the problem that at least the example is presentational anyway don't make it very commendable, I fear. There probably are just a few characters that provide some "semantics", and combined with probably desired ID/class name consistency, this may result in a real obstacle to make it "good practice" at all.

Jonathan Snook said on June 13, 2007

@arjan: it's a common approach to rounded corners. And what I should have added was that because the example is presentational, using special characters could help to highlight that very fact.

@Jens: there's no loss of semantics since it's a presentational example to begin with. "I'm just having fun with the idea" should've made that clear that I'm not trying to make this a de facto standard.

Rian Orie said on June 13, 2007

I think it's funny and a nice find! My main question is whether or not all the browsers can work with it.. Either way, keep it up, these are interesting things to find. We all talk about semantics this and that, but if we don't explore the non-semantic ways as well as the semantic ones we wont ever find anything new outside of the box!
</end rant>

Michael Thompson said on June 13, 2007

Oh yeah?


<div class="Δ">
  <div class="/">
    <div class="\">
      <div class="_">
      &lt/div>
    &lt/div>
  &lt/div>
&lt/div>

And to all you standardistas: that's going to be the new microformat for marking-up top-level navigation for blind users — expect the draft published by tomorrow.

Anton Andreasson said on June 13, 2007

LOL, very nice observation! :) Regarding semantics: Adding the divs to the DOM using javascript could still be an option no matter the class names. Even if it's just for playing with, I think it solves bothe the problem of left-top vs top-left and possible translations of them in foreign languages.

Tim said on June 13, 2007

I haven't tried it yet, but doesn't this mean you can use international character sets as CSS id/class names? If so, I would've thought this is very useful!

Teevio said on June 13, 2007

clever! I love seeing people think outside the (unicode)box.

Bramus! said on June 13, 2007

Muha, neat!

Tim McCormack said on June 13, 2007

Those are *square*-corners you're using for *rounded*-corner classes -- hardly very semantic! Shame on you. /sarcasm

Jonathan Snook said on June 13, 2007

@Michael Thompson: Good work on the triangle! ;)

@Tim: IDs can't use Unicode. Only class names.

@Tim McCormack: Ack! You've got me! ;)

Kilian Valkhof said on June 13, 2007

It seems only logical that you could use unicode characters. though, it wouldn't surprise me if it wasn't supported, what surprised me is that it doesn't work for ID's, what's up with that?

oh, and just to tease and counter Arjan. I think your class names are visually very semantic ;)

BillyG said on June 13, 2007

How many people will ever see this? I'm glad I did, neat stuff Jonathan!

sandeep said on June 13, 2007

good idea !!!

Alex said on June 13, 2007

An interesting use for this would be to use Unicode characters as a way to ensure you avoid conflicts within pages that may pull in multiple style sheets. Fro example, if you create widgets to be embedded on other sites, and you want to guarantee that your styles apply, you could use a class name with Unicode for your outermost container. This isn't any different than creating a very specific and unique ID, but it opens up another option.

Cool discovery Jonathan!

Nate Klaiber said on June 13, 2007

What will you think of next? Ha. It all looks very strange - but it's interesting nonetheless.

Harmen Janssen said on June 13, 2007

@Tim, just tried this style-rule:

.株式会社セガ { width:100px;height:100px;background-color:red;}

with this HTML:

<div class="株式会社セガ"></div>

and it works just great :) In my opinion you're right, this could be very useful for certain developers using different character sets.

By the way: I've got no clue what's in my className, I just copied it from a random Japanese website :D

Tim McCormack said on June 13, 2007

@Harmen Janssen: According to Google, you've just declared the Sega Corporation to be a 100 pixel red square. :-P

Marc Grabanski said on June 13, 2007

Brilliant! Its simple but I never thought to use Unicode characters. Thanks.

Andy Kant said on June 13, 2007

Never thought of doing that...Interesting to say the least but I doubt it would be used in production. ;-)

Robin said on June 13, 2007

That's a very interesting use... quite ingenious, really.

Just the other day I was discussing zero-width space characters as function names in PHP, so you could do something that looks like ('foo'). But Unicode support for function names isn't coming to PHP 6, if then, so I guess we're stuck with conventional names ;).

Ara Pehlivanian said on June 13, 2007

Definitely a creative take on class names, but not really very semantic. Especially since class names aren't for the exclusive use of CSS. That being said, .wrapper .wrapper .wrapper .wrapper isn't really of much use to anyone either. :-)

John Lascurettes said on June 13, 2007

I love the potential. This will introduce problems if you don't prep. The type="text/css" gets sent as ASCII and not Unicode. But you can fix that. Here's one way.

RStankov said on June 13, 2007

The problem is Javascript and working with className in some cases and I don't know how other browser( ... and IE ) will handle it in the future.

Ben Hirsch said on June 13, 2007

That's really freaking clever, Snook. Dang. Not that I will ever use it. But cool find. What made you even decide to try that?

Jonathan Snook said on June 13, 2007

@John Lascurettes: you can use escape sequences which I had have debated going into a deep discussion about but felt that I'm not really promoting the method, just highlighting something fun. In my example, I could have easily done .\250C {} and achieved the same result.

@Ben Hirsch: I was doing some research for some writing I'm doing and in verifying what the acceptable characters were (not easy to find!) I discovered that you can do Unicode. I decided to put together something quick to test the theory. :)

Jason Beaird said on June 14, 2007

That's quite a creative find Jonathan. ...and the discussion here is just as entertaining as the post.

Michel Valdrighi said on June 14, 2007

I noticed that some time ago, accidentally. I had typed class="résumé" in my markup, noticed it later and thought "what was I thinking!?", corrected it to "resume", saw that it didn't work anymore, checked the style block and noticed that I had made the same mistake there (and thus, that Unicode for class names worked).

The only use I see for this feature is to use extended latin characters, to have proper accents.
Anything beyond that and you run into mundane issues like seeing the lovely Unicode corners turn into little squares when you edit source on another computer that does not have the fonts. Imagine you work collaboratively on some files and an inexperienced team member, who does not have the fonts, mistakes the little squares for glitches and removes them, unbeknowst to the rest of the team?
Also, the other issue is simple writability and maintainability: wtf was the keyboard magical mantra to invoke those characters, again? :)
Anyway, nice find. Just, downright useless and potentially harmful in the real world…

David Walsh said on June 14, 2007

This article should be titled "How to get yourself fired." Great find though. Wouldn't use it at work though...

David Walsh said on June 14, 2007

On second thought, maybe it should be called "Job Security 101"...

minghong said on June 14, 2007

Why is this surprising? Unicode can be used in HTML and JavaScript, why not CSS? Just remember to use the same character encoding, or you need to specify the charset in the link/style/script element.

I do NOT agree that it is not semantic, as character encoding has nothing to do with the meaning of the class name. For example, one can use non-semantic class name in Latin character, like "style01".

However, personally I won't use non-latin characters in source codes, unless if it is an language file (locale strings). Unicode can be used in Java, but I've never seen any Java program written in unicode...

Jonathan Snook said on June 14, 2007

@David Walsh: getting fired for using ideograms for class names seems a little extreme. Remind me never to work where you work. :)

@minghong: not all HTML attributes accept Unicode. IDs for example, can't. And they're not arguing that Unicode is unsemantic but rather that my example in particular might be.

Nathan Logan said on June 15, 2007

Snook - you rock.

David said on June 15, 2007

I think maybe someone has too much time on his hands.... ;)

But then again - if no one ever worked with weird things where would we be? I guess I'll have to try this out on some code monkey some time just to see their face....

Doug said on June 16, 2007

Brilliant, useless, & intriguing. Just right for inspiring something really useful.

Amila said on June 25, 2007

snook that's not bad

Rotterdam said on June 30, 2007

this is cool! and little bit funny :D I will try to use this, it is very sweet!

Anand said on August 24, 2007

This is real cool, I was doing some research and I stumbled upon this.

Though the thing I can't understand is, if you can use these funny little symbols as the first character in a classname, why can't you use a regular number?

"In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item)."

Anyways, I might actually try this out if it'll work with Javascript :) .addClass(â–¡)

Andy Gongea said on November 17, 2008

This is sick. :)) and fun.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.