Poetry line-breaks with semantic HTML and CSS

Question

I would like to display poetry, using only HTML and CSS. To my understanding, the semantically correct way to structure poetry in HTML is using  tags for verses and   tags for individual lines, like this:

<p>
  poetry is very nice <br />
  but kind of hard to style <br />
  if only you could help me, guise, <br />
  I'd give you my best smile.
</p>

When the poem has long enough lines to wrap, the accepted style would be to hanging indent the wrapped line, like this:

This is a very long line that
needs to be wrapped

Ideally the wrapped part would be right aligned, but a fixed dimension hanging indent would work too.

I have seen various solutions to this, but they all involve semantically superfluous HTML, such as using lists or  tags for each line. For example:

.verse {
  margin-left: 2em;
}

.line {
  margin-left: -2em;
}

<p class="verse">
  <span class="line">poetry is very nice </span><br>
  <span class="line">but kind of hard to style </span><br>
  <span class="line">if only you could help me, guise, </span><br>
  <span class="line">I'd give you my best smile.</span>
</p>

Is there a way I could accomplish this without cluttered HTML?

Edit (1): I had an error in the example code. Both .verse and .line should have a margin-left property declared, not padding-left and margin-left.

Edit (2): Regarding the possible duplicate, I am aware of the different opinions regarding what is the most correct to mark up poetry in HTML. I have selected what seemed to me to be the most semantically correct, and this question is about the CSS needed to display it correctly.

Edit (3): I corrected the error in the example incorrectly. Here is a screenshot:

To clarify, I would like to achieve the same effect as the above screenshot without the  tags, or any other semantically superfluous tags.

Possible duplicate of [How to semantically tag poem text?](https://stackoverflow.com/questions/14734564/how-to-semantically-tag-poem-text) — Ronnie Royston, Jan 13 '19 at 20:32
@RonRoyston See Edit (2). They ran into the same issue as I did—which is why I'm trying to see if anyone has a brilliant solution :) — Marc Trius, Jan 13 '19 at 21:52
From the relevant answer there: "This hanging indent can be achieved only (as far as I know) if each line is its own block element." — Marc Trius, Jan 13 '19 at 21:57

score 2 · Answer 1 · answered Jan 13 '19 at 20:34

2

Considering you have 2em of padding along with 1.5em of negative margin, you can simply combine these two values by just giving the verses 0.5em of padding. This will allow you to cut out the  tags entirely, with the exact same visual output:

.verse {
  padding-left: 0.5em;
}

<p class="verse">
  poetry is very nice<br />
  but kind of hard to style<br />
  if only you could help me, guise,<br />
  I'd give you my best smile.
</p>

answered Jan 13 '19 at 20:34

Obsidian Age

41,205
10
48
71

I had an error in my example code, which I now corrected. I also added a screenshot of my desired outcome. – Marc Trius Jan 13 '19 at 21:47

score 2 · Answer 2 · edited Jan 02 '22 at 10:05

You can use a negative text-indent for the first line of a paragraph and add padding to the whole paragraph, i.e. you need only a the  element.

.verse {
  text-indent: -20px;
  padding-left: 20px;
}

<p class="verse">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Thank you! However, this doesn't work with the
tags. – Marc Trius Jan 13 '19 at 21:48 — Marc Trius, Jan 13 '19 at 21:48

score 1 · Answer 3 · answered Jan 13 '19 at 21:55

Use like :

div.a {
  text-align: justify; /* For Edge */
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: right;
}

<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

Follow : https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last

Damnjoe · Answer 4 · 2020-07-12T01:24:40.913

The only easy solution I've come up with so far is to do paragraph breaks instead of line breaks and create a .poem class that takes away the spaces between paragraphs (so it acts as a line break rather than paragraph break).

.poem { text-indent: -2em; margin: 0 0 0 2em;}

But then you have to go through and put double paragraphs (double space) between stanzas. It's not a good solution but it's easier than pasting in classes on each line or making a list.

If anyone has a solution with breaks though, that would be awesome. text-align-last: right; has a similar effect, but it's not a traditional poetry format.

Poetry line-breaks with semantic HTML and CSS

4 Answers4