pull quotes in epub/awz3

[1v4n0]

Hello, I'm doing an epub from a printed book which has a lot of pull-quotes. Does anyone have suggestions on how to render them? I could leave them as they appear in the book, more or less - the code is quite simple - but I'm not sure it would make sense graphically on small screens, such as ebook readers or smartphones. I know enough HTML and CSS to create ebooks, but I have zero knowledge and opinions about graphic design, layouts and such.
Any ideas?

[j.p.s]

Maybe just leave them out?

[1v4n0]

I thought about that, yes. I usually try not to fiddle with the book's content when "epubbing", but this could be an exception.

Or maybe a media query to only show them on bigger screens? Do they work with ebooks?

[Tex2002ans]

Depends on their relevance. If you show a few examples, I'd let you know what I'd do.

Originally Posted by 1v4n0

I thought about that, yes. I usually try not to fiddle with the book's content when "epubbing", but this could be an exception.

Is this articles from a website or something like that?

If the pullquotes were only used for "decoration"/"breaking up the article"/emphasis + rehashing what's already there, they can be removed in the ebook. (Relatively useless.)

If they're "pullquotes", as in important sidenotes/asides, then there are ways.

- - -

Note: You have to remember, not everything that works in Print should be carried over or would be relevant in Ebooks. (For example, stuff like headers/footers.)

- - -

Side Note: Way back in 2015/2017, I wrote about subheadings that were "pullquote"-like:

• 2017: "Non-<hn> tag in TOC: complement to sigil_not_in_toc"
• 2015: "A better workflow"

- - -

Originally Posted by 1v4n0

Or maybe a media query to only show them on bigger screens? Do they work with ebooks?

Sometimes you can do something like this:

Big Screen:

This is some text that       Pullquote
has a pullquote in there          Text.
and then it continues
to go further and further and further.

Little Screen:

-------------
Pullquote Text.
-------------

This is some text that has a
pullquote in there and then it
continues to go further and
further and further.

where:

• big screen would align right + have padding around it
• small screen would be inline OR similar to a blockquote + standout via border/padding.

[1v4n0]

They are verbatim quotes from the book, usually from the same page, to, I don't know, catch the attention of a distracted reader who's quickly skimming through the book, or something like that. Anyway it's always quotes that are already in the book, so technically nothing would be missing if I didn't include them. See attachment.

[Tex2002ans]

Yeah, those specific types...

I'd remove them from the ebook. (Exact same thing I do with articles -> ebook.)

The reason those pullquotes are in Print (and online) is to try to "break up the monotony on the page".

[1v4n0]

Thank you, I'll trust your judgement

[Quoth]

Go inline, but a different indent, face, size.

I was looking at an Anna Katherine Green "The Circular Study" and the Gutenberg ebook has tables (badly done) with a short letter in left column and the letter writer character's thoughts on the right. Even after fixing margins etc it's bad on an 8" Sage using a smaller than comfortable font.

Simply having the letter, then the thoughts sequentially works better and is easier to read.

I actually find both "pull quotes" and the multicolumn for different threads (see also a recent Detective novel with Twitter feeds) harder to follow. You can only read one block of text at a time. So sequential works best. Obviously you can vary the style of the inset sequential block.

If they are quotes from the same page, then it's stupid even on paper (or web), leave it out of ebook.

[Tex2002ans]

Originally Posted by Quoth

If they are quotes from the same page, then it's stupid even on paper (or web), leave it out of ebook.

Heh, yep. (See rants below.)

Originally Posted by Quoth

Go inline, but a different indent, face, size.

Yes, I'd agree... if it was actual headings (or an actual aside/sidenote).

But to have a phrase/sentence that's just going to appear right next to it two seconds later... it just doesn't work.

Quite often it also:

• Repeats what you JUST read.
• "Spoils" what's going to come up.
  
  • I believe this might be the point, to allow your eyes to "skim" and land on an emphasized quote. You thought quote was interesting? Then you'd begin reading at that paragraph.
    
  • Or if you were rifling through the pages of a magazine/newspaper, you'd stop and read that story.
    

Like take this:

Original PDF:

Blah blah blah.
     Blah2 blah2 blah2. This is          "This is a
a good quote. Blah2 blah2 blah2.         good quote."
     Blah3 blah3 blah3. Blah3 blah3 blah3. Blah3 blah3 blah3.

Spoiler:

Pullquote Before:

Blah blah blah.

"This is a good quote."

Blah2 blah2 blah2. This is a good quote. Blah2 blah2 blah2.
Blah3 blah3 blah3. Blah3 blah3 blah3. Blah3 blah3 blah3.

Pullquote After:

Blah blah blah.
Blah2 blah2 blah2. This is a good quote. Blah2 blah2 blah2.

"This is a good quote."

Blah3 blah3 blah3. Blah3 blah3 blah3. Blah3 blah3 blah3.

Meh.

When I created a workflow to go from online articles -> clean ebook, luckily they were tagged with:

<span class="pullquote-right">

I was able to use Saved Search + Regex to remove those within a second.

It was especially absurd to have multiple in such short articles (maybe a few thousand words, max).

If you were working on:

• some monstrous tome
• with enormous chapters
• huge, dense paragraphs
• and no/few subchapters

maybe... MAYBE there'd be an argument for keeping those pullquotes.

- - -

It brings to mind another book I worked on, a business book, (you know, the kind with lots of fluff).

Seriously, this thing had maybe 3 or 4 of these pullquotes per page. The thing BARELY HAD ANY ACTUAL TEXT on each page too!

• Stock images top/bottom + every 2 paragraphs
• 3+ pullquotes every page
• Font size that looked like it was 16pt
• [...]

It was like you're bloating a 2 page report into a 30+ page pamphlet.

When I converted the InDesign file into EPUB, it was completely unreadable on my device:

• Paragraph
• Full-page image
• Paragraph + pullquote
• Full-page image
• Paragraph
• [...]

Every "screen" on my cellphone only fit a few lines of text in it! Until the next image happened!

I told them I'd allow maybe ONE OR TWO key images per article. That was it.

They insisted every single stock image "was handpicked" and "extremely important to the text".

• An hourglass? (For "time".)
• A scale? (For weighing "costs and benefits".) Really?
• A laughing person at the computer? Really?
• A chart or graph, giving actual information? Yes.
• But a generic guy in a suit drawing "complex formulas" in marker on a glass board? No. Absolutely not.

Originally Posted by Quoth

[...] the Gutenberg ebook has tables (badly done) with a short letter in left column and the letter writer character's thoughts on the right. Even after fixing margins etc it's bad on an 8" Sage using a smaller than comfortable font.

Yeah, having side-by-side or interlinear texts are... rough. Again, this type of layout isn't something that's suitable, usable, or possible to do well on a skinny device (especially with LARGE FONTS!).

- - -

Side Note: We've written about side-by-side texts on MobileRead before (mostly with bilingual translations).

But a few weeks ago, I ran across this type:

• Wikipedia.org: "Interlinear Gloss"
  
  • Used in linguistics.
• TeX Stack Exchange: "Doing an interlinear text"
• /r/LaTeX: "I know nothing about LaTex. I have a very specific desire to create interlinear documents. Can you help me out?"

Having 3 levels per word:

• Number
• Original language
• Translated language

and then trying to typeset it all out, interleaved...

To try to reproduce this as an EPUB would be... horrifying.

This kind of thing would be best with a database/spreadsheet, then generating the text separately.

Originally Posted by Quoth

Simply having the letter, then the thoughts sequentially works better and is easier to read.

Yeah, completely depends on a case-by-case basis. That might work in some books, but be horrible in others.

We had similar discussions in all those bilingual book threads too.

Another problem becomes:

Where do you PLACE the parallel text? Before? After? A few paragraphs later?

Similar issue happens when you're dealing with floating charts/tables.

In a Print book, you have top/bottom floats.

In an ebook, there's no such thing, so you have to try to read the text and place the image as close to the reference as possible.

[Quoth]

Originally Posted by Tex2002ans

[Sequential instead of side by side]
Yeah, completely depends on a case-by-case basis. That might work in some books, but be horrible in others.

Yes.
Fortunately in "The Circular Study" all the letters are short by Tom to Felix and the parallel next column are Tom's long "journal" entries about what he is really thinking and doing. There are also more Journal entries than letters. So the two columns works very poorly. Simply replacing all td with a <p style="letter_3"> for 1st in row and <p style="entry_3> for second in row, removing all tr and table almost worked. I had to move the ENTRY IX etc headings to below the Letter if there was a letter.

Reads much better. I added a right aligned comment as the actual text had an explanation of two columns

Initially there was maybe 1 or 2 pixel space between columns and the narrower letter column was also fully justified. So first attempt was change style in first column to have no first line indent, be left aligned and wider right margin. But the Kobo would chop the last lines of journal entries that didn't fit on one page so it only mostly worked and this is 8" Sage! Be much worse on 6" and terrible on 4" to 5".

Sooner or later a Table will bite when used in an ebook unless it can fit on the smallest screen at a reasonable font size. A Table almost the size of a full chapter is going to have problems.

[Quoth]

I've very old bilingual texts that are Irish and English. Fortunately (or unfortunately) they are PDFs and alternate pages. I can't read Irish anyway, and my fluent daughter can't read much of it because it's probably transcription of a 300 to 600 yo MSS and even 19th C. is hard for Irish speakers (they are 19th C. translations) because of the 1948 spelling reform. Also I have some bilingual paper books that have Hebrew and English on facing pages and loads of footnotes. I just can't imagine how it could work on a 6" or even 8" ereader. You'd need maybe a 10" ereader (maybe larger) in landscape and maybe a PDF. They are large format books and can't have been easy to do on paper.

[bookman156]

Pullquotes can look quite pretty on a webpage or in a magazine, but they are simultaneously annoying as you end up reading the same thing twice.

In an epub they'd be pretty horrendous. I vote for leaving them out. The only way to include them successfully would be to regard them as subheads of some sort, but if the book already has subheads then you can't do that. And also you'd be taking on the role of copy-editor, which I imagine you don't want to do.

Leaving them out you won't be missing anything and you won't be annoying the reader with duplicated text.

[j.p.s]

IMO any actual benefit to readers providied by pullquotes would be better provided by bolding the text in question. It would certainly much better for locating the context. But even that has the potential to be distracting and annoying. But unless the author wanted to emphasize those snippets of text such bolding or pullquotes is a disservice to the author and (most?) readers.

[JSWolf]

The problem is that even though you can sort of do it, you cannot guarantee where it will land on the page. It could cross the page boundary and drop to the next page and not be in the correct place.

What I would do if I was doing it is a one cell table with no lines showing and put the quote in there and have it be on the left or right side of the screen. I'm not sure how well this would work centered.

[Tex2002ans]

Originally Posted by bookman156

In an epub they'd be pretty horrendous. I vote for leaving them out. [...]

Leaving them out you won't be missing anything and you won't be annoying the reader with duplicated text.

Glad to see there's some widespread agreement on "useless pullquotes". :P

- - -

Side Note: I know somewhere, somewhen, (maybe on her website?), Hitch showed a very good example of Media Queries.

For example, see some of the image examples on Booknook's:

• "Non-Fiction and Moderate Complex"
  
  • "Make a Killing on Kindle" + "Text Box Callouts"
• "Complex Layouts"
  
  • "Demand of Blood"

- - -

But, when dealing with actually meaningful content in asides/sidenotes...

The example I'm thinking of looked something like this:

HTML:

<p>Blah blah blah.</p>

<blockquote class="aside">
  <hr class="optional"/>
  <p class="aside">⚠ This is an important note.</p>
  <hr class="optional"/>
</blockquote>

<p>This is some more text.</p>

KF7 would look like:

Blah blah blah.

-----------------------------

⚠ This is an important note.

-----------------------------

This is some more text.

On larger/modern devices, you'd apply CSS for:

• float: right
• 33% screen width.
• <hr/> above + below
  
  • Optionally visible.

On smaller/older devices, you'd apply CSS for:

• inline/"blockquote" style
• 100% screen width
• <hr/> above + below
  
  • This could also be done with CSS3 ::before + ::after, but that would be less reliable across devices.

Still, I'm not a large fan of small width floats with text, because:

• it'll probably get annoying for readers for all the reasons listed
• + at decent-sized fonts, you sometimes only fit a handful of words per line.
  
  • For more on that, see my rant about mobile website design, where somehow 3 or 4 words per line + huge margins is "acceptable"/normalized.

Originally Posted by j.p.s

But unless the author wanted to emphasize those snippets of text such bolding or pullquotes is a disservice to the author and (most?) readers.

Yeah... to me, it seems like a holdover from Print—where you're dealing with a large, two-page spread. Or very large page sizes (like a newspaper) with very dense text + multiple columns/articles per page.

To have it in an ebook, where you're only dealing with a single chapter/article at a time... it seems dumb.

Originally Posted by JSWolf

What I would do if I was doing it is a one cell table with no lines showing and put the quote in there and have it be on the left or right side of the screen. I'm not sure how well this would work centered.

No. Using a <table> for this would be completely unacceptable for Accessibility reasons.

<blockquote> or HTML5's/EPUB3's <aside>s are exactly what this sort of stuff is built for.

Originally Posted by Quoth

Fortunately in "The Circular Study" all the letters are short by Tom to Felix and the parallel next column are Tom's long "journal" entries about what he is really thinking and doing.

Sometimes a picture is worth a thousand words. :P

Originally Posted by Quoth

Sooner or later a Table will bite when used in an ebook unless it can fit on the smallest screen at a reasonable font size.

Only use <table> for tabular data.

DO NOT use it for trying to place text side-by-side or any nonsense like that.

Ever since I began reading so much more Text-to-Speech, I've become extremely aware of poor <table> usage.

For more best practices, see my recent posts in:

• 2021: "Formatting tables best practices"
• 2021: "Tables in ePub"

Originally Posted by Quoth

A Table almost the size of a full chapter is going to have problems.

lol. I'm reminded of a few LibreOffice bugs where people have documents with multi-hundred page tables + cells larger than a page.

I just see such a report, then facepalm...

(Some of the more obscure bugreports then deal with widows/orphans breaking in these enormous multi-page cells too...)

Originally Posted by Quoth

I've very old bilingual texts that are Irish and English. Fortunately (or unfortunately) they are PDFs and alternate pages. [...] Also I have some bilingual paper books that have Hebrew and English on facing pages and loads of footnotes.

There were also Bibles where you had multi-column translations (4? + Notes) running down the pages all side-by-side.

Some crazy stuff they were designing.

In ebooks, a better way might be to have clickable buttons that swap between languages.

See below.

- - -

!!!Complete Sidenotes Below!!!

Multi-Language Pages/Ebooks

Recently, I stumbled upon this KOReader bug:

• #6162: "Chinese, Japanese and Korean typography: some questions"

which lead me down an entire typography wormhole.

These fantastic W3C pages were linked:

• W3C: "Requirements for Chinese Text Layout"
• W3C: "Requirements for Japanese Text Layout"
• W3C: "Requirements for Hangul Text Layout and Typography"

Especially see the Chinese one, where they have it in 3 languages:

• Traditional Chinese
• Simplified Chinese
• English

Each language is marked with a left colored border:

• Green = Traditional
• Orange = Simplified
• *Thick Green = Notes

You can then:

• Select between all languages using a button
  
  • + an "All" option. (Default)
    

This is the kind of stuff where ebooks are actually doing things that aren't possible in Print.

Let's say you were reading an English+Old Irish book, you'd be able to toggle languages on and off as needed.

Originally Posted by Quoth

I can't read Irish anyway, and my fluent daughter can't read much of it because it's probably transcription of a 300 to 600 yo MSS and even 19th C. is hard for Irish speakers (they are 19th C. translations) because of the 1948 spelling reform.

That's a whole other wormhole I was going down for a few weeks...

Language-Specific Fonts/Character Variants

Did you know that Cyrillic has the same letters... but the 3 different languages:

• Russian
• Bulgarian
• Serbian

draw them differently... even slightly different italics. See:

• Wikipedia.org: "Cyrillic Script" > Letterforms and Typography
• Especially the image: "Cyrillic Alternates"
  
  • Blue = Russian
    
  • Peach = Bulgarian
    
  • Yellow = Serbian/Macedonian
    

- - -

Old Cyrillic + Curly Ribbon Characters

And if you guys ever run across this funky-looking "curly ribbon" character mixed with some Greek-looking text:

• ꙋ = U+A64B = CYRILLIC SMALL LETTER MONOGRAPH UK

DO NOT confuse it with this curly-looking one:

• ȣ = U+0223 = LATIN SMALL LETTER OU
  
  • Wikipedia.org: "Ou (Ligature)"

which is an "ου" (Latin/Greek) = omicron-upsilon ligature...

ꙋ is actually an older version of this:

• Wikipedia.org: "Uk (Cyrillic)"

which is an "оу" (Cyrillic) ligature.

Turns out, the text was:

• Wikipedia.org: "Old East Slavic"

This Old East Slavic / Church Slavonic stuff was all back in the 11th–14th century.

Side Note: There were also about a dozen different 'b'-looking characters that morphed into Cyrillic over the centuries:

• ь = Soft sign
• Ъ = Hard sign
• ҍ = Semisoft sign
• ѣ = Yat
• ꙏ = Yer
• [...]

See:

• Wikipedia.org: "Early Cyrillic Alphabet"
  
  • Greek -> 9th century ->
• "Reforms of Russian orthography"
  
  • -> 1700s/1907 -> today.