Quotes and blockquote

[Karellen]

I recently discovered that font-variant: small-caps; does not work in epubs used in Kobo Libra2

Now I have also noticed that quotes are a bit temperamental.

For example, when a character reads a printed document verbatim, it is usually displayed with wider margins, and maybe italicized. I tried replicating this with the following using <p class="quote"></p>

Spoiler:

.quote {
display: block;
font-size: 0.9em;
font-style: normal;
font-family: inherit;
padding-left: 50px;
padding-right: 50px;
padding-top: inherit;
padding-bottom: 0.1em;
text-indent: 0;
}

But the Libra2 completely ignored that and the quoted text just looked like the rest of the page.

The Libra2 expects <blockquote></blockquote>, then it displayed as quoted text.

[jackie_w]

Originally Posted by Karellen

I recently discovered that font-variant: small-caps; does not work in epubs used in Kobo Libra2

Now I have also noticed that quotes are a bit temperamental.

For example, when a character reads a printed document verbatim, it is usually displayed with wider margins, and maybe italicized. I tried replicating this with the following using <p class="quote"></p>

Spoiler:

.quote {
display: block;
font-size: 0.9em;
font-style: normal;
font-family: inherit;
padding-left: 50px;
padding-right: 50px;
padding-top: inherit;
padding-bottom: 0.1em;
text-indent: 0;
}

But the Libra2 completely ignored that and the quoted text just looked like the rest of the page.

The Libra2 expects <blockquote></blockquote>, then it displayed as quoted text.

It may be because you've specified the left/right increased margins as 50px, i.e absolute units. Try using em units instead, e.g. this is what I use:

  
  margin-left: 2em;
  margin-right: 2em;

but use whatever works for you.

I think a <blockquote> has default increased left/right margins even if you don't include any explicit CSS for it.

[Karellen]

Hi @jackie_w

Thanks for your feedback. I will try that change when I get back home later this afternoon.

But I suppose I should use <blockquote> anyway as that is what it is designed for. I can modify it in the css page also.

[jackie_w]

Originally Posted by Karellen

But I suppose I should use <blockquote> anyway as that is what it is designed for. I can modify it in the css page also.

Just a word of warning ... if you do use <blockquote> and you also use epubcheck to validate your epubs, it will complain about a <blockquote> element if it contains text. It expects you to wrap it around a group of child elements containing the text. e.g.

<blockquote>
    <p>Some text</p>
    <p>Some more text</p>
</blockquote>

[Karellen]

Originally Posted by jackie_w

Just a word of warning ... if you do use <blockquote> and you also use epubcheck to validate your epubs, it will complain about a <blockquote> element if it contains text. It expects you to wrap it around a group of child elements containing the text. e.g.

<blockquote>
    <p>Some text</p>
    <p>Some more text</p>
</blockquote>

Oh, ok. I have not used the child tags. I'll fix that.
Apart from epubcheck noting it as an error, is it a requirement to use child tags for blockquote elements? That something written in the css specs and ereaders expect it?

[jackie_w]

I don't think ereaders will complain. It's just epubcheck's nitpicking. More important if you're creating ebooks to sell. Not so much if you're just creating them for yourself.

[hobnail]

I didn't get an error from epubcheck when I made a block quote with no p tags in it.

Also, this page says they're not always needed; see the bottom paragraph:

https://www.w3.org/TR/2011/WD-html5-...e-element.html

[hobnail]

For the sake of showing another way of styling blockquote, I use a width percentage:

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

blockquote p, div.block p {
    margin-top: 0.25em;
    text-indent: 0em;
}

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

[Turtle91]

I've always used blockquote when it is a longer quote...typically two or more paragraphs. I think that is why people are used to using the <p> tags inside of a blockquote. If it was a single paragraph then it's easier to just style the individual paragraph:

p.quote {margin:1em; text-indent:0; text-align:left; 
         font-size:.8em; font-style:italic}

<p>This is a normal paragraph before the quote.</p>
<p class="quote">Yadda yadda yadda...</p>
<p>This is a normal paragraph after the quote.</p>

vs.

blockquote        {margin:1em auto; width:50%}
blockquote p      {margin:0 0 .75em; text-align:left; text-indent:0; 
                   font-size:.8em; font-style:italic}
blockquote p.auth {margin:1.5em 0 0; text-align:right; font-style:normal}
blockquote + p    {text-indent:0}

<p>This is a normal paragraph before the blockquote.</p>
<blockquote>
  <p>Yadda yadda yadda...</p>
  <p>Also, yadda yadda yadda...</p>
  <p>But then, yadda yadda yadda...</p>
  <p>Finally, yadda yadda yadda...</p>
  <p class="auth">- Dion, circa 2022,<br />post pandemic</p>
</blockquote>
<p>This is a normal paragraph after the blockquote.</p>

I only use classes when there is something different about that particular thing...otherwise I simply define the base tag...that keeps the code view nice and clean, reducing bloat. It drives me nuts when I see things like this on every paragraph:

<p style="margin:0.00% 0.00%; text-indent:1.2em; text-align:justify; widows:0; orphans:0"> <span style=" font-size:1.0rem">Hello.</span> </p>

when it could be just:

p {margin:0; text-indent:1.2em}

<p>Hello.</p>

[Turtle91]

Originally Posted by Karellen

But the Libra2 completely ignored that and the quoted text just looked like the rest of the page.

I would bet that the Libra2 is like some other devices and either completely ignores the publisher/author css included in the book preferring it's own, internal css, OR, in order to allow the user to select their own margin/font/font-size/alignment, etc. it ignores those styles when used on <p>. That might be why it displays properly when using the blockquote.

Does the Libra2 have an option to use the "Publisher's styling" or something similar ??

[Doitsu]

Originally Posted by hobnail

I didn't get an error from epubcheck when I made a block quote with no p tags in it.

They're not needed in epub3 books that contain HTML5 files

[jackie_w]

Originally Posted by hobnail

I didn't get an error from epubcheck when I made a block quote with no p tags in it.

Originally Posted by Doitsu

They're not needed in epub3 books that contain HTML5 files

@Doitsu is correct - epubcheck v4.2.6 gives an error (actually 2 errors) if a <blockquote> tag in an EPUB2 contains text, but no error, for the same markup, if it's in an EPUB3.

Calibre's Check Book utility doesn't show an error for either EPUB2 or EPUB3. To the best of my knowledge, calibre tries to pay more attention to flagging errors that may cause actual problems in actual ereader apps than whether the (over-fussy???) rules of epubcheck are strictly followed.

[JSWolf]

Originally Posted by Karellen

I recently discovered that font-variant: small-caps; does not work in epubs used in Kobo Libra2

Now I have also noticed that quotes are a bit temperamental.

For example, when a character reads a printed document verbatim, it is usually displayed with wider margins, and maybe italicized. I tried replicating this with the following using <p class="quote"></p>

Spoiler:

.quote {
display: block;
font-size: 0.9em;
font-style: normal;
font-family: inherit;
padding-left: 50px;
padding-right: 50px;
padding-top: inherit;
padding-bottom: 0.1em;
text-indent: 0;
}

But the Libra2 completely ignored that and the quoted text just looked like the rest of the page.

The Libra2 expects <blockquote></blockquote>, then it displayed as quoted text.

I cannot stand those fake blockquotes. The following CSS code is what I use for blockquotes.

blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 1em;
  margin-left: 1.5em;
}

If the blockquote ends at the bottom of the page, I use the following code.

.blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 0;
  margin-left: 1.5em;
}

<blockquote class="blockquote">
<p>"This is at the end of the chapter"</p>
</blockquote>

[Hitch]

Originally Posted by jackie_w

It may be because you've specified the left/right increased margins as 50px, i.e absolute units. Try using em units instead, e.g. this is what I use:

  
  margin-left: 2em;
  margin-right: 2em;

but use whatever works for you.

I think a <blockquote> has default increased left/right margins even if you don't include any explicit CSS for it.

♪ Hello blockquotes my old friends,
I've come to use you once again...♫

Dang, I love blockquotes and I remember when we used to stack 'em, for old MOBI (KF7) format, to try to create any sort of indent, lol. One for the first-level indent, stacked for the 2nd...

Yeah, yeah, I know, this is the ePUB forum, but...just a quick trip down memory lane.

Oh, right the actual question--we slap paragraph tags around them inside the blockquote for safety (fallback, etc.). We figure, it doesn't hurt.

FWIW.

Hitch

[JSWolf]

Originally Posted by Hitch

Oh, right the actual question--we slap paragraph tags around them inside the blockquote for safety (fallback, etc.). We figure, it doesn't hurt.

I agree. This makes things more compatible with less risk of breakage.