Une 'ligne veuve' c'est LAID

Salut !

Dans les sites a contenu dynamique, il n'est pas rare que la derniere ligne d'un paragraphe se retrouve toute seule juste en dessous d'une image floatée, ce qui est fort laid.

Je me disais qu'il existe peut etre des solutions ultra sophistiquees en JS (jQuery peut etre?) qui se chargent de .. faire quelquechose a ce sujet ?

Salut,

Ta question est un peu étrange: on peut (presque) tout faire en js, encore faut-il savoir… quoi demander

Premier écueil qui me vient en tête: si ton conteneur éditorial est fluide (i.e non-fixe), il me semble compliqué de faire quelque chose lorsque le fenêtre est redimensionnée / le corps du texte est agrandi (ou réduit) par l'internaute.

Si on admet toutefois que tu arrives à repérer de manière certaine une ligne orpheline sous ton image floatée, que souhaites-tu demander à ton javascript?

Bah imagine une grosse image floatée a gauche et une gros bloc de texte a sa droite, la derniere ligne du texte vient se place sous l'image. Ce JS ramenerait cette ligne avec le reste du bloc, un peu comme si l'image "continuait" un peu plus vers le bas.

Bonjour,

Il est possible de faire cela sans JS, simplement en donnant au texte une marge de la taille de l'image.

Par contre cela comptera pour tout le texte.

Euh desole j'ai pas compris.

Questions:
- Les images ont-elles des valeurs variables?
- Est-ce qu'il y a (potentiellement) plus d'un paragraphe après une image?
- Est-ce que le deuxième paragraphe doit repasser sous l'image?
- Est-ce que le texte du premier paragraphe (ou de tout paragraphe commençant à droite de l'image) peut passer à la ligne si au moins deux lignes passent sous l'image?

Pour les cas de figure relativement simples, on peut gérer ça en CSS directement (avec un contexte de formatage). Pour des choses très précises par contre, ça risque d'être coton, même en JavaScript.
Modifié par fvsch (22 Mar 2011 - 14:32)

fvsch : alors dans l'ordre oui (dimensions variables), oui (peut y avoir d'autres paragraphes en dessous), oui (le paragraphe suivant doit repasser sous l'image) et oui (deux lignes "orphelines" c'est pas trop laid donc ca va).

OK.

Alors en CSS pur tu peux:
- Avoir un bloc de texte (N paragraphes) à droite d'une image flottante, avec la largeur du bloc qui prend l'espace laissé par le flottant (via un overflow:hidden sur un élément DIV par exemple).
- Faire que chaque paragraphe qui commence à droite d'un élément flottant reste tout entier à droite (via un overflow:hidden sur des éléments P par exemple).
Le deuxième cas de figure n'est pas forcément heureux.

Au delà de ça, pas de solution CSS. Tu peux éventuellement utiliser du JavaScript, mais je ne connais pas de script dédié à ça donc il faudra peut-être développer quelque chose de personnalisé (je recommande de vérifier les hauteurs et positions des éléments plutôt que de compter des caractères...).

1ere solution : tout le texte restera collé a droite et rien ne passera sous l'image a gauche non ?

2eme solution : ca sonne bien, pourquoi tu dis que ce n'est pas forcement heureux ?

apericube a écrit :
1ere solution : tout le texte restera collé a droite et rien ne passera sous l'image a gauche non ?

Oui.

apericube a écrit :
2eme solution : ca sonne bien, pourquoi tu dis que ce n'est pas forcement heureux ?

Mettons que ta photo fait 5 lignes de texte en hauteur. Tu as un premier paragraphe de 4 lignes, un deuxième paragraphe de 8 lignes, et un troisième de 2 lignes. Dans ce cas de figure, si les paragraphes sont en overflow:hidden, le deuxième paragraphe va rester entièrement collé à droite, donc ça fait 7 lignes de texte avec un blanc à gauche. Puis le dernier paragraphe se cale à gauche. Visuellement, c'est pas terrible.

Ah ok je vois, bah c'est deja pas mal. Je me demande comment font les gens face a ce probleme qui parait plutot banal..