How to vertically align incomplete verses in a poem (theater style)? - css

Question

In some poems, often in theater-like writing, the end of an incomplete verse must be aligned to the begin of the continuing, like that:
The verse that is split is vertically aligned as if it weren't split.
I'm creating an ebook, and I need a trick to make the CSS consistent for any font, size, etc. (because they are tweakable) without relying on monospace.
Is this possible at all? I've thought about it, but I've had no idea, not even a lead.
For now, the HTML looks like that:
<div class="character">La Nourrice</div>
<p>Tu vis ! ou vois-je ici l’ombre d’une princesse ?
<br/>À mes lèvres tes doigts et leurs bagues et cesse
<br/>De marcher dans un âge ignoré...</p>
<div class="character">Hérodiade</div>
<p>Reculez.
<br/>Le blond torrent de mes cheveux immaculés
<br/>Quand il baigne mon corps solitaire le glace</p>

Answer 1

Within pre tag text will be displayed exactly as written by you
<div>
<pre style="font-family: sans-serif;">
La Nourrice
Tu vis ! ou vois-je ici l’ombre d’une princesse ?
À mes lèvres tes doigts et leurs bagues et cesse
De marcher dans un âge ignoré...
Hérodiade
Reculez.
Le blond torrent de mes cheveux immaculés
Quand il baigne mon corps solitaire le glace
</pre>
</div>

Answer 2

The only way I managed to do something similar is using direction: rtl; and a fixed width. In this case your main problem is that there's currently no way to force justify elements in CSS something that would be useful for this. Also, <br> tags break text-align: justify so in the case of the unfinished line I left the <br> but for the others I left it out. Even so, it looks a little weird.
There's a ::first-line CSS property, but unfortunately it can't use text-align.
There's also text-justify but it's not confirmed as a supported property yet, so it's not working. It could solve your problem if it becomes official though. You can check more on it on MDN Docs.
I'd suggest you revise your html structure if you can and have control over that part. Otherwise you don't have many options on this.
p {
max-width: 320px;
display: block;
text-align: justify;
direction: rtl;
}
<div class="character">La Nourrice</div>
<p>Tu vis ! ou vois-je ici l’ombre d’une princesse ?
<br/>À mes lèvres tes doigts et leurs bagues et cesse
<br/>De marcher dans un âge ignoré...</p>
<div class="character">Hérodiade</div>
<p>Reculez.<br> Le blond torrent de mes cheveux immaculés Quand il baigne mon corps solitaire le glace</p>