Aligner un début de ligne sur la fin d'une ligne précédente

J'ai cherché dans les sujets précédents, mais je n'ai pas trouvé de solution à mon problème.
Je dois publier le texte d'une pièce de théâtre en vers, sachant que chaque vers peut être coupé en plusieurs tirades, comme dans l'exemple suivant (attention : c'est du breton !)

NIKOLAZIG

Nav c’hant pevar bloaz warn ugent a oa neuze
Ha c’hwec’h miz.

GARO, d’ar sekretour

Ha c’hwec’h miz.

NIKOLAZIG

Ya ! Ya ! Mat evel-se.

Les tirades mises en gras appartiennent donc au même vers, et je dois faire en sorte qu'elles soient alignées les unes par rapport aux autres, c'est-à-dire par exemple que "Ya ! Ya !..." commence exactement là où "Ha c'hwec'h miz" finit.

Y a-t-il y a un moyen de le faire automatiquement ?

Merci beaucoup pour votre aide !

Tu peux mettre un classe spéciale sur les vers que tu veux aligner, puis définir un padding-left sur celle-ci

Merci pour ta réponse, mais si j'insère un padding-left avec une taille fixe (tant de px...), alors l'alignement des deux tirades dépendra complètement de la police de caractères et de sa taille.

Y-a-t-il un moyen d'insérer un padding-left avec une taille qui corresponde automatiquement avec celle de la tirade précédente ?

Hello !

Tu peux opter pour la solution de la structure d'un table, typiquement :

<table>
	<tr>
		<td>Ha c’hwec’h miz.</td><td></td>
	</tr>
	<tr>
		<td></td><td>Ya ! Ya ! Mat evel-se.</td>
	</tr>
</table>

Si tu ne veux pas utiliser la balise table, tu peux le simuler en css avec les display table / table-row / table-cell :

<div>
	<p>
		<span>Ha c’hwec’h miz.</span><span></span>
	</p>
	<p>
		<span></span><span>Ya ! Ya ! Mat evel-se.</span>
	</p>
</div>

Le css :

div{display: table;}
p{display: table-row;}
span{display: table-cell;}

Bonjour,

Comment produit tu ce texte ?
si tu produits ce code au clavier, tu peut alors te servir de la prpriéte white-space:pre; ou white-space:prewrap; CSS assez basique en soit.

Sinon, quel est le code réellement produit, balisage(p, span, cite,... ?) , indentation, etc...

<edit> une piste éventuelle en jouant sur la particularité des flottants: http://codepen.io/anon/pen/exIDt à defaut de plus d'infos ++
Modifié par gc-nomade (27 May 2014 - 18:03)

Merci pour vos réponses, mais j'ai encore quelques problèmes.

Pour répondre à gc-nomade, je tape mon texte au kilomètre en mettant seulement des balises <br/> pour les sauts de ligne. Le texte est publié sur le net et, à la demande des internautes, je le convertis en format epub en passant par sigil.

Mes problèmes sont les suivants :

a) si je passe par des display ou par des tableaux, alors les tirades sont effectivement alignées... mais je dois ajouter aussi les indications de personnages et les indications scéniques, et celles-ci allongent automatiquement la largeur de la colonne si elles sont plus longues que les tirades, ce qui se produit dans notre exemple :

NIKOLAZIG<br/>Nav c’hant pevar bloaz warn ugent a oa neuze
<table>
<tr>
<td>Ha c’hwec’h miz.</td><td/>
</tr>
<tr>
<td><br/>GARO, d'e sekretour</td><td/><td/></tr>
<tr>
<td/><td>Ha c’hwec’h miz.</td><td/>
</tr>
<tr>
<td><br/>NIKOLAZIG</td><td/><td/>
</tr>
<tr>
<td/><td/><td>Ya ! Ya ! Mat evel-se.</td>
</tr>
</table>

En effet, le premier "Ha c'hwec'h miz" est plus court que "GARO, d'e sekretour".

Comme il faut que la largeur des colonnes soit variable, je ne pense pas pouvoir passer par la fonction overflow, et je ne pense pas non plus qu'on puisse rendre la largeur des colonnes variable en fonction d'une entrée spécifique.

Ce qu'il me faudrait, c'est un peu l'équivalent d'une balise <off>texte hors tableau</off> qui suspende le tableau sans y mettre fin... mais je ne l'ai pas trouvée.

Sinon, il faudrait créer un premier bloc avec les tirades, créer un second bloc avec les indications de personnages et les indications scéniques, et s'arranger pour que les deux blocs apparaissent l'un sur l'autre... mais le code sera certainement très lourd pour du texte tapé au kilomètre, et je ne vois pas très bien comment m'y prendre.

b) si je passe par des flottants, ce qui serait peut-être plus digeste, même problème, car les indications de personnages et les indications scéniques décalent tout :

<dl>
NIKOLAZIG<br/>Nav c’hant pevar bloaz warn ugent a oa neuze
<dt><span class="bzh">Ha c'hwec'h miz</span></dt>
<dd><span class="bzh">GARO, d'e sekretour</span></dd>
<dt><span class="bzh">Ha c'hwec'h miz</span></dt>
<dd><span class="bzh">NIKOLAZIG</span></dd>
<dt><span class="bzh">Ya ! Ya ! mat evel-se !</span></dt>
</dl>

CSS :

dd, span.bzh {
float:left;
}
span.bzh {
padding:1em 0;
}
dt:after {
content:'';
display:block;
height:.75em;
margin-top:1em;

}
/* show up */
dt {
font-size:1.2em;
color:green;
line-height:0em;
}
dd {
color:red;
font-weight:bold;
font-style:italic;
height:2em;
}:

Okay, peut-être qu'un mix d'absolute + float pourrait s'approcher plus du résulat souhaiter. http://codepen.io/gc-nomade/pen/EFHbo (a tester dans diverses config)

Attention , c'est instable et sensible au contexte de formatage.

Le seul truc que je vois fiable est white-space:pre ou prewrap de façon a respecter l'indentation du texte http://codepen.io/anon/pen/qJkKj

Sinon une gestion via js, mais là je ne sais pas faire et je n'ai pas non plus de pistes à te proposer.
Modifié par gc-nomade (29 May 2014 - 14:00)