文字按字长对齐
[英]Text align by word length
问题描述
I have been working on a project that has a similar result as the spritz app. 
我一直在从事与spritz应用程序具有相似结果的项目。 Basically, it takes a string, turns each word into an array and then displays each output one at a time. 基本上，它需要一个字符串，将每个单词转换成一个数组，然后一次显示每个输出。 The problem is that I can't seem to find a way to align each word based on the word length (see link). 问题是我似乎找不到一种基于单词长度对齐每个单词的方法（请参阅链接）。
Here is a demo of the spritz output that I am looking for: http://imgur.com/a/UlZ6W 这是我正在寻找的spritz输出的演示： http : //imgur.com/a/UlZ6W
Does anyone know how to center an output based on the the length of a word? 有谁知道如何基于单词的长度来使输出居中？
IE: If array length is 1 letter, center letter If array length is 2 - 4, center second letter if array length is 5 - 7, center third letter ect. IE：如果数组长度为1个字母，则居中字母；如果数组长度为2-4，则居中第二个字母；如果数组长度为5-7，则居中第三个字母等。
3 个解决方案
解决方案1
1 2014-03-26 02:11:04
Some Background On Your Problem 您的问题的一些背景
I believe you're going to find this either very difficult to solve or else are going to have to railroad you users quite dramatically. 我相信您会发现这要么很难解决，要么将不得不极大地吸引用户。
Words don't have lengths, because characters aren't all of the same size, and even the space between letters is different The exception is of course monospaced fonts (and they aren't really an exception they just behave like one). 单词没有长度，因为字符的大小并不相同，甚至字母之间的间距也不同。例外当然是等宽字体（它们并不是真正的例外，它们的行为就像一个字符）。
To achieve what you're after, you need to know the precise size of each letter, and for real accuracy would need to know the precise size of each letter in relation to it's adjacent letters . 为了实现您所追求的目标，您需要知道每个字母的精确大小，并且为了真正的准确性，需要知道每个字母相对于其相邻字母的精确大小。 But that's typography nitty-gritty and probably not what you want to do. 但这是一字不漏的排版，可能不是您想做的。
If it were me, I'd artificially do it with 如果是我，我会人为地
标签，您可以指定其宽度（例如，最大字符+ 1 px）。 Then word length will always be equivalent to some multiple of the parent element. 然后，字长将始终等于父元素的某个倍数。 The other option would be to render the text as image via HTML5 canvas, which could be made to autofit the word and then would have, itself, a width property. 另一个选择是通过HTML5画布将文本呈现为图像，可以使该文本自动适合该单词，然后本身具有width属性。
A Solution to Consider 考虑的解决方案
Try something like: 尝试类似：
<style> li.char { display:inline-block; text-align:center; width:4px; } li.char.center { color:red} </style> <body> ... ...
<div style="text-align:center"> <ul id="spritztext"> </ul> </div> <script> var my_string = "strings are cool"; var center = ceil( my_string.len() / 2); /* rounding up/down is a bad solution to finding the center character, for what it's worth. examine the words 'will' vis 'limb' in a proportional font and you'll see why*/ var count = 0; $(my_string).each(function() { var class = count == center ? "char center" : "char"; count++ var char_element ="<li class='" + class +"'>" + my_string[count] + "</li>"; $("#spritztext").append(char_element) }); TLDR: text isn't graphics; TLDR：文字不是图形； you need a monospaced font, a rendering strategy, or a hack via parent elements 您需要等宽字体，渲染策略或通过父元素进行修改
解决方案2
1 已采纳 2014-03-26 03:43:25
A start that might could work for you. 一个可能对您有用的开始。
http://jsfiddle.net/kimiliini/ap64C/ http://jsfiddle.net/kimiliini/ap64C/
Use an element to measure width. 使用一个元素来测量宽度。 Calculate width of word to middle w/wo center letter. 计算单词宽度到中间带中心字母的宽度。
For example having the element: 例如，具有元素：
<span id="tw"></span>
and CSS: 和CSS：
#tw {
position: absolute;
visibility: hidden;
white-space: nowrap;
font: bold 18px Arial;
}
One can: 一罐：
// get element
tw = document.getElementById('tw');
// set text
tw.textContent = 'foo';
// get width
tw.offsetWidth;
Having this as base we can split word into three groups: 以这个为基础，我们可以将单词分为三组：
- Letters belonging to the left of center letter. 属于中心字母左侧的字母。
- Letters for left + center. 左+中心的字母。
- Letters after center. 中心后的字母。
Example. 例。 Having the word starting and a box where we want to center at offset 110 pixels from left. 有单词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)
Simple, should be refactored code , sample: 简单， 应该重构代码 ，示例：
// 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);
}
解决方案3
0 2014-03-26 02:35:29
One solution may be divide the word into two parts and use a table-like two column layout to show the word. 一种解决方案是将单词分为两部分，并使用类似表格的两列布局来显示单词。 Like this: 像这样：
<table style="border-collapse: collapse; width: 200px;"><tr>
<td style="text-align: right; width: 100px; padding: 0;">wo</td>
<td style="text-align: left; width: 100px; padding: 0;">rd</td>
</tr></table>
This doesn't exactly align a letter center at one position, but could align left or right edge of a letter exactly at some position. 这不能将一个字母的中心精确地对准一个位置，但是可以将某个字母的左边缘或右边缘精确地对准某个位置。
To refine the solution, you may need to get letter/character width on demand (By creating a temp 'span' node with inner text of the letter, then get the offsetWidth). 为了完善解决方案，您可能需要按需获取字母/字符宽度（通过使用字母的内部文本创建临时“跨度”节点，然后获取offsetWidth）。 Then adjust the margin of the two parts to achieve the exactly goal. 然后调整两个部分的边距以实现精确的目标。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.