Do you prefer text- or image-based title pages?

Fitz Frobozz · Today, 01:57 PM

(By which I mean actual title pages, as opposed to cover pages.)

I am curious to know what folks tend to prefer here when you have a choice, text-based or image-based? Either way, assuming you prefer to keep things on a single page, how do you enforce that?

Asking because I have a text-based title page design that, thanks to the image in one case being just over a certain size threshold, seem to want to spill over into a second page even when I set constraints via CSS. The location where it breaks varies, and my CSS (example below) is often circumnavigated, somehow.

Example HTML/CSS:

Code:

HTML

<body class="title-page">
  <h2>Example title page</h2>

  <p>Lorem ipsum.</p>

  <figure>
    <img src="../images/example-title-page.png" alt="Example title page" aria-describedby="fig-example"/>

    <figcaption id="fig-example">Example image</figcaption>

  <p>Lorem ipsum.</p>

</body>

CSS

.title-page, .title-page h2, .title-page p, .title-page figure, .title-page figcaption {
  break-before: avoid;
  break-after: avoid;
  break-inside: avoid;
  page-break-before: avoid;
  page-break-after: avoid;
  page-break-inside: avoid;
  }

I realize that no matter what an editor does devices are always going to do what devices are wont to do, but I would like to take whatever sensible steps I can to limit my title pages to a single page. For now, though, I have fallen back on using a pure image-based title page as a temporary compromise while I work on a longer term solution.

Aside from just having a vague preference for using text in an ePub whenever possible, I also have more specific concerns about dark and light reading modes. The PNGs I'm currently working with for this temporary solution have the text set against a transparent background and I am wondering what might happen if I switch to JPG. Of course I'll be testing that myself at some point soon, but figured I would include it here anyway since it's relevant.

Suggestions & input are very welcome!

Karellen · Today, 02:09 PM

I will use either, and depends on how decorative the title page is in the pbook.
If the title page is basic, I'll use text. If the title page is using decorative fonts, maybe a border and fluerons, I'll scan it and use the image.
I then wrap the image in svg tags. I don't have any issues with the image overflowing, or a second page being forced, no matter how big the image is.

Turtle91 · Today, 02:50 PM

Ditto Karellen.

Just a couple quick comments about your example code… no particular order or priority.

I’m sure it’s just a typo, but you need to close out the </figure> after your </figcaption>.

Your css isn’t letting it pagebreak anywhere. Since these are just suggestions to the render (avoid if possible) it will break out at some point but you aren’t giving it anywhere you prefer to breakout, so it’ll just go wherever.

Since you are using ePub3, you may be able to use some of the more advanced layout options available with display:flex if you want to use text with a small graphic, or just use svg wrapper for a full page image.

Today, 01:57 PM	#1
Fitz Frobozz Member Posts: 22 Karma: 10 Join Date: May 2024 Device: Kindle Scribe	Do you prefer text- or image-based title pages? (By which I mean actual title pages, as opposed to cover pages.) I am curious to know what folks tend to prefer here when you have a choice, text-based or image-based? Either way, assuming you prefer to keep things on a single page, how do you enforce that? Asking because I have a text-based title page design that, thanks to the image in one case being just over a certain size threshold, seem to want to spill over into a second page even when I set constraints via CSS. The location where it breaks varies, and my CSS (example below) is often circumnavigated, somehow. Example HTML/CSS: Code: HTML <body class="title-page"> <h2>Example title page</h2> <p>Lorem ipsum.</p> <figure> <img src="../images/example-title-page.png" alt="Example title page" aria-describedby="fig-example"/> <figcaption id="fig-example">Example image</figcaption> <p>Lorem ipsum.</p> </body> CSS .title-page, .title-page h2, .title-page p, .title-page figure, .title-page figcaption { break-before: avoid; break-after: avoid; break-inside: avoid; page-break-before: avoid; page-break-after: avoid; page-break-inside: avoid; } I realize that no matter what an editor does devices are always going to do what devices are wont to do, but I would like to take whatever sensible steps I can to limit my title pages to a single page. For now, though, I have fallen back on using a pure image-based title page as a temporary compromise while I work on a longer term solution. Aside from just having a vague preference for using text in an ePub whenever possible, I also have more specific concerns about dark and light reading modes. The PNGs I'm currently working with for this temporary solution have the text set against a transparent background and I am wondering what might happen if I switch to JPG. Of course I'll be testing that myself at some point soon, but figured I would include it here anyway since it's relevant. Suggestions & input are very welcome! Last edited by Fitz Frobozz; Today at 02:12 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Do you prefer justified or left-aligned text on a your ereader?	CalbertAmu	General Discussions	103	01-14-2017 11:40 AM
PRS-T1 HTML to EPUB no word-wrap on some pages/missing pages of text	SonyPRST1Reader	Sony Reader	4	01-28-2016 08:40 AM
How do I set sort title based on the title with multiple books?	loviedovie	Calibre	2	02-09-2015 03:08 PM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
Sending text based web pages to kindle	tgnd	Amazon Kindle	2	07-10-2011 12:10 AM

Today, 02:09 PM	#2
Karellen Wizard Posts: 1,325 Karma: 6700864 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	I will use either, and depends on how decorative the title page is in the pbook. If the title page is basic, I'll use text. If the title page is using decorative fonts, maybe a border and fluerons, I'll scan it and use the image. I then wrap the image in svg tags. I don't have any issues with the image overflowing, or a second page being forced, no matter how big the image is.

Today, 02:50 PM	#3
Turtle91 A Hairy Wizard Posts: 3,208 Karma: 19000001 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Ditto Karellen. Just a couple quick comments about your example code… no particular order or priority. I’m sure it’s just a typo, but you need to close out the </figure> after your </figcaption>. Your css isn’t letting it pagebreak anywhere. Since these are just suggestions to the render (avoid if possible) it will break out at some point but you aren’t giving it anywhere you prefer to breakout, so it’ll just go wherever. Since you are using ePub3, you may be able to use some of the more advanced layout options available with display:flex if you want to use text with a small graphic, or just use svg wrapper for a full page image.

Advert