Version complète: sur le forum Webmaster Hub : CSS et poésie
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
captain_torche
Salut à tous !
Je me posais une petite question (sans avoir de projet en cours ou quoi que ce soit, c'est juste par curiosité) :

Si on tente d'écrire une pièce de théâtre, un poème, ou quoi que ce soit qui soit en vers, on est logiquement obligés de respecter certaines normes; notamment ne rester que sur une seule ligne et, en cas de dépassement, de laisser le dépassement à la ligne, mais aligné à droite.

J'étais parti de ce principe :
- Chaque vers est un élément de type block
- Il faut identifier et isoler la première ligne du reste

J'avais abouti à quelque chose du genre :
HTML
<p>
<span>Sois satisfait des fleurs, des fruits, même des feuilles,</span>
<span>Si c'est dans ton jardin à toi que tu les cueilles !</span>
</p>


Avec le code CSS suivant :
HTML
p {
width: 300px;
background-color: #ddd;
}
span {
text-align: right;
display: block;
}
span:first-line {
text-align: left;
}


Le seul souci, c'est que le pseudo-élément first-line, ne peut pas avoir de propriété d'alignement horizontal (Source W3Schools), ce qui fait que mes jolis efforts n'ont pour l'instant mené à rien.
Loupilo
Et avec ça ?

CODE
span:first-line {
display:block;
text-align: left;
}
captain_torche
Nan, malheureusement ça ne marche pas.
Ca aurait changé quelque chose, de repréciser que la balise span est de type block ?

CITATION(W3 Schools)
Note: The following properties apply to the "first-line" pseudo-element:

* font properties
* color properties
* background properties
* word-spacing
* letter-spacing
* text-decoration
* vertical-align
* text-transform
* line-height
* clear
Raphael
CITATION(captain_torche @ vendredi 26 mai 2006, 15h59) *
J'étais parti de ce principe :
- Chaque vers est un élément de type block
- Il faut identifier et isoler la première ligne du reste

J'avais abouti à quelque chose du genre :
HTML
<p>
<span>Sois satisfait des fleurs, des fruits, même des feuilles,</span>
<span>Si c'est dans ton jardin à toi que tu les cueilles !</span>
</p>

Hello,

Attention à ne pas confondre l'apparence (CSS) et la structure (HTML) de l'élément.
Tu dis que chaque vers est un élément de type bloc, or <span> est un élément de type en-ligne (même si tu lui donnes intrinsèquement l'aspect bloc via CSS).

Ceci étant dit, ça ne règle pas le problème.
Tu donnes toi-même l'explication à ton problème : "text-align" ne s'applique pas au pseudo-élément ":first-line"... qu'il soit de type bloc ou en-ligne.
C'est tout simplement non supporté par ce pseudo-élément.

Tu dois donc procéder différemment, en affectant une classe aux <span> pas exemple :
HTML
<p>
<span class="first">Sois satisfait des fleurs, des fruits, même des feuilles,</span>
<span>Si c'est dans ton jardin à toi que tu les cueilles !</span>
</p>
captain_torche
Non, ce n'est pas si simple (dommage).
Le truc, c'est que chaque span est un vers différent.
En fonction de l'espace alloué horizontalement, un vers se comporte différemment :
- S'il a tout l'espace désiré, il reste fer à gauche, rien de compliqué
- S'il déborde de l'espace désiré, il faut laisser la première ligne en fer à gauche, et mettre le reste en fer à droite (avec éventuellement un '[' au retour à la ligne)

Sinon, je précise : chaque vers est de type 'block', dans l'appréciation visuelle que j'en fais (donc dans le CSS).
jeanpierre949
tu as essayé un text-indent negatif ?
Xethorn
Hum, je jouerai d'avantage avec un first-letter ... qui définie finalement l'emplacement de la première lettre. Avec un padding-left, ça devrait fonctionner tout seul non ?

CODE
p:first-letter { padding-left:10px;}


Tu pourrais mettre en page ton texte (de manière brute) que l'on puisse voir ce que ça doit donner au final ?
ste
Personnellement, je ne me suis pas tracassé autant ...

chaque vers est une nouvelle ligne, donc usage de l'élèment p

tongue.gif
captain_torche
Hé ben non, ça serait trop facile smile.gif
Bon, pour montrer un exemple en situation :
Ouvrez la page en cliquant ici
Lignes 8 et 21, le vers est trop long. Il est donc coupé et repris fer à droite à la ligne suivante, et précédé d'un crochet ouvrant.

Bon, ensuite je ne sais pas du tout si c'est réalisable, mais la question me titille.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.