Alternative au nowrap

[Leyry Hynemonth]

Bonjour !

Me voilà en train de faire des recherches pour le boulot.

Pour des questions graphiques, certaines lignes ne doivent pas faire de retour à la ligne, quelque soit leur longueur. Non pas qu'il faille absolument voir tout le titre, mais parce que c'est une liste, et que si un élément fait deux lignes dans une liste, ça le fait pas.

Donc, l'idée géniale, c'était d'utiliser l'attribut nowrap.

Seulement, plus ce qui est à afficher est large, plus ça décale tout ce qui est sur la droite....................................... encore plus à droite,
et il faut utiliser l'ascenseur horizontal. (HHaahhhahaha !!! Hérésie

!!! )

Donc, voilà la question :

Est-ce qu'il existe un argument pour couper le texte quand c'est trop long, et que ça devrais faire un retours à la ligne.
Sachant que je ne souhaite pas que l'endroit de la coupure soit fixe dans le texte, puisque certains ont des écrans plus larges que d'autres.

Merci d'avance pour vos pistes, et ce soir, prévoyez le capitaine de soirée, ou rentrez à pieds !

 

[jeanba3000]

Pour des questions graphiques, certaines lignes ne doivent pas faire de retour à la ligne … parce que c'est une liste, et que si un élément fait deux lignes dans une liste, ça le fait pas.

Cette réflexion idiote fera hurler de rire n'importe quel graphiste sérieux.
Le graphisme doit être au service du contenu, pas l'inverse (quelle que soit la longueur dudit contenu). :heu: :rolleyes: :hein:

Seulement, plus ce qui est à afficher est large, plus ça décale tout ce qui est sur la droite....................................... encore plus à droite,
et il faut utiliser l'ascenseur horizontal. (HHaahhhahaha !!! Hérésie

La preuve si besoin en était que ton idée est mauvaise…:siffle:

Traditionnellement on traite les lignes suivantes d'un même élément d'une liste différemment des éléments eu-mêmes, par exemple un interlignage plus grand entre les éléments et un interlignage plus serré entre les lignes d'un même élément, une puce devant la première ligne de chaque élément comme ça les lignes suivantes d'un élément n'ont pas de puce…

 

[Johannès]

Pourquoi hurler de rire ?

si tu fais, à la demande du client, en appliquant sa charte graphique, un div de 200px de large pour un menu vertical en liste et que le client met un titre du genre "Réunion des colocataires de l'immeuble du 18ème" et qu'il te dit : - ça fait moche sur deux lignes, tu fais quoi ? Je te jure que là tu rigoles pas parce que c'est pas toujours facile à lui faire comprendre

il existe substr en php (voir la doc) qui va couper une chaîne de caractère dans une variable, tu peux t'en servir pour ton titre. en général on définit une longueur et on met ... après

pour ce qui est des largueurs d'écran différentes, la solution consiste à détecter l'écran du visiteur en javascript et d'y associer la fonction voulue...

Bonne année à tous

 

[jeanba3000]

Ça fait que tu lui expliques que ce n'est pas possible autrement. Si ta colonne fait 200 de large, il est évident qu'on ne va pas la foutre en l'air pour qu'un titre à rallonge tienne sur une ligne, donc soit on trouve un autre intitulé plus court, soit on mets sur plusieurs lignes, ce qui est très courant dans les menus verticaux.

Couper l'intitulé à un certain nombre de caractères n'est pas la solution, ça peut rendre incompréhensible l'intitulé, ce qui est évidemment à éviter.

Et si vous n'êtes pas capables de faire comprendre ça au client, changez de client ou changez de métier.

 

[Niconemo]

Je suis d'accord avec le fait qu'exprimer (je cite) “si un élément fait deux lignes dans une liste, ça le fait pas” est bien à hurler de rire. Et ça a tendance à plutôt me suggérer que l'auteur de la charte graphique avait simplement oublié de considérer qu'un élément de liste peut être plus long qu'une ligne…

Maintenant, indépendamment de cette considération, il y a plusieurs façons d'envisager une solution à ta question :

1. Gérer ça en CSS au niveau de l'élément bloc <ul> ou <ol>, ce qui ne sera pas forcément très esthétique sur les fins de ligne : risque de lettre coupée en plein milieu et rien qui signale une coupure.
2. raccourcir le texte de la ligne (en PHP&#8230 en remplaçant la fin par &#8220;(&#8230&#8221;. Dans le CMS que j'utilise, il y a uen extension pour ça, je ne suis pas un expert en PHP&#8230;

Les deux me semblant un pis aller dans ce cas, mais à toi de voir

PS. Désolé pou ma liste : les éléments font plusieurs lignes&#8230;

 

[Johannès]

... l'auteur de la charte graphique ...

ben justement, c'est pas toujours le dev, dès fois c'est le client. moi ça me gêne pas les listes sur deux lignes.

@jeanba :

1. changer de métier => oui c'est faisable mais bon
2. changer de client => j'ai pas trop l'envie ni les moyens d'en perdre un (1 ça peut se faire mais ça fait vite boule de neige)

 

[Leyry Hynemonth]

fera hurler de rire n'importe quel graphiste sérieux.

Un graphiste... Justement, si on en avais un, je serais pas là à vous parler de mes potins de bureau. :hein:

La preuve si besoin en était que ton idée est mauvaise&#8230;

Heureusement, elle n'est pas de moi. Quand je disais que l'idée était géniale, c'était ironique.

Traditionnellement on traite les lignes suivantes d'un même élément d'une liste différemment des éléments eu-mêmes, par exemple un interlignage plus grand entre les éléments et un interlignage plus serré entre les lignes d'un même élément, une puce devant la première ligne de chaque élément comme ça les lignes suivantes d'un élément n'ont pas de puce&#8230;

Regarde ma capture d'écran : il y à un fond dégradé sur la div qui contiens la ligne de texte. Je ne suis pas certain de l'effet final.

Pour comparer à quelque chose que vous connaissez, on est dans la même situation que le Finder lorsqu'on affiche les dossier en vue "Détail".
Vous me direz ce que vous voulez, mais si les titres des dossiers font des retours à la ligne, et que vous trouvez ça normal, là, c'est moi qui hurle le rire. Qu'il y ait un retour à la ligne décalé avec une jolie puce ou pas.

Je me rends compte que ma capture d'écran n'était pas assez explicite, et que le terme de "liste" vous à fait penser à des paragraphes de liste, et pas à une liste de noms de documents, destinées à être ouverts.

Et je suis du même avis que vous : dans tous les autres cas de liste, il faut qu'il y ait un retour à la ligne, avec un décalage.

Gérer ça en CSS au niveau de l'élément bloc <ul> ou <ol>, ce qui ne sera pas forcément très esthétique sur les fins de ligne : risque de lettre coupée en plein milieu et rien qui signale une coupure.

Ça, c'est une réponse à la question posée, (et soulignée) . Et en plus, elle me plaît.
Je vais tester ça, et le proposer.

l'auteur de la charte graphique avait simplement oublié de considérer...

... beaucoup de choses, malheureusement.
Moi qui suis loin d'être graphiste, je m'en rends bien compte. Cependant, il fait des programmes avec des fonctionnalités vraiment intéressantes, et il est respectable pour ça.

Merci beaucoup pour ces premières réponses, et pour le débat, malheureusement né d'un manque de précision de ma part.

 

[jeanba3000]

Nobody's perfect, ton graphiste comme toi ou nous&#8230; Mais généralement on finit par trouver une solution raisonnable car utilisable&#8230; et parce que de toute façon il faut une solution qui marche.

Pour Johannès, c'était plus une démonstration par l'absurde, évidemment on ne va pas changer de métier pour si peu et évidemment on ne va pas lâcher un client, donc il reste le choix de faire ce que fait tout le monde, une solution qui respecte la charte graphique dans sa généralité (la largeur de colonne), et on réussit donc à imposer des menus capables d'afficher des intitulés d'éléments de liste de plus d'une ligne, ce qui aurait du être prévu d'entrée de jeu par le graphiste auteur de la charte graphiste&#8230; CQFD en quelque sorte.

PS : Si tu as besoin d'un graphiste soucieux de l'ergonomie et de la mise en valeur du contenu dans son travail et minutieux dans le détail de ses créations, on peut en parler&#8230;

 

[Johannès]

Il y a peut-être une autre solution : faire défiler le texte avec un évènement onmouseover en javascript

 

[tatouille]

Il y a peut-être une autre solution : faire défiler le texte avec un évènement onmouseover en javascript

walked upon the edge of no escape and laughed

 

[jeanba3000]

Ah oui, splendide solution ça, ainsi on a des menus incompréhensibles et il faut passer la souris dessus pour savoir de quoi ça cause&#8230; chapeau les concepteurs, l'année commence bien

 

[Johannès]

Donc, voilà la question :

Est-ce qu'il existe un argument pour couper le texte quand c'est trop long, et que ça devrais faire un retours à la ligne.
Sachant que je ne souhaite pas que l'endroit de la coupure soit fixe dans le texte, puisque certains ont des écrans plus larges que d'autres.

1 - couper le texte : oui => php ou javascript

2 - suivant la largeur d'écran : oui => javascript

Pour le reste, je ne donnais qu'une solution possible. Il ne s'agit pas ici d'un menu mais d'un titre d'article.

@ jeanba : vu la capture qui fait tout de même 950px de large, je pense que pour faire un titre plus long, faut déjà le faire exprès. Éduquer les rédacteurs est une bonne solution.

@ tatouille : Bonne année, je pense aussi qu'aucune des solutions n'est vraiment bonne, tu m'excuseras mais mon anglais est trop moyen pour comprendre la totalité de ta locution, le sens que j'y donne n'est peut-être pas le bon.