哪些unicode空格等于字母宽度

Question

我试图用相同宽度的空格替换文本中的一些字母(非单空格字体(。

有可能吗？怎样有没有任何非单空格字体允许这样做？

我发现了这些unicode空间，显然U+2002是EN空间，U+2003是EM空间。但宽度并不总是匹配的。

<p>the en space looks nice</p>
<p>the e&#x2002; space looks &#x2002;ice</p>
<p>but em space has more width</p>
<p>but e&#x2003; space has &#x2003;ore width</p>

我想知道其他字母应该用什么空格。。。

我知道我可以为单个字母设置透明度或颜色。但我想找到一个简单的空间解决方案。

Answer 1

你的问题很有趣，所以我想了想，你想要一个真实的空间，而不是缺少的字符，通常用于复制粘贴操作。使用CSS伪元素可能是一种解决方案，因为它们的内容不用于文本选择。

空格字符有一个固定的宽度，而字母则不是这样，因为m比i宽。我认为EM空间是1 EM宽，

EN空间所以我的想法是用这个替换你的char，比方说m：

<span class="pseudo-space" data-char="m"><span>&nbsp;</span></span>

是的，这是大量的HTML，你在问自己"；为什么有一个内部跨度&"；。问题是，我们希望这个空间没有宽度，而我们希望伪元素占据这个空间。我还注意到，如果将非中断空格 替换为正常空格 ，那么当您选择文本进行复制粘贴时，将完全没有空格。

我想出了这个解决方案：

span.pseudo-space {
position: relative; /* Child span will be absolute. */
overflow: hidden; /* Just to avoid a potential scrollbar. */
}
span.pseudo-space > span {
position: absolute; /* Avoid width calculation on the parent span. */
}
span.pseudo-space::after {
content: attr(data-char); /* Display the original char. */
color: transparent;
}
/* Just to have a gray block to see the text aligned. */
blockquote {
margin: 0.5em 0;
padding: 1em;
background: #eee;
display: inline-block;
}
blockquote p:first-child {
margin-top: 0;
}
blockquote p:last-child {
margin-bottom: 0;
}

<blockquote>
<p>The "n" character will never be the same width as a space character.</p>
<p>The "<span class="pseudo-space" data-char="n"><span>&nbsp;</span></span>" character will <span class="pseudo-space" data-char="n"><span>&nbsp;</span></span>ever be the same width as a space character.</p>
<p>The "m" character will never be the same width as a space character.</p>
<p>The "<span class="pseudo-space" data-char="m"><span>&nbsp;</span></span>" character will never be the sa<span class="pseudo-space" data-char="m"><span>&nbsp;</span></span>e width as a space character.</p>
</blockquote>

尝试复制粘贴blockquote的内容，通常应该得到空格而不是隐藏字符。(在Chrome、Firefox和Edge上测试(。

Answer 2

我想做这样的事情。如果我可以用相同宽度的空格替换字母，那会容易得多。我不需要使用HTML元素和样式。

// Convert letter to spans with opacity:0
const p = document.querySelector("p");
p.innerHTML = p.innerText
.split("")
.map(c => `<span class='off'>${c}</span>`)
.join("");
const letterSpans = p.querySelectorAll('span');
// Create random sequence of indexes
const indexes = Array(letterSpans.length).fill().map((e, i) => i)
indexes.sort((a, b) => 0.5 - Math.random());
// Display letters in the order indicated by `indexes`
function displayLetterAtIndex(i) {
letterSpans[indexes[i]].classList = "on";
if (i < letterSpans.length - 1) {
setTimeout(() => displayLetterAtIndex(i+1), 50);
}
}
displayLetterAtIndex(0);

.on {
opacity: 1;
}
.off {
opacity: 0;
}
span {
transition: opacity 1s linear;
}

<p>Letters will appear in a random order</p>