Discussion :

[Lareine]

Bonjours

Alors voilà J'ai plusieur ligne avec un objet Flash en fin de chaque ligne.

Et je voudrais faire une justification de l'ensemble de la ligne à gauche
et à droite tout en ayant un saut de ligne à la fin de la balise object...

Le problème c'est que text-align:justify ne fonctionne que sur un
paragraphe, et pas sur plusieur lignes ....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Mon texte de Mars, que je veux justifier + balise object:  <object></object><br />
Mon texte de Mai, que je veux justifier + balise object:  <object></object><br />
Mon texte de Juin, que je veux justifier + balise object:  <object></object><br />
Mon texte de Juillet, que je veux justifier + balise object:  <object></object><br />

Actuellement je justifie en rajoutant des  
http://ippai.free.fr/ippaifm.php
mais ça n'est pas une solutions très propre ...

Comment faire donc pour Justifier même après un Retour à la Ligne ?

Merci d'avance...

Edit: je me suis donc répondue à moi même

Après avoir fait des recherches dans le O'Reilly Référence CCS
Il existe bien une solution dont voici les 3 que j'ai testé et qui
fonctionne sous Internet Explorer depuis la version 5:



Je détaille les 3 versions...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:distribute-all-lines; }

text-justify:distribute-all-lines;
Justifie de façon presque égale les Mots et les Espaces même sur une ligne.
Fait partie des recommandations du W3C pour le CSS3.
C'est la fonction la plus rapide, celle que j'ai choisie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:newspaper; }

text-justify:newspaper;
Justifie avant tout les Espaces et un petite peut les mots même sur une ligne.
Fait aussi partie des recommandations du W3C pour le CSS3.
Mais Ralentie la justification lors de l'ouverture de la page
et n'est pas meilleur que l'autre visuellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:inter-cluster; }

text-justify:inter-cluster;
Justifie Uniquement les Espaces, même sur une ligne.
Fait aussi partie des recommandations du W3C pour CSS3.
Ralentie la justification lors de l'ouverture de la page
et n'est pas très bon visuellement

Partant du principe que <p> est déjà justifié avec text-align:justify;
Dans mon code XHTML, j'utilise par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p style="text-justify:distribute-all-lines;">
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
Mon texte à justifier malgrès le retour à la ligne: <object><object><br /> 
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
</p>

Ses 3 fonctions ne sont donc pour l'instant suporté que par
Internet Explorer, autre revers de la médaille text-justify
prend pas mal de ressource processeur, donc ralentit de façon
significative l'affichage de la page, pour un résultat pas
forcement très agréable niveau lisibilité .

Donc pour rester, plus rapide, plus lisible comme me le sugerrais kaiser59,
et compatible avec les autres navigateurs comme me la conseillé Kerod.

J'ai finalement préférée:

Tout simplement, centrer l'ensemble du paragraphe.

Et Aligner la longuer de toutes les lignes :

• En Raccourcicant les phrases.
• En Utilisant des abréviations pour les mois.
• En Ajoutant des &nbsp; à la fin de certains mots,
  et au pire des images invisibles de 2 ou 3pix.

Ce qui au final, simule une Justification sans vraiment en être une
!
Vous pouvez juger du résultat ici:http://ippai.free.fr/ippaifm.php

La solution de mise en page que j'ai utilisée, fait donc au final, plus
appèle au choix des mots et au HTML qu'au CSS .


Merci à Kerod, Bisûnûrs, kaiser59 et 1407., pour leurs remarques
et suggestions éclairées. Encore !

[kaiser59]

Salut,

si tu veux appliquer au texte en question il te suffit de faire à titre d'exemple ceci :
Style interne (à placer avant body) ou externe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
p
{
text-align:justify;
}

et tu fais ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p> Mon texte de Mars, que je veux justifier + balise object:  <object></object><br />
Mon texte de Mai, que je veux justifier + balise object:  <object></object><br />
Mon texte de Juin, que je veux justifier + balise object:  <object></object><br />
Mon texte de Juillet, que je veux justifier + balise object:  <object></object></p>

Et si c'est pour toute les pages tu fais ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body
{
text-align:justify;
}

++

[Lareine]

C'est déjà ce que j'ai fait, mais essaye Kaiser59 et tu verras.

ça me fait un retour à la ligne, et du coup les différentes lignes
ne sont pas justifié sur la largeur maximum, à cause du retour à
la ligne <br />

Mon problème et donc de garder la justification, malgrès le
retour à la ligne...

Une solution ?

j'ai trouvée un autre poste qui en parle mais aucune réponse ou
solution n'a été trouvé ...
http://www.developpez.net/forums/sho...d.php?t=212326

Mais cela reste faisable sous Word
http://perso.orange.fr/jean-paul.miny/Word/consjust.htm


donc pourquoi pas en CSS

[kaiser59]

Salut,

j'ai essayé, c'est vrai que sa ne fait pas l'effet escompté. Cependant pourquoi tiens-tu à tout pris à faire de la sorte ?
Personnellement, je ne trouve pas sa très esthétique. Quand tu justifie tellement et que tu te retrouve en fin de paragraphe avec seulement deux mots dans la ligne sa te donnerait le 1er mot coller à la marge de gauche et le deuxième à la marge de droite et plus l'écart et grand plus cela fait moche.

C'est juste un avis perso.

Sinon pour la justification que tu veux je voie pas trop comment faire peut être élargir la police entre les mots.

++

[Lareine]

Parce que, je dois justifier à gauche la descriptions et date de chaques
émissions, et placer chaque player flash, sur une même colone !

Regarde mon exemple en live ou j'ai mis justification à gauche
et réajustement avec des &bnsp;
http://ippai.free.fr/ippaifm.php
Soucis on peut avoir des surprises sur d'autres navigateurs ...

Donc se serais quand même bien de pouvoir justifier l'enssemble malgrès
le retour à la ligne <br /> pour ne pas a avoir à rajouter des &bnsp;

[kaiser59]

re

Alors ce que j'ai pu trouver c'est de faire ceci, sa devrait te donner un début d'idée :

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
p
{
text-align:	right;
font-size:	1.5em;
}
 
span
{
word-spacing:	0.2em;
}
 
* html span {word-spacing:	0.4em;} /* hack pour ie car la taille est interprété différemment avec FF */

ensuite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<p>
Mon texte de Mars, que je veux justifier + balise object:  <object></object><br/>
<span>Mon texte de Mai,</span> que je veux justifier + balise object:  <object></object><br/>
Mon texte de Juin, que je veux justifier + balise object:  <object></object><br/>
Mon texte de Juillet, que je veux justifier + balise object:  <object></object>
</p>

je m'explique, tu prend le mois le plus grand en taille et tu élargies les mots pour faire en sorte que cela donne l'illusion d'un texte justifié et tu ajoute la balise <span> quand il le faut.

C'est tout ce que j'ai pu trouver il y a peut être mieux mais bon en attendant

++

[Lareine]

ça ne semble pas fonctioner ...

[1407.]

n'utilise pas de BR, fait seulement des paragraphes et ca devrais fonctionner...

ex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<p>
1er paragraphe
</p>
<p>
2e paragraphe
</p>
 
etc

ca "devrais" fonctionner, bien que je ne l'aie pas testé... ceci dit, c'est tes BR qui te causent probleme, alors élimine les!

[Lareine]

Bien tenté 1407., mais ton astuce ne marche pas, car la justification
ne s'oppère pas, s'il n'y a qu'une seul ligne dans le paragraphe ...

Je pense que tu as raison dans l'idées qu'il faut supprimer le <br />.

Mais par quoi les remplacer, pour faire un retour à la ligne forcé, avec
justification qui se comporterais comme un paragraphe avec plusieurs
lignes ?


J'ai trouvé un exemple ou quelqu'un semble y être arrivé !?
Mais je ne comprend pas trop comment (étant nulle en anglais) ...

http://www.htmlcodetutorial.com/line...msupp_153.html

[1407.]

est-ce que ca ne fonctionne pas que lorsqu'il y a une seule ligne ?

Si oui, c'est peut etre seulement ca le probleme, c'est a dire que comme dans Word, ta derniere ligne dans un paragraphe (qui est la seule dans un paragraphe d'une seule ligne) n'est jamais justify ?

Je lance l'idée comme ca, je suis très loin d'etre un expert de Word, mais possible que le meme principe soit appliqué en CSS ?

[1407.]

Bien tenté 1407., mais ton astuce ne marche pas, car la justification
ne s'oppère pas, s'il n'y a qu'une seul ligne dans le paragraphe ...

Je pense que tu as raison dans l'idées qu'il faut supprimer le <br />.

Mais par quoi les remplacer, pour faire un retour à la ligne forcé, avec
justification qui se comporterais comme un paragraphe avec plusieurs
lignes ?


J'ai trouvé un exemple ou quelqu'un semble y être arrivé !?
Mais je ne comprend pas trop comment (étant nulle en anglais) ...

http://www.htmlcodetutorial.com/line...msupp_153.html

En gros ca dit que les browsers ont beaucoup de difficultés avec les justify, et que le moyen pour contourner le probleme en CSS c'est de mettre le code dans ton BODY { ... }

ceci dit, ca semble donner un résultat de type Word comme j'expliquais dans mon post précédent, donc possible que les paragraphes a ligne unique souffrent toujours du meme mal

[Lareine]

Sous Word:
C'est tout à fait possible de justifier une unique ligne, en voilà la preuve:


En CSS:
Pour justification à gauche et à droite, on utilise justify (l'effet de cette valeur
se fait sentir seulement si le texte est plus long qu'une ligne).
http://www.mapageweb.umontreal.ca/ma...endium-CSS.htm

Et voilà ,
donc, pas encore de solutions pour la justification d'une seul ligne en CSS !?!

[1407.]

Qu'est-ce que t'essaye de dire là, que mes connaissances de Word sont plutot nulles ?

[Kerod]

Ce que tu veux c'est réalisé un tableau de données.
A gauche la description et à droite l'objet.

Alors pourquoi pas utiliser un table pour le faire ? Et si tu veux que le texte soit proche de l'élément tu fais un align: right.

Pas d'accord ?

PS : tu peux le faire en CSS pure aussi. cf. Cours CSS

[Lareine]

Malheureusement non Kerod, car la description doit être aligné à gauche
et finir aligné à droite, pour toucher l'objet.
Donc, dans tous les cas, je dois justifié chaque ligne ...
--------------------------------------------------------------------

Après avoir fait des recherches dans le O'Reilly Référence CCS
Il existe bien une solution dont voici les 3 que j'ai testé et qui
fonctionne sous Internet Explorer 6:



Je détaille les 3 versions...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:distribute-all-lines; }

text-justify:distribute-all-lines;
Justifie de façon presque égale les Mots et les Espaces même sur une ligne.
Fait partie des recommandations du W3C pour le CSS3.
C'est la fonction la plus rapide, celle que j'ai choisie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:newspaper; }

text-justify:newspaper;
Justifie avant tout les Espaces et un petite peut les mots même sur une ligne.
Fait aussi partie des recommandations du W3C pour le CSS3.
Mais Ralentie la justification lors de l'ouverture de la page
et n'est pas meilleur que l'autre visuellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:inter-cluster; }

text-justify:inter-cluster;
Justifie Uniquement les Espaces, même sur une ligne.
Fait aussi partie des recommandations du W3C pour CSS3.
Ralentie la justification lors de l'ouverture de la page
et n'est pas très bon visuellement

Partant du principe que <p> est déjà justifié avec text-align:justify;
Dans mon code XHTML, j'utilise par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p style="text-justify:distribute-all-lines;">
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
Mon texte à justifier malgrès le retour à la ligne: <object><object><br /> 
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
</p>

Ses 3 fonctions sont bien opérationnel avec Internet Explorer.

Mais, mon soucis c'est que je ne comprend pas pourquoi cela ne veut
pas fonctionner avec Firefox et Opera ?
Censés mieux gérer les CSS, en passant ...

Alors que ma Feuille de Style passe sans soucis la Validation CSS3 ?

[Kerod]

Peut-être tout simplement parce que CSS3 n'est pas encore vraiment sorti

On est à CSS2 pour le moment. Donc ce que tu risques de faire en utilisant CSS3 ne risque pas de passer

[Lareine]

Un comble quand même, que Internet Explorer, toujours à CSS2, suporte déjà
text-justify:distribute-all-lines/newspaper/inter-cluster, lui !?

Après avoir fait des recherches dans le O'Reilly Référence CCS
Il existe bien une solution dont voici les 3 que j'ai testé et qui
fonctionne sous Internet Explorer 6:



Je détaille les 3 versions...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:distribute-all-lines; }

text-justify:distribute-all-lines;
Justifie de façon presque égale les Mots et les Espaces même sur une ligne.
Fait partie des recommandations du W3C pour le CSS3.
C'est la fonction la plus rapide, celle que j'ai choisie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:newspaper; }

text-justify:newspaper;
Justifie avant tout les Espaces et un petite peut les mots même sur une ligne.
Fait aussi partie des recommandations du W3C pour le CSS3.
Mais Ralentie la justification lors de l'ouverture de la page
et n'est pas meilleur que l'autre visuellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ text-align:justify; text-justify:inter-cluster; }

text-justify:inter-cluster;
Justifie Uniquement les Espaces, même sur une ligne.
Fait aussi partie des recommandations du W3C pour CSS3.
Ralentie la justification lors de l'ouverture de la page
et n'est pas très bon visuellement

Partant du principe que <p> est déjà justifié avec text-align:justify;
Dans mon code XHTML, j'utilise par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p style="text-justify:distribute-all-lines;">
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
Mon texte à justifier malgrès le retour à la ligne: <object><object><br /> 
Mon texte à justifier malgrès le retour à la ligne: <object><object><br />
</p>

Ses 3 fonctions sont bien opérationnel avec Internet Explorer 6.

http://ippai.free.fr/ippaifm_just.php

Mais, mon soucis c'est que je ne comprend pas pourquoi cela ne veut
pas fonctionner avec Firefox et Opera ?
Censés mieux gérer les CSS, en passant ...

Alors que ma Feuille de Style passe sans soucis la Validation CSS3 ?

[Kerod]

Si c'est IE7 je pense que ce soit normal sinon les versions inférieures j'en doute

[Lareine]

Et bien si! J'utilise Windows 2000 .
Donc Internet Explorer 6.0 !

[Kerod]

Donc ce cas on va dire que FF etc. ne sont pas encore à jour de ce côté (mais ça me parait étonnant).

Pour conclure je te conseille d'utiliser un autre moyen accessible à tous les navigateurs