18041 sujets

Questions générales et questions de débutants

Coupe des mots dans un menu

Bonjour

Confronté à un problème de mot très long dans un menu en colonne de largeur fixe qui, du coup, ne supporte plus l'agrandissement de la taille de police sans générer une aberration désagréable, j'ai trouvé une petite parade simple et efficace :


<li>Anticonstitu<span class="coupe"> </span>tionnellement</li>

span.coupe {
	font-size: 1px;
	letter-spacing: -1em;
}


Les quelques tests réalisés montrent que l'affichage graphique se fait sans rupture du mot et que l'ami Jaws semble glisser assez souplement sur l'espace fictif. En revanche l'affichage sans CSS laisse évidemment apparaître l'espace. D'autre part, il est clair que d'un point de vue sémantique une telle déstructuration du mot lui fait perdre tout son rôle.

Une alternative pourrait aussi être envisageable par JS, où il n'y aurait pas d'espace Html dans le span et où JS est utilisé pour en créer un...

Qu'en pensez-vous ?
j'aime beaucoup, bonne idée. Bon le cas de figure est assez exeptionnel mais pratique à savoir quand même... j'ai testé avec home page reader et ça marche aussi.

+1
Anticonstitutionnellement est assez exceptionnel, oui, c'est sûr, j'ai seulement mis ça pour l'exemple, mais tout mot autour de 15-20 lettres peut poser problème, genre "environnementaux" qui après 2 agrandissements explose la colonne Smiley biggol
Ceci dit, c'est vrai que ça concerne très peu de cas, et donc que les désagréments pourraient être sensiblement inférieurs aux bénéfices.
Il me semble qu'il y a également des possibilités avec certains caractères unicode ou des entités HTML correspondantes. Le soft hyphen, le zero-width space, des choses comme ça. Mais l'implémentation par les navigateurs reste problématique.
Administrateur
Sopo a écrit :
Malheureusement, Firefox n'a pas l'air de comprendre Smiley decu

Ah oui c'est vraiment dommage car le principe fonctionne très bien sur IE :


p {
width: 10em;
}

<p>Hoplaaaaaaaaaaa&shy;aaaaaaaaaaaaaaaa</p>


upload/1-shy1.png

upload/1-shy2.png

Ah et un autre petit problème :
a écrit :
"dis&shy;cretion&shy;ary", Google treats it the same way as "dis cretion ary"

Modifié par Raphael (29 Dec 2006 - 15:13)
Sur Opera, ça fonctionne aussi.

Remarque, si c'est pour l'agrandissement de police, ça n'a pas grand intérêt si on utilise l'effet de zoom proposé par Opera et IE7.

Question HS : comment est-ce que tu as affiché l'entité html, Raphael ? La mienne s'est fait bouffer tout à l'heure Smiley sweatdrop

Edit : c'est un peu con de la part de Google, ou c'est moi qui me plante ?
Modifié par Sopo (29 Dec 2006 - 15:21)
Sujet clos
Aller à