6 votes

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

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.

0voto

Diodeus Points 67946

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

0voto

Soviut Points 26384

La taille de la police pouvant être facilement modifiée du côté du navigateur, votre calcul côté serveur est rendu invalide très facilement.

Une solution rapide côté client serait d'ajouter un attribut de débordement à vos cellules :

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

Une meilleure solution consiste à tronquer vos chaînes de caractères côté serveur et à fournir une simple infobulle en javascript qui peut afficher la version longue. Un bouton "expand" peut également être utile pour afficher le résultat dans une div de superposition.

0voto

Dustin Points 48

Ce que vous voulez, c'est la balise <wbr>. Il s'agit d'une balise HTML spéciale qui indique au navigateur qu'il est acceptable de rompre un mot ici si un retour à la ligne est nécessaire. Je n'injecterais pas les balises dans le texte pour un stockage permanent, car vous coupleriez alors vos données avec l'endroit et la manière dont vous les afficherez. Cependant, il est parfaitement acceptable d'injecter les balises côté serveur dans un code centré sur la vue (comme une balise JSP ou éventuellement dans le contrôleur). C'est ainsi que je procéderais. Il suffit d'utiliser une expression régulière pour trouver les mots qui ont une longueur supérieure à X caractères et d'injecter cette balise tous les X caractères dans ces mots.

Mise à jour : J'ai fait quelques recherches et il semble que wbr ne soit pas supporté par tous les navigateurs. Plus particulièrement, IE8. Je ne l'ai pas testé moi-même. Peut-être que vous pourriez utiliser overflow:hidden comme sauvegarde ou quelque chose comme ça.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X