Making Smiles using only CSS & Vertical Text

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

This week I needed to create a 404 error page for a project, I wanted to create something simple that was purely CSS with no images. I wanted the page to have something graphical as well and decided on a large sad smilie. The challenge here is to get the text :-( to display vertically.

I wanted to keep things as simple as possible. I excluded using SVG, IE conditional statements or IE filters. I managed to get vertical text in a single CSS block. Here is the result:


Here is the basic markup:

<div class="smiley">
  <p class="vertical-text">:-(</p>

To get text to display vertically we use a rule for the four main browser groups. IE has supported the use of writing-mode for a few years now, Webkit browsers (Safari & Google Chrome), Firefox and Opera all support their own version of transform.

p.vertical-text {
  -o-transform: rotate(90deg);

We now have our vertical text. Next is the yellow background. We can simply give the containing DIV a yellow background then apply rounded corners. IE9 now supports the border-radius property so we can get a circle for every modern browser. So here is the final CSS:

div.smiley {
  background: yellow;
  height: 100px;
  width: 100px;
  line-height: 100px;
  border-radius: 50px;
  text-align: center;
  font-size: 60px;
  font-family: Arial;
  padding-left: 6px;

The result is at the top of the page.

This doesn’t work in old Opera versions, but does work in Opera 10.5. This also works in IE6+, FF 3.5+, and Webkit based browsers.

I tried to keep this one simple, but lining everything up in different browsers can be a difficulty because of the way each browser interprets fonts and spacing. The differences in text rendering make it more difficult to create a “pixel perfect” layout.

This article was posted on 24 September 2010 in CSS, HTML

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.