block quotes (in nonfiction)

[hobnail]

Originally Posted by phillipgessert

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.

Made me laugh; I hear you. Maybe that's partly why I like using the unnecessary block class that gnihcnip points out isn't needed.

[phillipgessert]

Lol. The things we worry about. No one cares about this (hyper crossreferences W3c vs Idpf like a detective solving a crime via corkboard with red twine)

[JSWolf]

Originally Posted by 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>

Offset tex at a smaller size (IMHO) looks ugly. It looks better to have the offset text at the same size as the regular text.

[JSWolf]

Here isthe code I prefer for <blockquote>. in CSS. I think it looks quite good without wasting too much screen space on smaller screens.

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

[Turtle91]

Originally Posted by Turtle91

It ultimately comes down to the styling you want to use....snip...


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

...example code the OP can use to get an idea of the possibilities...

That's too bad you don't care for smaller font. But please stop telling people that your preferences are the 'proper way' to do things. They aren't. They are only what you like to see...



I am actually starting to get concerned about you...

[Jellby]

Originally Posted by phillipgessert

Rationalize it to myself with, I don't lose anything by stretching the definition that I don't also lose by using a div

There's a slight difference. If you want to be compliant, you are not allowed to have bare text inside a <blockquote>, it must be inside some <p>, <div> or something, but you can have text directly inside <div>.

Personally, I tend to use <blockquote> for letters, newspaper clips, handwritten notes, etc., where the text is the main content; and <div> for signs, visit cards... which often have more complex layout or formatting. For poetry, it's a <div>, with <div> for stanzas and <div> for lines... but it could all be inside a <blockquote> if appropriate.

[phillipgessert]

Originally Posted by Jellby

There's a slight difference. If you want to be compliant, you are not allowed to have bare text inside a <blockquote>, it must be inside some <p>, <div> or something, but you can have text directly inside <div>.

Personally, I tend to use <blockquote> for letters, newspaper clips, handwritten notes, etc., where the text is the main content; and <div> for signs, visit cards... which often have more complex layout or formatting. For poetry, it's a <div>, with <div> for stanzas and <div> for lines... but it could all be inside a <blockquote> if appropriate.

Is this to avoid using a <p> tag for text that isn't technically a paragraph? I am kind of averse to bare text within a <div> and would likely wrap it in <p> regardless, basically treating <p> like "lowest hierarchically where no better tag exists," but I suppose that is the same logic I was or am using to stretch what a <blockquote> might be, which I'm now rethinking a little bit.

[Jellby]

Originally Posted by phillipgessert

Is this to avoid using a <p> tag for text that isn't technically a paragraph?

Do you mean the bit about poetry? Yes, it's basically a wish to be a little bit semantic: it's not a paragraph, it's something else. It also lets me style the poetry lines from scratch, without having to undo the settings I (or the reading app) might have for the normal-text <p>s.

I am kind of averse to bare text within a <div> and would likely wrap it in <p> regardless

Even for things like this?

<div class="scenebreak">* * *</div>

[phillipgessert]

Originally Posted by Jellby

Even for things like this?

<div class="scenebreak">* * *</div>

Ha no, I could see doing that. And interesting about the poetry, I never quite thought about it that way. Thanks.

[Turtle91]

Originally Posted by Jellby

Even for things like this?

<div class="scenebreak">* * *</div>

lol...actually I have recently started using:

<hr class="scenebreak"/>

It does the same thing - even allowing fleurons or asterisms - and is apparently preferred for accessibility.

[Jellby]

But that needs the "content" property, doesn't it? As far as I remember, it's not required by the ePub 2 specification, and not very well supported...

[hobnail]

An hr setup I recently saw that I'm now using is <hr class="asterism" role="separator" aria-label="Interlude"/>.

The role and aria-label apparently make it ok for accessibility.

The css is nothing out of the ordinary:

hr.asterism {
    background-color: inherit;
    border: currentColor;
    border-style: dotted none none none;
    height: 1px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    overflow: visible;
    width: 6em;
}

I don't know if role and aria-label are epub3 specific but epub3 is what I use in any event.