javascript - 文字按字长对齐

我一直在从事与spritz应用程序具有相似结果的项目。基本上，它需要一个字符串，将每个单词转换成一个数组，然后一次显示每个输出。问题是我似乎找不到一种基于单词长度对齐每个单词的方法（请参阅链接）。

这是我正在寻找的spritz输出的演示：http://imgur.com/a/UlZ6W





有谁知道如何基于单词的长度来使输出居中？

IE浏览器：
如果数组长度为1个字母，则为中心字母
如果数组长度为2-4，则第二个字母居中
如果数组长度为5-7，则第三个字母居中
等等。

最佳答案

一个可能对您有用的开始。

http://jsfiddle.net/kimiliini/ap64C/

使用一个元素来测量宽度。计算单词宽度到中间带中心字母的宽度。

例如，具有元素：

<span id="tw"></span>

和CSS：

#tw {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    font: bold 18px Arial;
}

一罐：

// get element
tw = document.getElementById('tw');
// set text
tw.textContent = 'foo';
// get width
tw.offsetWidth;

以这个为基础，我们可以将单词分为三组：


属于中心字母左侧的字母。
左+中心的字母。
中心后的字母。


例。有单词starting和一个框，我们想在该框的中心距左侧偏移110像素。

length = 8
left   = sta
center = r
right  = ting

width_left = 15
width_left + width_center = 19

mid = (19 - 15) / 2

box margin left = 110 - (width_left + mid)

简单，应该重构代码，示例：

// span's for left, center and right
var tx = {
    L: document.getElementById('txt_L'),
    C: document.getElementById('txt_C'),
    R: document.getElementById('txt_R')
};
// Box to that holds span's, to set margin left on.
var b = document.getElementById('bw');

function width(w) {
    tw.textContent = w;
    return tw.offsetWidth;
}
function middle(w) {
    var n = w.length,
        // Center char calculation. 1=1, 2-5=2, 6-8=3, ...
        c = ~~((n + 1) / 3) + 1,
        z = {};
    z.a = width(w.substr(0, c - 1));
    z.b = width(w.substr(0, c));
    z.c = (z.b - z.a) / 2;
    b.style.marginLeft = ~~(110 - (z.a + z.c)) + 'px';

    tx.L.textContent = w.substr(0, c - 1);
    tx.C.textContent = w.substr(c - 1, 1);
    tx.R.textContent = w.substr(c);
}