CSS: ¿configura el relleno/márgenes según el ancho del texto?

Question

¿Hay una unidad de medida en CSS (ya sea que esté planeada o ya exista) para establecer el relleno y los márgenes según el ancho de la fuente que se usa?

Sé que se supone que em es la altura de la M mayúscula de la fuente que utiliza el navegador, lo que es realmente útil para agregar un doble espacio limpio. Pero a veces quiero que los márgenes laterales de las listas en línea tengan el ancho de un espacio normal sin interrupción, o el ancho de una mayúscula A. Con algunas fuentes, el uso de em es poco confiable.

Answer 1

Gracioso, pero es seems that nobody cares sobre el ancho de los tipos de letra. Todo lo que se mide, es la altura:

Si este es el caso de "la tipografía clásica", entonces hay aún menos esperanza en tipografía web que es una subclase de la primera.

EDITAR: En realidad hay un measurement named En que se refiere al "ancho de una letra minúscula" n "." Sin embargo, no he visto esto usado en la web.

Answer 2

Me temo que no. CSS no ofrece una manera de referenciar las propiedades de las fuentes.

Pero siempre se puede escapar insertando   en los elementos de la primera y la última lista.

Answer 3

las especificaciones de W3C para css3 define una unidad que es el ancho de "0" el carácter de la fuente:

unidad ch

igual a la medida avance usado del "0" (ZERO, U + 0030) glifo encontrado en la fuente utilizada para representarlo.

Ver css3-values.

Answer 4

Se me ocurrió algo simple que me ayudó con un problema de relleno basado en el tamaño de la fuente. Quería compensar un <td> basado en un prefijo de cadena en la fila anterior. Cliff nota la versión, agrego el texto que representa el desplazamiento deseado en un tramo y lo hago invisible y no seleccionable. Mi solución está aquí:

.hiddenOffset { 
opacity: 0; 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
cursor: default; 
} 


<table> 
    <tr> 
    <td>NumElements</td> 
    </tr> 
    <tr> 
    <td><span class="hiddenOffset">Num</span>Offset Text</td> 
    </tr> 
</table> 

Esto me da la compensación perfecta y el prefijo está oculto y no seleccionable. En mi código real, uso JavaScript puro para especificar la cadena de prefijos, por lo que no está codificado y uso prefix.repeat(n) para establecer sangrías anidadas.

function processRepeatingGroupInstance(indent, group) { 
    let prefix = 'No'; 
    let html = ''; 
    for (let i = 0; i < group.length; i++) { 
     let field = group[i]; 
     if (field.hasOwnProperty('msgvaluedesc')) 
      html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value tooltip">${field.msgvaluedesc}<span class="tooltiptext">${field.msgvalue}</span></td></tr>`; 
     else 
      html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value">${field.msgvalue}</td></tr>`; 
     if (field.hasOwnProperty('repeating_group')) { 
      for (let j = 0; j < field.repeating_group.length; j++) 
       html += processRepeatingGroupInstance(indent + 1, field.repeating_group[j]); 
     } 
    } 
    return html; 
}