Question

我希望TAB字符比SPACE字符宽，但在HTML5画布中，它们是相同的。还有其他几个，这些并不是一个值得关注的问题：

var c=document.getElementById('mycanvas').getContext('2d');
c.font='24px Sans-Serif';
c.measureText('\t').width; // 7
c.measureText('\r').width; // 7
c.measureText('\n').width; // 7
c.measureText(' ').width;  // 7
c.measureText('\b').width; // 0
c.measureText('a').width;  // 13

我正在canvas中渲染文字，并希望TAB相对于SPACE有一个不足为奇的宽度。我应该使用什么价值（多个？）？

Answer 1

您可以放心，context.measureText('\t')将始终返回当前字体中空格字符的宽度。

这就是为什么......

.measureText使用内联框测量文字。

WhatWG.org指定measureText.width返回内联框值：

https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-measuretext

measureText（）方法接受一个参数text。当方法是   调用后，用户代理必须运行文本准备算法，   传递文本和实现CanvasText接口的对象，   然后使用返回的内联框必须创建一个新的TextMetrics   对象的属性设置如[...如下]：

width属性：该内联框的宽度，以CSS像素为单位。（文字的前进宽度。）

内联框将标签字符折叠为空格字符。

W3.org指定标签字符折叠为空格：

http://www.w3.org/TR/CSS2/text.html#white-space-model

对于每个内联元素（包括匿名内联元素），   执行以下步骤，将bidi格式化字符视为   如果他们不在那里......

...每个标签（U + 0009）都转换为空格（U + 0020）

Answer 2

如果您正在处理等宽字体或者您知道制表符的宽度，则测量制表符的不干净方法是调整测量文本，添加尽可能多的空白字符以匹配所有制表符的总宽度在字符串中。

例如，使用我使用的等宽字体，我知道每个标签的宽度都是8个空格，因此：

context.measureText(str + (' '.repeat((str.match(/\t/g) || []).length)*7))

在这里，我使用7代替8作为标签折叠到空格，如果有意义的话，我不想计算它们两次。

measureText（）制表符

2 个答案: