CSS et poésie

[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 :

<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 :

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 ?

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 ?

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]

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 :

<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 :

<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 ?

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

[captain_torche]

Hé ben non, ça serait trop facile

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.