Insertion d'un long mot dans un espace d'en-tête limité

Question

Dans mon site Web, je présente un tableau de base qui contient des éléments d'action pour chaque ligne.

X et Y doivent être remplacés par deux mots qui sont des marques déposées et les mots sont en fait longs.

Dites X est "YourHoroscope" et Y est "YearForecast".

Quelles sont les meilleures façons de mettre ces en-têtes de colonne avec élégance sans faire en sorte que le tableau semble bizarre avec des colonnes allongées pour les petites icônes.

Answer 1

Eh bien, je pense que vous avez quelques choix:

1. Si vous avez une icône pour accompagner les marques, vous pouvez essayer à la place des étiquettes et faire apparaître le texte sous forme d'infobulle lorsque l'utilisateur survole les en-têtes d'icônes.
2. Selon la largeur, vous pouvez y mettre le texte tel quel, mais avec des points de suspension, encore une fois avec une info-bulle si le texte est coupé
3. Vous pourriez mettre des étiquettes verticales, ce qui peut s'avérer difficile à lire

4. Comme pour les anciens jours, vous pouvez mettre des en-têtes inclinés, qui sont la même idée que les en-têtes verticaux, mais offrent une meilleure lisibilité:

   

Answer 2

Je ferais une icône qui représente X et Y qui en vol stationnaire montrerait une info-bulle avec le nom. De cette façon, vous pouvez conserver votre style de colonne mince.

Cela pourrait ressembler à ceci:

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Answer 3

Un tableau est-il le meilleur moyen de présenter ces données? Pouvez-vous donner un exemple de ce qui serait dans les deux premières colonnes? Vous pourrez peut-être présenter les choix X et Y sous chaque entrée de données plutôt que dans leurs propres colonnes.

Vous pouvez utiliser des icônes pour les X et Y et placer les noms de marque dans l'attribut HTML "title" afin que les noms soient visibles au survol de la souris et lus par un lecteur d'écran. Ou vous pouvez utiliser les mots de marque et utiliser une taille de police légèrement plus petite. Arial/Helvetica est une police plus étroite que Verdana et prend moins d'espace, alors gardez la police que vous utilisez en considération. Vous pouvez vous renseigner sur les polices sur le Graphic Design Stack Exchange.