javascript - 文本按字长对齐

Question

我一直在从事一个与 spritz 应用程序具有相似结果的元素。基本上，它接受一个字符串，将每个单词转换成一个数组，然后一次显示每个输出。问题是我似乎无法找到一种方法来根据单词长度对齐每个单词(参见链接)。

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

有谁知道如何根据单词的长度使输出居中？

即: 如果数组长度为1个字母，则居中字母 如果数组长度为 2 - 4，则将第二个字母居中 如果数组长度为 5 - 7，则将第三个字母居中 等。

Answer 1

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

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

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

例如有元素:

<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;

以此为基础，我们可以将单词分成三组:

1. 属于中心字母左侧的字母。
2. 左+中的字母。
3. 中心后面的字母。

例子。有单词 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);
}