[Résolu] Problème de justification de texte

Bonjour,

Je voudrais simuler l’écriture comme dans un livre et avoir, quand un paragraphe n'est pas terminé à la fin d'une page, une justification gauche ET droite.
Pour être plus clair, voici une capture d'écran de la zone qui pose problème.



Sur la fin de la première page, j'aimerais que "sapien" soit justifié à gauche et "habitant" à droite.
Savez-vous s'il existe des solutions en CSS ou autre ?

Un grand merci pour cette épine dans mon pied,

Marc
Modifié par MarcoChou (30 Apr 2012 - 15:31)

Bonjour,

pour simplifier ton problème, il faut déjà savoir que tu n'as aucun moyen en css pour cibler uniquement la dernière ligne.

De plus, si ton texte est aligné à droite OU à gauche, il ne s'agit pas de justification mais de ferrage. La justification signifie justement que le texte est aligné des deux côtés : tu peux obtenir cet effet avec text-align:justify , mais ça s'appliquera à tout ton paragraphe et pas seulement à la dernière ligne d'une page.

J'espère t'avoir un peu aidé, dis-moi si j'ai fait fausse route !
Bon courage

Bonjour,
je ne sais pas s'il existe une manière de forcer la justification d'une seule ligne de texte, mais tes raisons même posent problèmes.

Si tu souhaites faire ce que tu as décris pour «simuler l'écriture dans un livre» c'est que tu souhaites simuler la mise en page d'un livre très mal mis en page. ^^

La vraie solution de ce que tu souhaites sera possible avec les regions en css3, mais le support est loin d'être prêt… http://caniuse.com/#feat=css-regions

En attendant, mieux vaut avoir une bonne mise en page et faire moins «livre» que bricoler de très mauvaises mise en page

Merci beaucoup pour ta réponse, je sentais bien que je n'étais pas "carré" sur la terminologie.
Voici un bout de code :

...in facilisis.</p>
<p class="para2">e at lectus facilisis lobortis. Vivamus pellentesque quam et urna ultrices vestibulum. Aliquam pellentesque suscipit mauris, at dignissim sapien mattis nec. Pellentesque habitant</p>
</div>
<div class="page">
<p class="para3">morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed semper posuere tellus, ac commodo metus eleifend vel. Nulla tincidunt viverra tortor a viverra. Sed bibendum...

Et un bout de CSS :

p.para2 {
	text-align: justify;
	text-indent:3em;
}
p.para3 {
	text-align: justify;
}
div.page {
	width: 380px;
	height: 660px;
	padding: 20px 50px 20px 50px;
	margin : 20px auto;
	position: relative;
	font-family: "Times New Roman",Georgia,Serif;
	font-size: 11pt;
	line-height: 22px;
}

Merci encore pour votre aide...

Marc

Le problème est ton markup, tu coupes ton paragraphe au milieu en créant artificiellement 2 paragraphes séparés en plus par une div page, alors que c'est un seul et unique paragraphe. Comme je l'ai déjà dit, ce sera possible de scinder visuellement un paragraphe dans deux blocs grâce aux régions, mais en attendant ce n'est pas possible.

Merci beaucoup...
Désolé pour le deuxième message mais j'étais en train de le rédigé quand tu as répondu.
Je vais donc attendre que cela soit possible "proprement"...

Merci encore,

Marc

Bonjour,

si tu veux justifier la dernière ligne de ton paragraphe cela sera possible en css3 comme ceci :

p{text-align:justify;text-align-last:justify}

http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

En attendant que les navigateurs l’implémente il te faudra passer par des solutions du genre :

p{text-align:justify}

p:after {
    content: " _________________________________________________________________________________________";
    line-height: 0;
    visibility: hidden
}