使用等宽字体时自定义caret水平定位不准确的原因是什么？

• 硬编码单字符宽度不可靠：你预设的10.1px只是当前设备下的近似值，即使是等宽字体，不同DPI缩放比例、浏览器渲染策略、字体加载状态都会导致实际单字符宽度变化，字符数越多偏差累积越大，这也是你点击行尾字符定位正常、行首字符偏移的核心原因——你的单字符宽度是按整行总宽度除以字符数得到的平均值，整行总宽度刚好匹配，行中位置就会出现偏差。
• 定位上下文不匹配：你给#caret设置了绝对定位，但没有给父容器#write添加position: relative属性，导致定位基准和你预期的不一致。
• 未计入容器内边距：#write设置了10px的左内边距，你计算水平位置时没有叠加这个偏移量，进一步放大了定位误差。

完全不需要手动计算字符宽度，通过浏览器原生API直接获取点击位置的坐标，零计算误差：

CSS修改 #

给#write添加相对定位，作为caret的定位父级：

#write {
  font-family: 'Roboto Mono';
  height: 100%;
  width: 100%;
  background: #1f2227;
  padding: 10px;
  color: white;
  box-sizing: border-box;
  position: relative; /* 新增此行 */
}

JS修改 #

替换原有光标定位逻辑：

let writeDiv = document.querySelector('#write');
let caret = document.querySelector('#caret')

writeDiv.addEventListener('click', (e) => {
    if(e.target.classList.contains('RowSpan')){
        moveCaretOnClick(e)
    }
})

function moveCaretOnClick(e) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return
    const range = selection.getRangeAt(0);
    const cursorRect = range.getBoundingClientRect();
    const containerRect = writeDiv.getBoundingClientRect();
    // 转换为容器内的相对坐标
    caret.style.left = `${cursorRect.left - containerRect.left}px`;
    caret.style.top = `${cursorRect.top - containerRect.top}px`; 
}

这个方案适配所有字体、任意字符长度、任意缩放比例，定位完全精确，后续修改容器边距、字体大小也不需要同步调整代码。

如果你坚持使用字符偏移计算的方案，可以动态获取当前环境下的实际单字符宽度，避免硬编码：

let charWidth = 0;
// 字体加载完成后计算单字符宽度
document.fonts.ready.then(() => {
  const testEl = document.createElement('span');
  testEl.style.fontFamily = "'Roboto Mono'";
  testEl.style.visibility = 'hidden';
  testEl.style.position = 'absolute';
  testEl.innerText = 'x';
  document.body.appendChild(testEl);
  charWidth = testEl.getBoundingClientRect().width;
  document.body.removeChild(testEl);
})

计算水平位置时需要叠加容器的左内边距，同时统一父级定位上下文，但该方案仍存在特殊字符、排版格式导致的偏差风险。

内容的提问来源于stack exchange，提问作者RDU