How to do letter spacing every two letters with CSS only?

Question

Here is my html code:

<span class="number">0102030405</span>

I want to obtain this:

01 02 03 04 05

Here what I have tried:

.number {
    letter-spacing: 2px;
    text-weight: bold;
}

but the spacing is applied between each number. How can I apply the spacing every two numbers ?

Note:
I'm looking for a CSS only solution.

Answer 1

For a CSS only solution, without an nth-letter selector you're going to be dealing with workarounds. There is no nth-letter currently (although CSSWG is discussing it) as you'll no doubt know, so here's a possible workaround albeit an ugly one.

If you're happy to tweak for each instance of .number then you could use the following approach based on splitting the pairs of numbers using columns. Works pretty well for the given example:

.number {
    width: 8em;
    display: block;
    word-wrap: break-word;
    columns: 5;
    column-gap: 0.2em;
}

See: http://jsfiddle.net/WgRs6/

The width, columns and column-gap values will need to be tweaked depending on the numbers in the markup as well as the chosen font size. You'd also need to tweak them to change the space between the columns. Unfortunately, this would certainly break if there are numbers with different amount of digits (e.g. 1, 200, 3, 9000, 42, 100000). You asked for splitting between two numbers so hopefully that shouldn't be an issue for you.

Ideally you'd be able to use lettering.js, or any JavaScript which would split your letters into distinct span elements that you could then combine with .number span:nth-child(2n) to add your desired spacing. See: http://jsfiddle.net/SSq7M/

Answer 2

I am not sure whether you can do it using css.Anyway you can do this using javascript. The code will be as follows :

 String.prototype.chunk = function(n) {
   var space = [];
   for(var i=0, len=this.length; i < len; i += n) {
     space.push(this.substr(i, n))
   }
   return space
 };

"0102030405".chunk(2).join('  ');

Check Fiddle