¿Cómo encuentra el tamaño de fuente más grande que no rompa un texto dado?

Question

Estoy tratando de usar CSS ( en @media print ) y JavaScript para imprimir un documento de una página con un texto determinado lo más grande posible. sin dejar de encajar dentro de un ancho dado. La longitud del texto no se conoce de antemano, así que usar una fuente de ancho fijo no es una opción.

Para decirlo de otra manera, estoy buscando el cambio de tamaño adecuado, de modo que, por ejemplo, " IIIII " saldría en un tamaño de fuente mucho más grande que " WWWWW " porque " yo " es mucho más delgado que " W " en una fuente de ancho variable.

Lo más cercano que he podido acercarme a esto es usar JavaScript para probar varios tamaños de fuente hasta que clientWidth sea lo suficientemente pequeño. Esto funciona lo suficientemente bien para los medios de pantalla, pero cuando cambias a los medios impresos , ¿hay alguna garantía de que los 90 ppp que aparece en mi sistema (es decir, puse los márgenes a 0,5 en ambos lados) , y para un texto redimensionado para que se ajuste exactamente a eso, obtengo aproximadamente 675 para clientWidth ) ¿será el mismo en cualquier otro lugar? ¿Cómo decide un navegador qué DPI utilizar cuando se convierte de medidas de píxeles? ¿Hay alguna forma de acceder a esta información usando JavaScript?

Me encantaría si fuera solo una característica de CSS3 ( font-size: max-for-width (7.5in) ) pero si lo es, no he podido encontrarlo .

Answer 1

Aquí hay un código que terminé usando, en caso de que alguien lo encuentre útil. Todo lo que necesita hacer es hacer que el DIV externo tenga el tamaño que desee en pulgadas.

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

La propiedad de tamaño de fuente CSS acepta unidades de longitud que incluyen medidas absolutas en pulgadas o centímetros:

  

Las unidades de longitud absoluta dependen en gran medida del medio de salida, y   son menos útiles que las unidades relativas. Las siguientes unidades absolutas   están disponibles:

     

  
• en (pulgadas; 1in = 2.54cm)
  
• cm (centímetros; 1cm = 10mm)
  
• mm (milímetros)
  
• pt (puntos; 1pt = 1 / 72in)
  
• pc (picas; 1pc = 12pt)
  

Ya que no sabes cuántos caracteres tiene tu texto aún, es posible que necesites usar una combinación de Javascript y CSS para establecer dinámicamente la propiedad de tamaño de fuente correctamente. Por ejemplo, tome la longitud de la cadena en caracteres y divida 8.5 (suponiendo que está esperando papel de tamaño de carta de EE. UU.) Por el número de caracteres y eso le da el tamaño en pulgadas para establecer el tamaño de fuente para esa porción de caracteres. texto. Probó el tamaño de la fuente con medidas absolutas en Firefox, Safari e IE6, por lo que debería ser bastante portátil. Espero que ayude.

EDIT : tenga en cuenta que es posible que también deba jugar con configuraciones como la propiedad de espacio entre letras y experimentar con la fuente que usa, ya que la configuración del tamaño de fuente no es realmente el ancho de las letras, que será diferente según el espacio entre letras, y la fuente, proporcional a la longitud. Ah, y usar una fuente monoespacio ayuda;)

Answer 3

No conozco una forma de hacer esto en CSS. Creo que lo mejor sería usar Javascript:

1. Pon el texto en un div
2. Obtén las dimensiones del div
3. Reduzca el texto si es necesario
4. Vuelva al paso 2 hasta que el texto sea lo suficientemente pequeño

Aquí hay un código de ejemplo para detectar el tamaño del div .