Données de largeur de pIxel rendues pour chaque caractère de la police d'un navigateur

Question

J'ai une colonne de tableau qui doit être limitée à une certaine largeur, disons 100 pixels. Parfois, le texte de cette colonne est plus large que cela et ne contient pas d'espaces. Par exemple :

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

Je voudrais calculer la largeur du texte côté serveur et ajouter une ellipse après le nombre correct de caractères. Le problème est que je n'ai pas de données sur la taille du rendu du texte.

Par exemple, supposons que le navigateur soit Firefox 3 et que la police soit 12px Arial. Quelle serait la largeur de la lettre "a", la largeur de la lettre "b", etc.

Avez-vous des données indiquant la largeur en pixels de chaque caractère ? Ou un programme pour les générer ?

Je pense qu'un astucieux javascript script à usage unique pourrait faire l'affaire. Mais je ne veux pas passer du temps à réinventer la roue si quelqu'un d'autre l'a déjà fait. Je ne suis sûrement pas la première personne à être confrontée à ce problème.

Answer 1

Et pourquoi pas overflow : scroll ?

Answer 2

Ext JS dispose d'un module pour faire cela

TextMetrics Fournit des mesures précises des pixels pour les blocs de texte afin que vous puissiez déterminer exactement la hauteur et la largeur, en pixels, un bloc de texte donné sera.

Je suis sûr qu'il existe d'autres bibliothèques qui le font aussi.

Answer 3

Non seulement cela serait impossible à réaliser côté serveur, mais cela n'aurait aucun sens. Vous ne savez pas quel navigateur votre client utilisera, et vous ne savez pas quels paramètres de police côté client remplaceront les informations de style que vous attribuez à un morceau de HTML. Vous pouvez penser que vous utilisez des pixels de positionnement absolu dans vos propriétés de style, mais le client peut tout simplement les ignorer ou utiliser un plugin pour tout zoomer parce qu'il utilise un écran à haute résolution.

L'utilisation de largeurs fixes est généralement une mauvaise idée.

Answer 4

Très très difficile à faire côté serveur. Vous ne pouvez jamais savoir quelles polices les utilisateurs ont installées, et il y a beaucoup de choses qui affectent l'affichage du texte.

Essayez plutôt ceci :

table-layout: fixed;

Cela permettra de s'assurer que la table n'est jamais plus grande que la taille que vous avez spécifiée.

Answer 5

Voici la solution côté client que j'ai trouvée. Elle est assez spécifique à mon application mais je la partage ici au cas où quelqu'un d'autre rencontrerait le même problème.

Il fonctionne un peu plus rapidement que ce à quoi je m'attendais. Et il suppose que le contenu des cellules est uniquement du texte - tout formatage HTML sera effacé lors du processus de raccourcissement.

Il nécessite 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();
      }

    }
  });

}