block quotes (in nonfiction)

[angharad09]

I'm used to using extra indenting (rather than quote marks) to identify a long quote -- for print and PDF documents. But is indenting reliable across multiple different e-readers, including older ones? If not, is there any other formatting, such as italics, that would be more reliable? How do people usually handle long quotes in nonfiction ebooks?

(I'm asking here because I'd like to know for both epub and Kindle formats, but please let me know if a different forum would be better.)

Thanks!

[Turtle91]

It ultimately comes down to the styling you want to use. There is a specific tag you can use for long block quotes...<blockquote>yadda, yadda, yadda</blockquote>. That tag has been around forever, so it should be supported in just about any reader/app out there.

You can then use your CSS to style it however you wish:

Spoiler:

CSS:
p                           {text-indent:1.2em}
blockquote.latinyadda       {margin:2em}
blockquote.latinyadda p     {text-indent:0; text-align:justify; font-size:.8em}
blockquote.latinyadda p.sig {text-align:right}


HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec leo sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Etiam volutpat quam nec tristique porta. Nulla facilisi. In pellentesque est et sollicitudin sagittis. Nunc venenatis, nisi ut faucibus posuere, mi odio congue purus, a fringilla urna turpis eget metus. Pellentesque a purus vulputate, dignissim purus a, auctor tellus. Aliquam convallis fermentum maximus. Proin a semper neque. Donec vehicula fermentum posuere. Donec vel risus ut lectus pharetra suscipit eu non magna. Phasellus ac sem mauris. Nam egestas laoreet odio, at convallis ante hendrerit quis. Integer rutrum nulla at magna tincidunt commodo.</p>

  <blockquote class="latinyadda">
    <p>Suspendisse fermentum nec mauris sit amet laoreet. Duis placerat bibendum tellus. Nullam fringilla ipsum a justo volutpat feugiat.</p>

    <p>Phasellus nec lorem dignissim, sodales lorem ac, luctus nulla. Vivamus ante est, vulputate a aliquet et, bibendum sit amet leo. Nunc erat leo, eleifend non rutrum vitae, aliquam et velit. Aliquam volutpat sodales orci, id varius nisl gravida in. Curabitur accumsan pellentesque euismod. In ultricies rutrum varius. </p>

    <p class="sig">–Dionysus, The Great c.2020</p>
  </blockquote>

<p>Sed vehicula massa id vulputate mollis. Proin malesuada lobortis orci, eu mollis elit porttitor in. Morbi posuere sem a metus tempor interdum. Maecenas ac dolor accumsan lacus tristique cursus at vitae orci. Suspendisse potenti. Sed mollis tortor sit amet imperdiet pharetra. Proin placerat efficitur lectus et placerat. Nam ultricies cursus dapibus. Curabitur eu sem justo. Nunc hendrerit sagittis tortor ut sollicitudin. Maecenas nec tempus augue, non consequat nulla. Proin ac nisi eu orci porttitor vulputate quis et risus. Proin tristique commodo arcu sit amet euismod.</p>

[hobnail]

I don't know if this is the best way to do it but I use width with margin-left and margin-right set to auto and haven't noticed any problems yet.

blockquote, div.block {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 85%;
}

The 1em space below it is in the p tag:

blockquote + p, div.block + p {
    margin-top: 1em;
}

I heard it was better to prefer margin-top over margin-bottom.

[Jellby]

To better accommodate narrow screens / large fonts, it may be better to use only margin-left (say 2em, or 5%) and no margin-right.

[hobnail]

Originally Posted by Jellby

To better accommodate narrow screens / large fonts, it may be better to use only margin-left (say 2em, or 5%) and no margin-right.

So far it has always worked; lines that are long are nicely wrapped.

What sorts of ugliness are you thinking does or could happen?

[phillipgessert]

Originally Posted by hobnail

So far it has always worked; lines that are long are nicely wrapped.

What sorts of ugliness are you thinking does or could happen?

I usually do something similar to your approach but I think I'm going to switch to Jellby's as it (I assume) is meant to prevent lines that are so short they are unpleasant to read on e.g. a smartphone.

[Jellby]

Originally Posted by hobnail

What sorts of ugliness are you thinking does or could happen?

Just that, if you already have a narrow screen with short lines, and add both left and right margin, you may be left with ultra-short lines in the blockquote. Reasonable top, left and bottom margin should be enough to set the blockquote apart from the surrounding text. As an aside, don't force justification if you're not doing it for the main text (and you shouldn't). Another "trick" I sometimes use is replacing text-indent inside the blockquote with some vertical spacing between paragraphs (not a full line, something like 0.5em).

[hobnail]

Originally Posted by Jellby

Just that, if you already have a narrow screen with short lines, and add both left and right margin, you may be left with ultra-short lines in the blockquote. Reasonable top, left and bottom margin should be enough to set the blockquote apart from the surrounding text. As an aside, don't force justification if you're not doing it for the main text (and you shouldn't). Another "trick" I sometimes use is replacing text-indent inside the blockquote with some vertical spacing between paragraphs (not a full line, something like 0.5em).

Ok, thanks. I'll give that a try. My div.block is the generic/common stuff, then I have add-ons, e.g., class="block letter". Since I'm mostly redoing PG books for my own use those are typically handwritten letters so I use italics as a sort faux handwriting and use a bit of vertical space between paragraphs and no indent.

[Tex2002ans]

Originally Posted by angharad09

I'm used to using extra indenting (rather than quote marks) to identify a long quote -- for print and PDF documents.

That's called a blockquote. (Or officially called a "block quotation".)

Like Turtle91 said, in HTML that can be created using <blockquote>:

<p>As Einstein wrote in <i>Article Title</i>:</p>

<blockquote>
<p>This is a long quote.</p>
<p>And this is some more of a really long quote.</p>
<p>And this is the end.</p>
</blockquote>

Originally Posted by angharad09

But is indenting reliable across multiple different e-readers, including older ones?

Yes, <blockquote> works in everything since the dawn of time.

Originally Posted by hobnail

My div.block is the generic/common stuff, then I have add-ons, e.g., class="block letter". [...]

Are you using <div class="block"> instead of <blockquote>?

If a specific HTML entity exists, it's best to use it so devices can treat it properly... even if the device overrides CSS (like many Android readers) or doesn't have CSS at all.

Similar reasoning why you want to use <i> or <em> instead of <span class="italics">, or <h1> instead of <div class="heading1">.

<div> + <span> are completely blank slates... where <em> and <h1> tell the device something + may enable extra underlying functionality:

• <em> might be spoken differently by Text-to-Speech.
• Headings allow screen readers to jump around documents.

Originally Posted by Jellby

Reasonable top, left and bottom margin should be enough to set the blockquote apart from the surrounding text.

Agreed.

These past few years, for similar reasoning, I've also been tempted to remove the right margin on my blockquotes to squeeze in more text. I've been doing a lot more reading on my cellphone, and some of these large blockquotes take up enormous amount of screen.

Originally Posted by Jellby

Another "trick" I sometimes use is replacing text-indent inside the blockquote with some vertical spacing between paragraphs (not a full line, something like 0.5em).

This type of spacing is also called "block indent". (Paragraphs with no indent + gap between each paragraph.)

[hobnail]

Originally Posted by Tex2002ans

Are you using <div class="block"> instead of <blockquote>?

I have things that are "blocks" but not really block quotes; letter, telegram, poem, notice (sign), etc. So I use, for example, <div class="block poem">. The common / shared stuff is in the css for block, then the specific stuff is in the others (div.letter, div.poem, etc.).

It seems to me that I could instead use

div.poem, div.letter, div.telegram, etc. {
    /* common block stuff here */
}
div.poem {
    /* poem specific stuff here */
}

I don't know if one is better than the other.

[Turtle91]

Originally Posted by hobnail

It seems to me that I could instead use

div.poem, div.letter, div.telegram, etc. {
    /* common block stuff here */
}
div.poem {
    /* poem specific stuff here */
}

I don't know if one is better than the other.

That's the technique I use, but I don't enumerate the common block selectors:

div {
    /* common block stuff here */
}
div.poem {
    /* poem specific stuff here */
}
div.letter {
    /* letter specific stuff here */
}
div.news {
    /* news article specific stuff here */
}
div.email {
    /* email specific stuff here */
}

As long as the common stuff is listed first, any specific changes listed below have priority. It may not be 'better' but it makes the code a little simpler/shorter... I don't need to see the word 'block' on every div...I already know it's a block because it's in a div tag.

[hobnail]

Originally Posted by Turtle91

It may not be 'better' but it makes the code a little simpler/shorter... I don't need to see the word 'block' on every div...I already know it's a block because it's in a div tag.

That's true but something in my brain prefers to have things explicitly laid out.

Originally Posted by Turtle91

As long as the common stuff is listed first, any specific changes listed below have priority.

My understanding is that the unadorned div could be at the bottom and would still have lower precedence and be overridden by the ones above.

[phillipgessert]

Originally Posted by hobnail

I have things that are "blocks" but not really block quotes; letter, telegram, poem, notice (sign), etc. So I use, for example, <div class="block poem">. The common / shared stuff is in the css for block, then the specific stuff is in the others (div.letter, div.poem, etc.).

It seems to me that I could instead use

div.poem, div.letter, div.telegram, etc. {
    /* common block stuff here */
}
div.poem {
    /* poem specific stuff here */
}

I don't know if one is better than the other.

I think it’s ok to use blockquote for those things too, given that they are quotes from an outside source. Admittedly feels a little weird in conversation to “quote” a sign, but I think it does make some sense in a markup semantics context.

[hobnail]

Originally Posted by phillipgessert

I think it’s ok to use blockquote for those things too, given that they are quotes from an outside source. Admittedly feels a little weird in conversation to “quote” a sign, but I think it does make some sense in a markup semantics context.

That's how I felt as well, and was using it that way. But Tex2002ans gives that the thumbs down. W3schools gives the following as an example usage: <blockquote cite="http://www.worldwildlife.org/who/index.html"> and I think that the cite usage is meant to be an indication that it should really be a direct quote from some other source. I'm ok with being semantically fussy and so I made my "block" class.

But it's sort of funny; when I rework a Project Gutenberg book; they'll have all of those things that I use my block class for, letters, poems, etc. in a div and sometimes the div is in a blockquote, but it all has double quotes around it. I've taken to removing them since it's set off with indentation and obviously a "quote."

[phillipgessert]

Originally Posted by hobnail

That's how I felt as well, and was using it that way. But Tex2002ans gives that the thumbs down. W3schools gives the following as an example usage: <blockquote cite="http://www.worldwildlife.org/who/index.html"> and I think that the cite usage is meant to be an indication that it should really be a direct quote from some other source. I'm ok with being semantically fussy and so I made my "block" class.

But it's sort of funny; when I rework a Project Gutenberg book; they'll have all of those things that I use my block class for, letters, poems, etc. in a div and sometimes the div is in a blockquote, but it all has double quotes around it. I've taken to removing them since it's set off with indentation and obviously a "quote."

Well, shoot. Can't stand divs. Rationalize it to myself with, I don't lose anything by stretching the definition that I don't also lose by using a div, but perhaps I should examine that more.