box around each letter with css without using spans - html

Question

I'm trying to create a box around each letter to use for an odometer style stat counter. Do you know how to do this without wrapping each letter in a span? If you have any ideas I'd love to hear them.

Answer 1

If you are using a mono spaced font, you could probably use a background image with the boxes.

Answer 2

Another option would be to use javascript to add in all the extra markup you need. There are some jquery plugins that do this type of thing already:
http://daverupert.com/2010/09/lettering-js/

Answer 3

Using CSS3 gradients you can do this with pure css and no javascript. The main idea is to create a gradient where the box color you want is a solid color to a certain color stop, and then the gradient is transparent. You have to calculate the color stops in coordination with the font-size and letter-spacing of the text. Then apply the gradient to a pseudo class of the text's element and voila.
Here's an example I created for a span element that contained the amount of money raised for an organization. Each number needed a pink box around it. The reason the gradient is so complicated is because I made it only repeat after every 3 digits, since every 3 digits there was a comma that needed to be outside of the boxes and thus required an extra gap. If you are repeating after every character it can be much simpler, but figured I'd share this approach since you mentioned an odometer. You can also extend these gradients with more browser-prefixes to make it work in IE, opera, etc.
html:
<span id="amount-raised">10,123</span>
css:
span#amount-raised {
position: absolute;
z-index: 1;
font-size: 70px;
letter-spacing: 10px;
color: #fff;
}
span#amount-raised:before { /* pink boxes */
content: '';
position: absolute;
top: 0; left: 0;
z-index: -1;
height: 100%; width: 100%;
background-image: -webkit-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
background-image: -moz-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
}

Answer 4

I can't see a way to do this in HTML without wrapping each letter in an element that you can style.

Answer 5

You could create ten gifs, one for each number (you said stat counter) that look the way you want them. When you load the page, use javascript to split your string into an array, then loop through it and replace each character with the corresponding gif for that number.

Answer 6

Well, it's certainly possible to flip this around and use a font (via #font-face) that has boxed-in letters.

Answer 7

I liked DMTinter's answer but it was longer than necessary (plus it's 7 years old) - here's a quick and simple example css that I'm using on my page:
span { color: black;
font-family: "Lucida Console", Monaco, monospace;
border: 1px solid black;
background-image: repeating-linear-gradient(90deg, white, white 13.5px, black 14.5px);
}
The important thing is repeating-linear-gradient(). I just did trial and error to arrive at the values 13.5px and 14.5px as lining up with the background well.