Para un elemento dado, aprecio la definición de 1ch :
el ancho o más precisamente la medida de avance del glifo 0 (cero, el carácter Unicode U+0030) en la fuente del elemento.
¿Cuál es la mejor manera de calcular la longitud de 1ch en px con javascript?
Puedo pensar en algunos enfoques, como agregar un 0 al DOM, calcular el ancho y luego eliminarlo nuevamente, o tal vez tener un 0 oculto permanente. Pero ambos parecen pirateados y no muy limpios.
Estoy buscando un enfoque más limpio.
Puede usar el lienzo 2d para hacer eso. Pero debe tener en cuenta que la representación entre el navegador y el lienzo 2d puede ser diferente. También para el enfoque DOM, puede obtener resultados diferentes para un elemento que contiene 0 y un elemento con el ancho 1ch :
const c = document.createElement('canvas') const ctx = c.getContext("2d"); ctx.font = "30px Arial"; console.log('width based on canvas : ' + ctx.measureText('\u0030').width) console.log('width based on DOM (1ch) : ' + document.querySelector('.element1').getBoundingClientRect().width); console.log('width based on DOM (0) : ' + document.querySelector('.element2').getBoundingClientRect().width); .element1 { font-family: Arial; font-size: 30px; width: 1ch; display: inline-block; } .element2 { font-family: Arial; font-size: 30px; display: inline-block; } <span class="element1"><span> <span class="element2">0<span>