Especifique el ancho en * caracteres *

108

Cuando utilizo una fuente de ancho fijo , me gustaría especificar el ancho de un elemento HTML en caracteres .

Se supone que la unidad "em" es el ancho del carácter M, por lo que debería poder usarlo para especificar un ancho. Esto es un ejemplo:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

El resultado no es lo que quería, ya que la línea del navegador se rompe después de la columna 15, no 10:

1 3 5 7 9 1 3 5
7 9 1

(Resultado en Firefox y Chromium, ambos en Ubuntu).

El artículo de Wikipedia dice que un "em" no siempre tiene el ancho de una M, por lo que definitivamente parece que no se puede confiar en la unidad "em" para esto.

css font-size Martín Vilcans
fuente
Creo que "en" también es un ancho legal; es el ancho de un dígito en tipografía. Eso podría funcionar mejor para ti.
Pete Wilson
6
La propiedad 'em' usa el tamaño de fuente, o la altura , de la fuente, no el ancho de las letras. @Pete: No lo es, consulte el módulo de valores y unidades CSS, nivel 3 .
animuson
A menos que esté usando una fuente de ancho fijo, los diferentes caracteres tienen diferentes anchos. Por lo tanto, es funcionalmente imposible establecer un ancho en términos del número de caracteres mostrados.
Emily
posible duplicado de ¿Cómo establecer el ancho de <div> para que se ajuste a un número constante de letras en una fuente monoespaciada?
Martin Vilcans
"Esta pregunta aún necesita 4 voto (s) de otros usuarios para cerrarse" - ¡Oye, es mi pregunta! ¡Déjame cerrarlo!
Martin Vilcans

Respuestas:

23

1em es la altura de una M, en lugar del ancho. Lo mismo vale para ex, que es la altura de una x. Hablando en términos más generales, estas son las alturas de las letras mayúsculas y minúsculas.

El ancho es un tema totalmente diferente ...

Cambie su ejemplo anterior a 

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

y notará que el ancho y la altura del tramo son diferentes. Para un tamaño de fuente de 20 px en Chrome, el intervalo es de 12x22 px, donde 20 px es la altura de la fuente y 2 px la altura de la línea.

Ahora, dado que em y ex no sirven de nada aquí, una posible estrategia para una solución solo de CSS sería

  1. Cree un elemento que contenga solo un & nbsp;
  2. Deja que se auto dimensione
  3. Coloque su div dentro y
  4. Hágalo 10 veces más grande que el elemento circundante.

Sin embargo, no logré codificar esto. También dudo que realmente sea posible.

Sin embargo, la misma lógica podría implementarse en Javascript. Estoy usando jQuery ubicuo aquí:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

El +1 en (w * 10 + 1) es para manejar problemas de redondeo.

Gerd Riesselmann
fuente
1
Esperaba una solución CSS pura, que solo es posible si conoce la relación entre la altura y el ancho de un carácter (consulte stackoverflow.com/questions/1255281/… ). Acepto esto como la respuesta, ya que parece ser una solución sólida.
Martin Vilcans
1em no es la altura de una M según las respuestas aquí. Graphicdesign.stackexchange.com/questions/4035/… El "|" el personaje debe estar más cerca de 1em.
Sogartar
1
Sogartar, para aclarar: en tipografía propiamente dicha, 1 em es de hecho el ancho (así como la altura de em) de un carácter de ancho fijo. Sin embargo, eso es "tipografía propiamente dicha" y tenemos mucha gente que vuela por la noche creando archivos de fuentes que no se adhieren a las reglas tipográficas, especialmente en el caso de las fuentes web. El punto de mi comentario aquí no es (meramente) cascarrabias grandilocuente. Mi punto es: prueba, prueba, prueba. (Y luego pruebe un poco más.)
Parapluie
217

ch unidad

La unidad que estás buscando es ch. Según los documentos de MDN :

ch: Representa el ancho, o más precisamente la medida de avance, del glifo "0" (cero, el carácter Unicode U + 0030) en el elemento font.

Es compatible con las versiones actuales de los principales navegadores ( caniuse ).

Ejemplo

pre {
    width: 80ch; /* classic terminal width for code sections */
}
transistor09
fuente
3
También está el espacio de la figura , que es precisamente "igual al ancho de un dígito" como se describe en el artículo de Wikipedia sobre el espacio (puntuación) . Su valor Unicode es U + 2007 y se puede ingresar en HTML usando &#x2007;o &#8199;. Es funcionalmente equivalente a la chunidad de CSS, pero aunque no es ampliamente compatible, puede usarse como una solución alternativa en HTML (truco feo, pero debería funcionar).
Waldyrious
2
En realidad, de acuerdo con este problema de cromo , Chrome lo admite desde v27, por lo que en este momento las últimas versiones de todos los principales navegadores (IE, Chrome y Firefox) admiten la unidad ch :)
waldyrious
2
Se debe tener en cuenta que el tamaño del carácter es el tamaño del glifo '0' en la fuente del elemento. Si espera caracteres más grandes como 'm' o 'w', es posible que desee considerar expandir en consecuencia o hacer que se expanda según sea necesario (por ejemplo, stackoverflow.com/questions/7168727/… )
user420667
1
Sí, no hay problemas con las fuentes monoespaciadas.
Willege
2
IE11 lo admite mal. stackoverflow.com/questions/17825638/…
aleha