如何计算平均字符宽度

Question

根据HTML 规范， cols 属性指定每行预期的最大字符数。

当使用的字体对于每个字符都具有相同的宽度时，这是正确的。

根据w3schools ， cols 属性指定了文本区域的宽度（以平均字符宽度计）。

我的猜测是它们的意思是字体的平均字符宽度，而不是 textarea 中文本的平均字符宽度。

现在我的问题是用户代理如何计算某种字体的平均字符宽度，这个计算中包含哪些字符，......有没有办法我可以获得这些信息或自己计算？

我想要做的：计算文本区域内的可视行数，而不使用除 textContent 和 cols 属性之外的任何其他内容。

我已经尝试过的：

• 计算 textContent 的平均字符宽度：

 const textSpan = document.getElementById("textSpan"); const textarea = document.getElementById("textarea"); textarea.addEventListener("input", (evt) => { textSpan.innerText = evt.target.value; console.log("Predicted number of lines: " + (textSpan.getBoundingClientRect().width / (textSpan.getBoundingClientRect().width / textSpan.innerText.length * 10))) // 10 = cols attribute of textarea element; });

 <textarea id="textarea" cols="10" rows="10" style="word-break: break-all;"></textarea> <span id="textSpan"></span>

• 计算大多数字符的平均字符宽度，这可能有效，但我必须知道要使用哪些字符进行计算......：

 const textSpan = document.getElementById("textSpan"); const textSpanACW = document.getElementById("textSpanACW"); const textarea = document.getElementById("textarea"); textarea.addEventListener("input", (evt) => { textSpan.innerText = evt.target.value; console.log("Predicted number of lines: " + (textSpan.getBoundingClientRect().width / (textSpanACW.getBoundingClientRect().width / textSpanACW.innerText.length * 10))) // 10 = cols attribute of textarea element; });

 <textarea id="textarea" cols="10" rows="10" style="word-break: break-all;"></textarea> <span id="textSpanACW">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,;?.:/=+ù%µ£^¨$*-_)àç!è§('"é&|@#¼½^{[{}</span> <span id="textSpan"></span>

一旦我弄清楚了这一点，我就必须在不使用word-break: break-all; . 因此，在答案中会很好，但不需要。

Answer 1

进一步阅读HTML 规范： textarea 元素的 textarea 有效宽度为 size×avg + sbw，其中 size 是元素的字符宽度，avg 是元素主要字体的平均字符宽度，以 CSS 像素和 sbw 为单位是滚动条的宽度，以 CSS 像素为单位。 （元素的字母间距属性不影响结果。） 。

所以计算平均字符宽度（avg）的公式是： (effectiveWidth - sbw) / size 。

得到sbw ：

<style>
    /* way the hell off screen */
    .scrollbar-measure {
        width: 100px;
        height: 100px;
        overflow: scroll;
        position: absolute;
        top: -9999px;
    }
</style>
<script>
    const sbw = getScrollbarWidth();

    function getScrollbarWidth() {
        let scrollDiv = document.createElement("div");
        scrollDiv.className = "scrollbar-measure";
        document.body.appendChild(scrollDiv);
        const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        document.body.removeChild(scrollDiv);
        return scrollbarWidth;
    }

</script>

获取尺寸：

在HTML 规范中： cols 属性指定每行预期的最大字符数。 如果指定了 cols 属性，则其值必须是大于零的有效非负 integer。 如果将解析非负整数的规则应用于属性的值会导致数字大于零，则元素的字符宽度就是该值； 否则为 20。

所以：

let size = parseInt(textarea.getAttribute("cols"));

if (isNaN(size)) {
    size = 20;
}

获得有效宽度：

如果元素具有 cols 属性，并且使用解析非负整数的规则解析该属性的值不会产生错误，那么用户代理应该使用该属性作为元素上 width 属性的表示提示, 值为 textarea 有效宽度（定义如下）。 否则，用户代理的行为就好像它有一个用户代理级别的样式表规则，将元素的宽度属性设置为文本区域的有效宽度。

所以：

const effectiveWidth = parseFloat(getComputedStyle(textarea).getPropertyValue("width").slice(0, -2));