Datos de ancho de píxel representados para cada carácter en la fuente de un navegador

Question

Tengo una columna de tabla que debe limitarse a un cierto ancho, digamos 100 píxeles. A veces el texto en esa columna es más ancho que esto y no contiene espacios. Por ejemplo:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

Me gustaría calcular el ancho del texto del lado del servidor y agregar puntos suspensivos después del número correcto de caracteres. El problema es que no tengo datos sobre el tamaño representado del texto.

Por ejemplo, suponiendo que el navegador era Firefox 3 y la fuente era 12px Arial. ¿Cuál sería el ancho de la letra & Quot; a & Quot ;, el ancho de la letra & Quot; b & Quot ;, etc.?

¿Tiene datos que muestran el ancho de píxel de cada carácter? ¿O un programa para generarlo?

Creo que un script javascript inteligente de una sola vez podría hacer el truco. Pero no quiero pasar tiempo reinventando la rueda si alguien más ya ha hecho esto. Seguramente no soy la primera persona en enfrentar este problema.

Answer 1

Esto no solo sería imposible de hacer en el lado del servidor, sino que tampoco tendría sentido. No sabe qué navegador utilizará su cliente, y no sabe qué configuración de fuente en el lado del cliente anulará la información de estilo que asigne a una pieza de HTML. Puede pensar que está utilizando píxeles de posicionamiento absoluto en sus propiedades de estilo, pero el cliente podría simplemente ignorarlos o utilizar algún complemento para hacer zoom en todo porque el cliente utiliza una pantalla de alta resolución.

Usar anchos fijos generalmente es una mala idea.

Answer 2

¿Qué tal desbordamiento: desplazamiento?

Answer 3

Ext JS tiene un módulo para hacer precisamente eso

  

TextMetrics   Proporciona mediciones precisas de píxeles.   para bloques de texto para que puedas   determinar exactamente qué tan alto y ancho,   en píxeles, un bloque de texto dado   ser.

Estoy seguro de que hay otras bibliotecas disponibles que también lo hacen.

Answer 4

Muy, muy difícil de hacer en el lado del servidor. Nunca puede saber qué fuentes han instalado los usuarios, y hay muchas cosas que afectan la visualización del texto.

Pruebe esto en su lugar:

table-layout: fixed;

Eso asegurará que la tabla nunca sea más grande que el tamaño que especificó.

Answer 5

Aquí está mi solución del lado del cliente que se me ocurrió. Es bastante específico para mi aplicación, pero lo comparto aquí en caso de que alguien más se encuentre con el mismo problema.

Funciona un poco más rápido de lo que esperaba. Y supone que el contenido de las celdas es solo texto: cualquier formato HTML se borrará en el proceso de acortamiento.

Requiere jQuery.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 6

Esto es esencialmente imposible de hacer en el lado del servidor. Además del problema de las personas que tienen diferentes fuentes instaladas, también tiene kerning (la letra & Quot; f & Quot; ocupará una cantidad diferente de espacio dependiendo de lo que esté al lado) y las opciones de representación de fuentes (¿está cleartype activado? " fuentes grandes " ;?).

Answer 7

No hay nada que pueda hacer del lado del servidor para calcularlo. Todo con lo que tiene que trabajar es con la cadena de identificación del navegador, que puede o no indicarle con precisión el sistema operativo y el navegador del usuario. También puede & Quot; preguntar & Quot; (a través de una etiqueta de fuente o CSS) para una determinada fuente que se utilizará para mostrar el texto, pero no hay garantía de que el usuario tenga esa fuente instalada. Más allá de eso, el usuario podría tener una configuración de DPI diferente en el nivel del sistema operativo, o podría haber hecho el texto más grande o más pequeño con la función de zoom del navegador, o podría estar usando su propia hoja de estilo por completo.

Answer 8

Podrías poner el texto en un espacio invisible y leer que abarque un ancho, pero básicamente parece que alguien intenta sabotear tu sitio, y por lo tanto, recomendaría prohibir las publicaciones con palabras más largas que una determinada lentitud, por ejemplo 30 caracteres sin espacios (permitiendo que los enlaces sean más largos! -)

- pero el enfoque simple es poner un elemento de bloque dentro de la celda de la tabla:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

¡Esto detendrá efectivamente el desorden de tablas! o]

Answer 9

Si está de acuerdo con que esto no funcione para Firefox, ¿por qué no usar CSS? Haga que la tabla con diseño de tabla: fija, haga que la columna en cuestión tenga desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; espacio en blanco: nowrap.

Answer 10

http://www.css3.info/preview/text-overflow/

Esta es una nueva función de css3.

Answer 11

Algunos usuarios tienen una configuración de fuente predeterminada más grande o más pequeña. No puedes hacer esto en el servidor. Solo puede medirlo una vez que el navegador ha procesado la página.

Answer 12

Dado que el tamaño de fuente se puede cambiar fácilmente en el lado del navegador, su cálculo del lado del servidor se invalida muy fácilmente.

Una solución rápida del lado del cliente sería diseñar sus celdas con un atributo de desbordamiento:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

Una mejor alternativa es truncar las cadenas del lado del servidor y proporcionar una información sobre herramientas de JavaScript simple que pueda mostrar la versión más larga. Un & Quot; expandir & Quot; el botón también puede ayudar a mostrar el resultado en una superposición div.

Answer 13

Lo que quieres es el < wbr > etiqueta. Esta es una etiqueta HTML especial que le dice al navegador que es aceptable romper una palabra aquí si es necesario un ajuste. No inyectaría en el texto para el almacenamiento persistente porque luego está acoplando sus datos con dónde / cómo mostrará esos datos. Sin embargo, es perfectamente aceptable inyectar las etiquetas del lado del servidor en un código centrado en la vista (como con una etiqueta JSP o posiblemente en el controlador). Así es como lo haría. Simplemente use alguna expresión regular para encontrar palabras que tengan más de X caracteres e inyecte esta etiqueta cada X caracteres en tales palabras.

Actualización: estaba mirando un poco y parece que wbr no es compatible con todos los navegadores. En particular, IE8. Sin embargo, no lo he probado yo mismo. Tal vez podría usar desbordamiento: oculto como una copia de seguridad o algo así.