Field around each letter with css without spaces

Question

I am trying to create a window around each letter that will be used for a static odometer style counter. Do you know how to do this without wrapping each letter in the gap? If you have any ideas, I would love to hear them.

Answer 1

Another option would be to use javascript to add all the necessary extra markup. There are some jquery plugins that already do this:

http://daverupert.com/2010/09/lettering-js/

Answer 2

If you are using a font with a monaural, you can use a background image with margins.

Answer 3

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

Answer 4

Well, of course, you can flip this over and use a font (via @ font-face ) that has plug-in letters.

Answer 5

Using CSS3 gradients, you can do this with pure css and without javascript. The main idea is to create a gradient in which the desired box color is a solid color for a specific color stop, and then the gradient is transparent. You must calculate color stops in coordination with the font size and the spacing between the letters of the text. Then apply the gradient to the pseudo-class of the text element and voila.

Here is an example that I created for a span element that contains the amount of money raised for the organization. Each number needs a pink frame. The reason the gradient is so complicated is because I did it only after three digits, since every 3 digits were a comma that should have been outside the boxes and therefore needed an extra break. If you repeat after each character, it could be a lot simpler, but I guess I would share this approach since you mentioned the odometer. You can also expand these gradients with additional 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 6

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