Données de largeur d'image pixel restituées 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 et ne contient aucun espace. Par exemple:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

Par exemple, en supposant que le navigateur est Firefox 3 et que la police est 12px Arial. Quelle serait la largeur de la lettre & "; Un &" ;, 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 le générer?

Je pense qu'un script javascript unique et intelligent pourrait faire l'affaire. Mais je ne veux pas perdre de 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 à affronter ce problème.

Answer 1

Cela ne serait pas seulement impossible à faire côté serveur, cela n’aurait également aucun sens. Vous ne savez pas quel navigateur votre client va utiliser et vous ne savez pas quels paramètres de police côté client remplaceront les informations de style que vous attribuez à un élément HTML. Vous pensez peut-être que vous utilisez des pixels de positionnement absolu dans vos propriétés de style, mais le client peut simplement les ignorer ou utiliser un plugin pour tout zoomer, car le client utilise un écran avec une résolution élevée.

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

Answer 2

Qu'en est-il du débordement: défilement?

Answer 3

Ext JS dispose d'un module permettant de faire exactement cela

  

TextMetrics   Fournit des mesures de pixels précises   pour des blocs de texte afin que vous puissiez   déterminer exactement à quelle hauteur et large,   en pixels, un bloc de texte donné sera   être.

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

Answer 4

Très très difficile à faire côté serveur. Vous ne pouvez jamais savoir quelles polices les utilisateurs ont installées et de nombreux facteurs affectent l'affichage du texte.

Essayez plutôt ceci:

table-layout: fixed;

Cela garantira 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 proposée. C'est assez spécifique à mon application, mais je le partage ici au cas où quelqu'un d'autre rencontrerait le même problème.

Cela fonctionne un peu plus vite que prévu. Et cela suppose que le contenu des cellules ne soit que du texte - tout formatage HTML sera effacé lors du processus de raccourcissement.

Cela 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();
      }

    }
  });

}

Answer 6

Cela est essentiellement impossible à réaliser côté serveur. Outre le problème des personnes ayant différentes polices installées, vous avez également le crénage (la lettre & "; F &"; Occupera une quantité différente d'espace en fonction de ce qui se trouve à côté) et des options de rendu de police. (est-ce que cleartype est sur? & "; grosses polices &";?).

Answer 7

Vous ne pouvez rien faire du côté serveur pour le calculer. Tout ce que vous devez utiliser est la chaîne d'identification du navigateur, qui peut ou non vous indiquer avec précision le système d'exploitation et le navigateur de l'utilisateur. Vous pouvez également & Quot; demander à & Quot; (via une balise de police ou CSS) pour qu’une certaine police soit utilisée pour afficher le texte, mais rien ne garantit que cette police est installée par l’utilisateur. Au-delà de cela, l'utilisateur pourrait avoir un paramètre DPI différent au niveau du système d'exploitation, ou pourrait agrandir ou réduire le texte avec la fonction de zoom du navigateur ou utiliser sa propre feuille de style.

Answer 8

Vous pouvez placer le texte dans une étendue invisible et lire une largeur qui est large, mais cela ressemble à une personne qui tente de saboter votre site. Je recommanderais donc d'interdire les posts contenant des mots plus longs qu'un certain lenth, par exemple 30 caractères sans espaces (permettant aux liens d'être plus longs! -)

- mais l'approche la plus simple consiste à insérer un élément de bloc dans la cellule de tableau:

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

Ceci arrêtera efficacement l'encombrement de la table! o]

Answer 9

Si cela ne vous convient pas, pourquoi ne pas utiliser simplement CSS? Avoir la table avec table-layout: corrigé, avoir la colonne en question ont débordement: caché; débordement de texte: points de suspension; espace blanc: maintenant.

Answer 10

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

C’est une nouvelle fonction de css3.

Answer 11

Certains utilisateurs ont des paramètres de police par défaut plus grands ou plus petits. Vous ne pouvez pas faire cela sur le serveur. Vous ne pouvez le mesurer que lorsque le navigateur a rendu la page.

Answer 12

Etant donné que la taille de la police peut être facilement modifiée du côté du navigateur, votre calcul côté serveur devient très invalide.

Un correctif rapide du côté du client consisterait à styliser vos cellules avec un attribut de débordement:

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

Une meilleure alternative consiste à tronquer le côté serveur de vos chaînes et à fournir une simple info-bulle javascript permettant d'afficher la version la plus longue. Un & Quot; développer & Quot; bouton peut également aider que pourrait afficher le résultat dans un div superposition.

Answer 13

Ce que vous voulez, c'est le < wbr > étiquette. Il s'agit d'une balise HTML spéciale qui indique au navigateur qu'il est acceptable de casser un mot ici si un retour à la ligne est nécessaire. Je n'injecterais pas le dans le texte pour le stockage persistant, car vous coupleriez alors vos données avec où / comment vous allez afficher ces données. Cependant, il est parfaitement acceptable d’injecter les balises côté serveur dans un code centré sur la vue (comme avec une balise JSP ou éventuellement dans le contrôleur). C'est comme ça que je le ferais. Il suffit d’utiliser une expression régulière pour trouver des mots plus longs que X et injecter cette balise tous les X caractères dans ces mots.

Mise à jour: je faisais quelques recherches et il semble que wbr n’est pas pris en charge par tous les navigateurs. Plus particulièrement, IE8. Je n'ai cependant pas testé cela moi-même. Vous pourriez peut-être utiliser overflow: caché comme sauvegarde ou quelque chose comme ça.