Tamaño de letra "Mejor ajuste": ¿cómo mido el ancho de una oración?

Question

Me encuentro con un problema común con el diseño del sistema de administración de contenido personalizado.

Dirijo una pequeña empresa de diseño web y con frecuencia tengo que hacer que un área determinada de un sitio web sea editable para el cliente. Por ejemplo, puede haber una barra en la parte superior de la página que anuncie las últimas noticias o ofertas que el cliente quiera editar por su cuenta.

El problema que tengo es que a menudo escriben demasiado y el texto se desborda. Tal vez estoy demasiado a la defensiva, pero en estas situaciones generalmente culpo al cliente de forma privada. Seguramente lo verifican después de actualizar el texto, darse cuenta de que no encaja y modificarlo para que así sea.

De todos modos, creo que es mi responsabilidad hacer que el sitio se vea bien, así que he estado tratando de encontrar la manera de que el texto encaje en una caja de tamaño fijo. Una forma es dar a la caja (por lo general un div) Propiedad esta css:

overflow: auto; 

pero a veces esto no es adecuada, tal como en el ejemplo descrito anteriormente, donde la barra es sólo una línea de alta.

Mi pregunta (sí, finalmente lo he hecho) es ¿cómo puedo hacer que la fuente cambie de tamaño automáticamente para que quepa en la caja?

En algunas aplicaciones (un ejemplo es Powerpoint), puede elegir la opción de "mejor ajuste" para el tamaño de fuente y la aplicación elige un tamaño que permita que el texto encaje exactamente. Básicamente estoy buscando una versión CSS, JavaScript o PHP de esto.

¡Gracias de antemano!

EDIT: Aquí está la solución - http://jsfiddle.net/Cnkfn/1/

Answer 1

Siento su dolor! También tenemos clientes que nos dan resúmenes que son demasiado largos para el área asignada; para algunos clientes, aparentemente ni siquiera se les pasa por la mente que su texto podría ser demasiado largo. :-)

Lo que haría en su caso es algo así como lo que stackoverflow hace: mostrar un cuadro debajo del área de entrada que muestra su texto actualizando onkeyup. Con una caja de altura fija, será inmediatamente obvio para ellos cuando el texto sea demasiado largo. En lugar de eso, usted podría intentar algo como lo siguiente:

<style> 
#outer { 
    width:100px; 
    height:40px; 
    overflow-x:hidden; 
    overflow-y:auto; /* To make it obvious the text is too long. */ 
    border:1px solid red; 
} 
#inner { 
    width:100px; 
} 
</style> 

<div id="outer"> 
    <div id="inner" style="font-size:16px"> 
    Lorem ipsum dolor sit amet, dui orci interdum sagittis, 
    proin metus dui, justo in suspendisse dolor. 
    </div> 
</div> 
<button onclick="checkFontSize()">Check font size</button> 

<script> 
function checkFontSize() { 
    var o = document.getElementById('outer'); 
    var i = document.getElementById('inner'); 
    var fs = parseInt(i.style.fontSize); 
    while(i.offsetHeight > o.offsetHeight) { 
    fs--; 
    i.style.fontSize = fs + 'px'; 
    } 
} 
</script> 

Se comprueba si la altura de la div interior es mayor que el exterior del div; funciona bajo la suposición de que el div interno no tiene relleno (puede modificarlo según sea necesario). Disminuye el tamaño de letra del div interno en 1px hasta que la altura del div interno ya no sea mayor que el div externo.

Podría tener un código como este en la página que muestra el texto del cliente, en cuyo caso podría simplemente envolverlo en una función anónima que se ejecute en un momento anterior. Confío en que puede modificar esto para adaptarse a su implementación.

Answer 2

No he probado esto en HTML, pero que puede tener un bucle y comprobar la propiedad scrollHeight y ver si es más grande de lo esperado, y si es así establecer la fuente de uno apunte más pequeño, y repita hasta que scrollHeight sea lo que espera.

https://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 3

Public Function GetStringSize(ByVal Str As String, _ 
             ByVal FName As String, _ 
             ByVal FSize As Integer, _ 
             ByVal FStyle As System.Drawing.FontStyle) As System.Drawing.SizeF 

Using graphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(New System.Drawing.Bitmap(1, 1)) 
    Dim size As System.Drawing.SizeF = graphics.MeasureString(Str, New System.Drawing.Font(FName, FSize, FStyle, System.Drawing.GraphicsUnit.Pixel)) 
    Return size 
End Using 

End Function