26786 sujets

CSS et mise en forme, CSS3

Bonjour,

Comme d'habitude, avant d'écrire, j'ai cherché (justify) sur le forum sans rien trouver.

Les longs mots passent très mal en justification. J'ai l'exemple (dommage qu'on ne puisse poster une capture d'écran) d'un code en kbd étirant outrancièrement la phrase, pour cause de justification.

Est-ce qu'il existe une règle CSS permettant de gérer ce genre de choses, à la manière de l'overflow:auto qui ajoute conditionnellement une barre de défilement ?
Je pense à un text-align:left mais je ne le veux pas en ligne (pas de span style="text-align:left", donc).

Merci par avance
Bonjour,

S'il s'agit d'un problème de justification concernant le problème des listes à puces sur ton blog http://blog.empyree.org/, je crains qu'il n'y ait pas de réponse satisfaisante.

En texte justifié, les espaces entre tous les mots pouvant être contenus sur une ligne sont ajustés de manière à ce que les mots occupent toute la ligne. Plus les lignes sont courtes, moins elles peuvent contenir de mots, et plus les espaces intermots sont susceptibles d'être importants, selon la longueur des mots.

La plupart du temps, dans le cas de listes ou de cellules de tableau, je mets les lignes en alignement à gauche, notamment parce que dans le cas de listes, de nombreux items de liste ne vont pas jusqu'en fin de ligne, et l'alternance de paragraphes justifiés et d'autres alignés à gauche est tout à fait incohérent et inesthétique.
En thérie, il existe un mode de césure HTML des mots longs, quelque-soit la justification. Il se trouve qu'il est inutilisable:
- parce qu'il suppose que l'auteur identifie chaque mot où il autorise une césure, et qu'il y place un caractère spécial : le tiret sécable optionnel (­)
- parce que ce caractère est vraiment trop mal implémenté par les navigateurs. Certains l'ignorent, d'autres affichent le tiret dans tous les cas, que le mot fasse l'objet d'une césure ou pas...

Il me semble avoir donné plus de détail dans un autre fil de ce forum... mais je ne sais plus où Smiley cligne

<![CDATA[

Je n'ai pas retrouvé où il me semblait en avoir parlé. A défaut, voir la page de test classique sur le soft hyphen :
http://www.clagnut.com/sandbox/softhyphen/

]]>
Modifié le 07 Feb 2005 - 15:49
Je pensais à des fonctions comme wordwrap() qui selon les cas peuvent pallier à qql soucis de ce type.
La fonction en question permet par exemple de renvoyer à la ligne tous les n caractères, mais ne laisse pas préjuger de l'endroit où un mot très long sera coupé et renvoyé à la ligne... Ca peut être embêtant quand même.
Comme coder une fonction qui serait capable de gérer les césures... C'est surement faisable, mais pas si simple Smiley ohwell
Salut,
C'est avec beaucoup de retard que je réponds, vous m'en voyez désolé…
Olivier a écrit :
poster une capture d'écran en utilisant le petit formulaire d'upload.
Où est-il ?

Thierry a écrit :
Dans le cas de listes ou de cellules de tableau, je mets les lignes en alignement à gauche. L'alternance de paragraphes justifiés et d'autres alignés à gauche est tout à fait incohérent et inesthétique.

Je vais effectivement envisager la chose. Une ligne de CSS et tout est simple. Après tout, la justification se justifie (c'est le cas de le dire) pour des long textes, qui n'ont que rarement leur place dans des tableaux. Et si c'est le cas, alors autant entourer ledit long texte dans par un p.

La réponse de Laurent Denis sur la césure est très intéressante. Je me demande ce qu'il en est des justifications CSS3, que je n'ai pas compris entièrement.
Olivier a écrit :
Salut David,
tu peux poster une capture d'écran si tu veux, en utilisant le petit formulaire d'upload.


Salut,

Je voulais le faire (avec beacoup de retard), mais mon jpg est refusé.
Dans cet esprit, j'ai cherché un script, javascript ou php, qui fasse de la césure (hyphenation) simplement sur un bloc de texte en français ou en anglais à partir d'une liste de mots.
Avec PHP cela semble possible, mais le mauvais support du code de césure optionnelle dans la jungle des navigateurs le rendant inutile, il faudrait faire un retour à la ligne forcé (un méchant <br/ ) qui se comportera très mal avec un changement de taille de texte.
En javascript on pourrait avoir une fonction qui place des retours de ligne à des points précis pour équilibrer des lignes justifiées en CSS, mais bonjour l'algorithme (il faudrait compter le nombre de caractères et d'espace faire une coupure savante à partir des différentes possibilités sur un mot, comparer la plus effective au nombre de caractères/espaces résultants, et ce ligne par ligne) De plus en typo généralement on joue aussi sur l'espace entre les lettres pour fignoler : bonjour letter-spacing et word-spacing sur un span…
On pourrait aussi faire tout à la main (malgré la technologie on en revient toujours au même Smiley cligne ) mais toujours sans support pour le changement de taille.

Bref un vrai casse-tête !
Modifié par matgorb (25 Jan 2006 - 09:14)
Mise à jour tu test de clagnut :
Mac OS X
—Safari 2.0.3 OK
—Opera 8.51 OK
—IE 5.2 Not OK (anti-dis-est-ab-lish-ment-arian-ism)
—Firefox 1.5 Not OK (antidisestablishmentarianism)
—Camino 1.0b2 Not OK (comme Firefox)
—iCab 3 beta Not OK (antidisestablishmentarianism)
—OmniWeb 5.1.2 Semi OK (coupe mais met des tirets façon Safari 1.2)

Windows XP
—IE 6 OK (et ouais !)
—Opera 8.51 OK
—Firefox 1.5 Not OK (comme sur Mac)


Linux (CentOS)
—Firefox 1.5 Not OK
—Konqueror 3.3.1 Not OK (anti-dis-est-ab-lish-ment-arian-ism)
—J'imagine que Opera 8.51 doit être OK, Je ne l'ai pas sous la main pour tester.

Pour une fois Firefox est le mauvais élève (Mozilla est pareil) mais il doit être possible de soumettre ça à la fondation, quand à Konqueror, ils doivent pouvoir s'inspirer de Safari.
Modifié par matgorb (25 Jan 2006 - 10:10)
matgorb a écrit :
Pour une fois Firefox est le mauvais élève (Mozilla est pareil) mais il doit être possible de soumettre ça à la fondation


Ce bug est aussi vieux que Mozilla puisqu'il est signalé depuis 1999. Mais sa solution est loin d'être simple (il pose des problèmes très complexes selon la langue concernée) et nécessite en fait la remise à plat d'une solide portion de code, qu'aucun des développeurs n'est à même d'assumer actuellement (voir le dernier commentaire de David Baron)
Modifié par Laurent Denis (25 Jan 2006 - 10:30)
Et apparemment il faudra attendre la nouvelle version du Gecko, prévu pour début 2007, en attendant les petits gars à Mozilla sont prêt à intégrer un patch sur le 1.8 si qq a les compétences…
Modifié par matgorb (25 Jan 2006 - 10:35)