Formatting chapter/title pages with offset blocks of text

[JSWolf]

Originally Posted by Quoth

See letters, poems, hymns, songs. Better done with suitable multiple classes and a <p>

The quote here is an example of the kind of thing a "blockquote" is sematically for.

You you use your classes in between the blockquote. That makes it much easier to see where your offset text is. Also, you can set your default (most used) margins for your blockquote and if you need to override it, you can do so with a class. It's the best way to do it.

[JSWolf]

Originally Posted by ElMiko

@JSWolf - Ah, ok, that's a lot clearer re: margins. Regarding stress-testing the screen/font size, it seems that you're restating the original premise of the question. What's missing is quantification: What is "small" to you (in terms of screen size)? What is "reasonable" to you (in terms of font-size)?

@Quoth - I'm not sure I understand your post: are you saying that (in the context of a work of fiction) blocks of text which contain "letters, poems, hymns, songs" stylistically set apart from the main text do not constitute block quotations?

Given what we have for phone screens, I would say the size of the iPhone SE (2nd Gen) would be the smallest screen size. It's also the same size as the iPhone 8. It's a 4.7" screen. I really don't see smaller screens for a smartphone being used much or being relevant.

IMHO, it's easier to use a blockquote. It's also neater code.

[ElMiko]

@JSWolf - Thanks for the screen size estimate. What I'm trying to do here is get a kind of mental model on what ebook producers, on average, tend to assume about how users will use their ebooks, so your quantification is a helpful data point.

And, FWIW, I also tend to find the <blockquote> to be a convenient shorthand for a specific type of offset text—namely, block quotations (which I can style either at the container-level or at the content-level... or more frequently, both). Whereas <div>s tend not to have any consistent use case; they are just generic containers.

[Turtle91]

That’s exactly right, divs are generic containers while blockquotes are semantically used specifically for long quotes in a block format. While you can style the blockquote to look however you want it wouldn’t be semantically correct to use it for an image wrapper or something. It is more proper to use the div when there isn’t a more semantically correct tag. And then give it a descriptive class:

<div class="poem">
  <p>line of text</p>
  <p>line of text</p>
  <p>line of text</p>
</div>

<div class="book">
  <p>line of text</p>
  <p>line of text</p>
  <p>line of text</p>
</div>

<div class="email">
  <p>line of text</p>
  <p>line of text</p>
  <p>line of text</p>
</div>

<div class="textmsg">
  <p>line of text</p>
  <p>line of text</p>
  <p>line of text</p>
</div>

div.poem {style the div container here}
div.poem p {style the lines in the div here}

div.book {style the div container here}
div.book p {style the lines in the div here}

Etc, etc, etc…

There is a valid argument that you don’t need to use a <p> inside a div when a more semantically correct tag would do, such as <li>…. But if you were going to use <li> I would just style the <ol>/<ul> instead of putting it inside a div in the first place.

[JSWolf]

I would still use a blockquote to do offset text. I would use a div for images. So in your sample the divs would go in favor of blockquotes. Also, if you are looking for where there is offset text in the code, all you have to do is search for blockquote.

[ElMiko]

@Turtle91 - yeah, that seems more or less like the approach I tend to take. However, for poetry that is part of a prose novel (i.e. a character is reciting/reading a poem/song, or it's being used epigraphically) I'll consider it a block quotation. If it's just a book of poetry, I'll div it, div it good.