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

Fitz Frobozz · 10-07-2024, 02: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 · 10-07-2024, 03: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 · 10-07-2024, 03: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.

Fitz Frobozz · 10-07-2024, 09:37 PM

Quote:

Originally Posted by Turtle91

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.

Oh, nice catches, Dion. I forgot to consider allowing breaks somewhere and have added a page-break-after: auto; to the figure element (whose figcaption is OK in my actual ePub but obviously not here in the example — glad you spotted that, though). Back to testing!

Quote:

Originally Posted by Karellen

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.

You make some good points here, Karellen. The more I think about this and the more I sit with my "placeholder" image-based pages — whose design has some features I'd have had a harder time implementing otherwise — the more I'm reconsidering how temporary that solution actually is now. Plus I'm starting to come up with some additional aesthetics that wouldn't be easy/possible otherwise.

RbnJrg · 10-07-2024, 10:23 PM

Quote:

Originally Posted by Fitz Frobozz

The more I think about this and the more I sit with my "placeholder" image-based pages — whose design has some features I'd have had a harder time implementing otherwise — the more I'm reconsidering how temporary that solution actually is now. Plus I'm starting to come up with some additional aesthetics that wouldn't be easy/possible otherwise.

Also you should consider if the solution choosed by you gives you the output you want in landscape mode (not only in portrait). For example, a font size that works in portrait maybe is not so good in landscape mode (that is, if your solution is based on text). I'm not saying that you must avoid "text" (many of my title pages are pure text) but you must consider all the variables. And since you are working on epub3, maybe it could be a good idea to set font sizes based on "vw", not "em" (on title pages, of course).

And, besides the solutions posted above, you can also consider a svg image, that is a different thing that a .jpg or .png inside a svg wrapper.

Fitz Frobozz · 10-08-2024, 12:13 AM

Quote:

Originally Posted by RbnJrg

Also you should consider if the solution choosed by you gives you the output you want in landscape mode (not only in portrait). For example, a font size that works in portrait maybe is not so good in landscape mode (that is, if your solution is based on text). I'm not saying that you must avoid "text" (many of my title pages are pure text) but you must consider all the variables. And since you are working on epub3, maybe it could be a good idea to set font sizes based on "vw", not "em" (on title pages, of course).

And, besides the solutions posted above, you can also consider a svg image, that is a different thing that a .jpg or .png inside a svg wrapper.

Good call on mentioning landscape mode, haven't gotten around to testing that just yet. Outside of these new title pages, I am not overly concerned. Oh no, I just jinxed myself, didn't I.

RE your and Dion's mention of epub3 I should mention that while I'm very tempted by the merits of epub3, my intention has been to to support epub2 (and possibly other formats) in this and other projects, so I'm trying to resist adding too many epub3-only features and creating more work for myself later. (So far iirc it's all relatively minor stuff that should be easy to repro in epub2, knock on wood.)

Oh, and thanks also for the SVG reminder. I'll mess around with that in a bit. Probably a good fit for these pages.

RbnJrg · 10-08-2024, 12:27 AM

Quote:

Originally Posted by Fitz Frobozz

RE your and Dion's mention of epub3 I should mention that while I'm very tempted by the merits of epub3, my intention has been to to support epub2...

Well, well, well. Then you need to build an epub3 ebook with fallback code for epub2 too, so if your epub is opened with modern apps/devices, then the reader can get the best reading experience; on the other hand, if the epub is opened with old ereaders, only the epub2/css2 code takes place. We have talked a lot about this subject in this forum; do a search and you'll find a lot of info.

10-07-2024, 02:57 PM	#1
Fitz Frobozz Enthusiast Posts: 28 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; 10-07-2024 at 03: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 12:40 PM
PRS-T1 HTML to EPUB no word-wrap on some pages/missing pages of text	SonyPRST1Reader	Sony Reader	4	01-28-2016 09:40 AM
How do I set sort title based on the title with multiple books?	loviedovie	Calibre	2	02-09-2015 04:08 PM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 06:27 PM
Sending text based web pages to kindle	tgnd	Amazon Kindle	2	07-10-2011 01:10 AM

10-07-2024, 03:09 PM	#2
Karellen Wizard Posts: 1,357 Karma: 6794938 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.

10-07-2024, 03:50 PM	#3
Turtle91 A Hairy Wizard Posts: 3,225 Karma: 19000635 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

Advert