Need to split a string to character and align to the container equally

Question

origin

result

I want to split a string into character, and make each of the character fit the container equally, this is my work for the time being: http://jsfiddle.net/d5fu9/

The first item must attached to the left, and the last item must attached to the right.

  $.fn.textjustify = function() {
        return this.each(function() {
            var text = $(this).text(),
                containerWidth = $(this).width(),
                character = '',
                string = '',
                singleWidth = 0,
                firstItemWidth = 0,
                lastItemWidth = 0,
                alignWidth = 0;

            if ('' !== text) {
                $(this).css('position', 'relative');
                textArray = text.split('');
                singleWidth = Math.floor(containerWidth / textArray.length);

                for (i in textArray) {
                    // Wrapp with div to get character width
                    character = ('' === $.trim(textArray[i])) ? '&nbsp' : textArray[i];
                    string += '<span>' + character + '</span>';
                }

                $(this).html(string);

                firstItemWidth = $(this).find('span:first').width();
                lastItemWidth = $(this).find('span:last').width();
                alignWidth = containerWidth - (firstItemWidth + lastItemWidth);

                $(this).find('span').each(function(i) {
                    if (0 === parseInt(i)) {
                        // The first item
                        $(this).css({position: 'absolute', left: 0, top: 0});
                    } else if ((parseInt(textArray.length) - 1) === parseInt(i)) {
                        // The last item
                        $(this).css({position: 'absolute', right: 0, top: 0});
                    } else {
                        // Other items
                        // stuck in here......
                        var left = (i * singleWidth) - $(this).width() + firstItemWidth;
                        $(this).css({position: 'absolute', left: left, top: 0});
                    }
                });

            }
        });
    }

stuck in the algorithm of middle items's position.

Answer 1

I think this is the simplest solution. Works great with All browsers (IE included)

1. without complex (and unreliable) width detection and calculation.
2. without specifying the words width/height
3. without relative/absolute positioning
4. using pure HTML/CSS/JS/JQ tricks.

Working Fiddle

HTML:(very simple)

<div class="Box">
    <div class="Centered">
        <div class="Spread">Lighting</div>
        <div class="Spread">我是中文</div>
    </div>
</div>

CSS:(neat and tricky)

*
{
    margin: 0;
    padding: 0;
}
.Box
{
    width: 150px;
    height: 150px;
    border: 1px solid red;
    margin: 6px;
}
.Box:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.Spread
{
    width: 100%;
    text-align: justify;
    font-size: 0;
}
    .Spread span
    {
        font-size: medium;
    }
.Spread:after
{
    content: '';
    display: inline-block;
    height: 0px;
    width: 100%;
}

JS/JQ:

$.fn.SplitText = function () {
    return this.each(function () {
            return $(this).html('<span>' + $(this).text().split('').join(' ') + '</span>');
    });
}

$(function () {
    $('.Spread').SplitText();
})

Explanations: as mentioned by wared in the comments, IE7 doesn't support the use of pseudo classes. but they are not necessary for the solution. Here's a Fiddle for IE7 (and all other browsers of course).

how the vertical aligning works? when vertical-align:middle; is used on an inline element, it will align the middle of this element with the other inline elements in the same line. that's why I'm creating an inline element with height:100%;, so when we align our inline element to his middle, it will actually be the middle of the container.

how the horizontal distribution works? taking advantage of the text-align:justify;, we create an empty inline element (height:0;) with width:100%;, we can imagine that it takes a full line, and the rest of the text takes the second line. using justify makes the second line spread evenly to take the exact space as the first.

let me know if you need more explanation.