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

C'est essentiellement impossible à faire du côté du serveur. Outre le fait que les utilisateurs ont installé des polices différentes, il faut également tenir compte du crénage (la lettre "f" occupera un espace différent selon ce qui se trouve à côté d'elle) et des options de rendu des polices (la fonction "cleartype" est-elle activée ?)

Answer 2

Vous pourriez mettre le texte dans une travée invisible et lire la largeur de cette travée, mais en gros, cela ressemble à quelqu'un qui essaie de saboter votre site, et je recommanderais donc d'interdire les messages contenant des mots plus longs qu'une certaine longueur, par exemple 30 caractères sans espaces (ce qui permet aux liens d'être plus longs !-).

-- mais l'approche la plus simple consiste à placer un élément de bloc à l'intérieur de la cellule du 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>

Cela mettra fin à l'encombrement de la table !o]

Answer 3

Il n'y a rien que vous puissiez faire côté serveur pour le calculer. Tout ce que vous avez à faire est de travailler avec 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 "demander" (par le biais d'une balise de police ou d'une feuille de style en cascade) qu'une certaine police soit utilisée pour afficher le texte, mais rien ne garantit que cette police soit installée chez l'utilisateur. En outre, l'utilisateur peut avoir un paramètre DPI différent au niveau du système d'exploitation, ou peut avoir agrandi ou réduit le texte avec la fonction zoom du navigateur, ou encore utiliser sa propre feuille de style.

Answer 4

Si vous êtes d'accord pour que cela ne fonctionne pas avec FireFox, pourquoi ne pas simplement utiliser les CSS ? Placez le tableau en mode table-layout:fixed et la colonne en question en mode overflow:hidden;text-overflow:ellipsis ; white-space:nowrap.

Answer 5

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

Il s'agit d'une nouvelle fonction de css3.