CODEWITHSUNDEEP
htmlcsssemantic-markup
alter_kaker
alter_kaker

Reputation: 171

Poetry line-breaks with semantic HTML and CSS

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 <p> tags for verses and <br /> 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 <span> 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: desired outcome with cluttered code

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

Upvotes: 4

Views: 4427

Answers (4)

SeReGa
SeReGa

Reputation: 1316

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

Upvotes: 2

Damnjoe
Damnjoe

Reputation: 1

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.

Upvotes: 0

Manish Vashisth
Manish Vashisth

Reputation: 68

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

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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

Upvotes: 2

Related Questions