Poetry Classes: Blockquote vs Div?

[enuddleyarbl]

I found Jellby's snippet of CSS for poetry:

https://www.mobileread.com/forums/sh...32&postcount=4

But, since it's 13 years old, I felt pretty silly trying to ask about it there. So...

Originally Posted by Jellby

...
css:

div.poetry {
  margin: 1em 0 1em 2em;
}
div.poetry p {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
}
div.poetry p.indented {
  margin-left: 2em;
}
div.poetry p.first {
  margin-top: 1em;
}

So, use class="first" when a new stanza begins and class="indented" for indented lines.

For pieces with more complex indent pattern or for mainly poetry works I'd probably do something different, like a <div></div> for each stanza (which could include "page-break-inside: avoid" in the css).

Is it possible to put classes like this on blockquote instead of div? Is it even desirable? I'm to the point where I've played around with enough books' CSS that using blockquotes as a single solution for walls-o'-text, poetry and letters (i.e., Dear Sir...) is starting to grate. I'm considering classes for poetry and letters and leaving wall-o'-text at just plain blockquote. But, I wonder what's the least complex/most understandable way to do it.

[phillipgessert]

Originally Posted by DaveLessnau

I found Jellby's snippet of CSS for poetry:

https://www.mobileread.com/forums/sh...32&postcount=4

But, since it's 13 years old, I felt pretty silly trying to ask about it there. So...



Is it possible to put classes like this on blockquote instead of div? Is it even desirable? I'm to the point where I've played around with enough books' CSS that using blockquotes as a single solution for walls-o'-text, poetry and letters (i.e., Dear Sir...) is starting to grate. I'm considering classes for poetry and letters and leaving wall-o'-text at just plain blockquote. But, I wonder what's the least complex/most understandable way to do it.

Are you asking whether you can set poetry using <blockquote>? That's how I do it if it's within another work, like a poem someone's reciting in a novel. If it's for a book of straight poetry, I don't think that would be quite correct semantically and probably not much benefit. I'd wrap each stanza in a <div> for that (Jelly's second method in that quoted post).

[enuddleyarbl]

Yes. Almost invariably in what I do, this would be for snippets of poetry quoted as supporting flavors in a book. Things like an epigraph or the starts of chapters.

[phillipgessert]

Yeah, I always do those as blockquotes. Like you it starts to feel like a lot of blockquoting after a while but I personally wouldn’t switch to divs or anything for that. Seems like a downgrade.

[Turtle91]

blockquotes and divs can be styled to look identical - the difference is almost pure semantics. The only big difference is that you can set the "cite" attribute within the blockquote tag, divs you don't.

If you change the css from Jelby's example above to this it will look identical.

blockquote.poetry {
  margin: 1em 0 1em 2em;
}
blockquote.poetry p {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
}
blockquote.poetry p.indented {
  margin-left: 2em;
}
blockquote.poetry p.first {
  margin-top: 1em;
}

Like phillipgessert, I would use a div for poetry unless it was part of a longer quote - then semantically blockquote would be more correct.

[Sarmat89]

blockquotes are indented by default, divs are not, so blockquote is the reasonable choice.

[JSWolf]

One thing, don't use the margin shorthand. Use the separate margin lines such as margin-top: margin-right:. It's a lot easier to read the CSS that way.

As for div.poetry p, 3em is too large. Think of reading this on a small cell phone screen. You already have a 2em margin. 1em is better. Also, you don't need padding and you don't need left align.

blockquote.poetry {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 2em;
}
blockquote.poetry p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 1.5em;
  text-indent: -1.5em;
}
blockquote.poetry p.indented {
  margin-left: 2em;
}
blockquote.poetry p.first {
  margin-top: 1em;
}

[Turtle91]

Originally Posted by Sarmat89

blockquotes are indented by default, divs are not, so blockquote is the reasonable choice.

Definitely a “no” on that reasoning.

1. You should not make choices of html tags based on the way it looks, but by what the tag is meant to define:
Use a <p> to define a paragraph
Use a <table> to define a table
Use a <blockquote> to define a long quote
Use a <div> to define a section of html that should be treated separately from surrounding html.
Etc.
Technically you could use a <div> to define EVERYTHING in your html but it would not be semantically correct. Devices/apps may not function correctly if they can’t distinguish the <tags> properly.

2. Never rely on some “default” behavior - always explicitly define the presentation you want to see in your attached css stylesheet. It’s difficult to find devices/apps that consistently follow the published standards let alone some nebulous, undefined, “default”.
You need to define how much of an indent you want, does that indent apply to just the first line or the whole section, does the indent vary when the user changes the font size or is it a fixed distance, is the indent measured from the parent container’s border or is it from the edge of the screen.

[Quoth]

Also if you only want to edit in MS Word or LO Writer you might have less divs and certainly with LO Writer and perfectly formatted poetry and lyrics I never ever see blockquote generated. Just <p class="somestyle"

Also if you use ePub to proof read in the edit cycle you absolutely don't want to ever edit the HTML and CSS, except maybe for the "publish version" and I can't remember ever having to edit more than some CSS for the styles of images in maybe the last 6 years.

Good advice on "Never rely on some 'default' behaviour". So when I use a list format/style in LO Writer the bullets or auto increment (letters, numbers or Roman) are explicitly typed in. No doubt the "auto" feature saves time renumbering items when you go back and insert and extra, but it creates compatibility issues and isn't worth it. Similarly we don't auto number chapter headings.

Of course tables are tricky on ereaders on smaller screens or user selecting a large font. Can be tricky on Web on Mobile even with a "responsive" theme, which no doubt is why historically WordPress had no tables, you added a plug-in.

[enuddleyarbl]

Originally Posted by JSWolf

One thing, don't use the margin shorthand. Use the separate margin lines such as margin-top: margin-right:. It's a lot easier to read the CSS that way.

As for div.poetry p, 3em is too large. Think of reading this on a small cell phone screen. You already have a 2em margin. 1em is better. Also, you don't need padding and you don't need left align.

blockquote.poetry {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 2em;
}
blockquote.poetry p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 1.5em;
  text-indent: -1.5em;
}
blockquote.poetry p.indented {
  margin-left: 2em;
}
blockquote.poetry p.first {
  margin-top: 1em;
}

I was playing with this stuff last night and found the same issues you mentioned. I went through and specified margin types and reduced the padding/indent to something more reasonable.

I also decided to set up div classes for poems, songs and letters. I'll use blockquotes for more generic blocks of quotes (<- )

[JSWolf]

Speaking of padding, padding is best used in a section break if you plan on using blank space.

[code].sectionbreak {
padding-top: 2em;
text-indent: 0;
}[/quote]

The reason for this is the margin gets lost when it's at the bottom/top of the screen. The padding does not get lost.

[Jellby]

One difference between blockquote and div is that a blockquote cannot (if you want to comply with the standard[*], anyway) contain inline elements as direct children, it can only contain block-level elements.

So this is wrong:

<blockquote>Foo</blockquote>

but this is fine:

<div>Foo</div>

[*] I don't remember which standard, it might have changed in newer ones, but epub 2 still uses HTML 4 something.

[Jellby]

Originally Posted by JSWolf

As for div.poetry p, 3em is too large. Think of reading this on a small cell phone screen.

The 3em is for indenting wrapped lines, it's cancelled by the negative text-indent. As long as you can distinguish wrapped lines from double-indented lines, it should be fine.

Also, you don't need padding and you don't need left align.

The padding is to prevent it being overridden by other margin specifications. You need left align if you don't want your poetry lines (the wrapped lines, at least) to be justified when the user selects justification for the main text.

[Jellby]

By the way, I no longer use <p> for each line, I use just another <div> or <div class="line">, verse lines are not paragraphs.

[hobnail]

If you're like me the word block in the blockquote's name may make you feel like it's the correct thing to use for things like poetry, letters, etc. But as Turtle91 points out, the blockquote has a cite attribute, so a blockquote is meant for quoting something from a larger work. If you read the w3c's definition for blockquote they're quite firm about it being only for quoting something, not just a general purpose block of text that's visually set off from the surrounding text. If it wouldn't make sense to use the cite attribute when you use a blockquote then you're likely semantically correct to instead use a div.

I made the switch to div when Jellby or TeX pointed out that using blockquote for general blocks of text is incorrect. This is when I came up with the idea of using two classes; e.g., <div class="block poem">.

Anyhow, I bring this up in case you'd prefer to be semantically correct with your html.