Background Image w/ Text on Top

[BookWalker]

I've used InDesign CS6 to layout a print book. (Yes, I know I need to get new with the program, but I've got a lot of space to clear up and am still running Windblows 7) The print version looks great, but I made one vital mistake that does not go over to epub the same. I placed an image behind every chapter number. Image attached.

I'd like to keep it the same, if at all possible.

I'm trying to use Calibre to edit the book to get the same look. I'm a severe newb using Calibre, as well as HTML and CSS, but I can grasp and learn what is taught. I did have the speech bubble floating where it belonged while using Edit Book, but when I saved and looked at it as an epub, it was not showing up in Calibre E-book viewer the same. Unfortunately my temper got the better of me and I trashed that file, so I can't upload it for anyone to take a peek at.

I've searched endlessly to find help to accomplish getting this image behind the chapter number, and came across the following:

https://www.mobileread.com/forums/sh...d.php?t=227739
https://ebooks.stackexchange.com/que...-or-epub-books

But I'm doing something wrong, because it didn't work for me. I must be putting the coding in the wrong places.

I've considered making a new image with the speech bubble and the chapter numbers, but then I'd have to work around the TOC showing up properly too. Each chapter has a number and title, which the client wants to include both.

Does anyone have any advise on how to overcome this problem?... I just want the eBook to look like the print version if possible, and to function across all or most devices properly.

Thanks much for your help!

[Quoth]

You'd need to make an image with the chapter in it, or have the image and number separate.

You can make an ebook similar layout and fonts to a paper one, but there is lots you can't do at all. Headers, footers, text flowing around the shapes of an image and matching the size of text and images. Also multiple columns, math formula and tables are tricky.

That's why Indesign is a fudge for ebooks. Better to have the source in a Word or LO Writer file without headers, footers or stuff that doesn't work in an ebook. Use a small pages. Save an extra DocX with the fonts, styles, headings, TOC without page numbers.
Make an epub2 and proof it.

Edit a copy with features for paper book.

Then use Indesign to do a paper book if a PDF export of the Word/Writer document isn't fancy enough. Unless you are doing magazines, children's picture books, science texts or coffee table books there is no need for Indesign. LO Writer 4.x or later (it's at maybe 6.2) or Word 2002/XP or later is fine. Some versions of Word might need the PDF export plugin.

ALL Print ready for paper is via 1:1 PDF.
All modern ebooks can start as epub2. Amazon takes epub2 to make their three flavours of Kindle for reflowable ebooks.

It's not a real ebook if it can't reflow and doesn't work on 4" to 10" screens with the user making text smaller or bigger (the images don't usually resize).

Calibre or Sigil are better for real ebooks than Indesign.

[BookWalker]

Originally Posted by Quoth

You'd need to make an image with the chapter in it, or have the image and number separate.

You can make an ebook similar layout and fonts to a paper one, but there is lots you can't do at all. Headers, footers, text flowing around the shapes of an image and matching the size of text and images. Also multiple columns, math formula and tables are tricky.

That's why Indesign is a fudge for ebooks. Better to have the source in a Word or LO Writer file without headers, footers or stuff that doesn't work in an ebook. Use a small pages. Save an extra DocX with the fonts, styles, headings, TOC without page numbers.
Make an epub2 and proof it.

Edit a copy with features for paper book.

Then use Indesign to do a paper book if a PDF export of the Word/Writer document isn't fancy enough. Unless you are doing magazines, children's picture books, science texts or coffee table books there is no need for Indesign. LO Writer 4.x or later (it's at maybe 6.2) or Word 2002/XP or later is fine. Some versions of Word might need the PDF export plugin.

ALL Print ready for paper is via 1:1 PDF.
All modern ebooks can start as epub2. Amazon takes epub2 to make their three flavours of Kindle for reflowable ebooks.

It's not a real ebook if it can't reflow and doesn't work on 4" to 10" screens with the user making text smaller or bigger (the images don't usually resize).

Calibre or Sigil are better for real ebooks than Indesign.

Thanks much for a bunch of great information and advise.

So it looks like in reality I should be producing print in one program and eBooks in another. I'm not a fan of Word, but understand it's value if it performs well in certain areas. I need to employ the right horse for the job.

I downloaded Sigil a couple of days ago, seeing that it has great reviews for doing eBooks, but when opening the program it pops up a bunch of error windows and then finally the program but it never runs. I need to get to the bottom of this, because I think that tackling eBooks in Sigil would be the best way to go.

Once again, appreciate you having offered knowledgeable advise.

[Tex2002ans]

Originally Posted by BookWalker

The print version looks great, but I made one vital mistake that does not go over to epub the same. I placed an image behind every chapter number. Image attached.

I'd like to keep it the same, if at all possible.

I don't see an attached image.

But what you want won't be possible and/or will break across many actual ereaders.

What may be possible is making the entire "Chapter + Number + Background Image" an image, but I recommend strongly against that. (See Note below.)

Originally Posted by BookWalker

I've searched endlessly to find help to accomplish getting this image behind the chapter number, and came across the following:

https://www.mobileread.com/forums/sh...d.php?t=227739
https://ebooks.stackexchange.com/que...-or-epub-books

Completely ignore the ebooks.stackexchange answer. There's absolutely no way that can work on actual devices.

And the MobileRead thread, "Background image with text on top?", was mostly just musings. (And many, many years old. The thread was 2013.) ... Things that might work, but definitely not something to do if designing a book for sale in the major stores.

Originally Posted by BookWalker

I did have the speech bubble floating where it belonged while using Edit Book, but when I saved and looked at it as an epub, it was not showing up in Calibre E-book viewer the same.

Most likely using complicated snippets of CSS3 you found online, which many ereaders don't support.

Originally Posted by BookWalker

Does anyone have any advise on how to overcome this problem?... I just want the eBook to look like the print version if possible, and to function across all or most devices properly.

Keep It Simple Stupid (KISS).

Note: I've written about this many times over the years. Here's one a few years ago:

• "Why is it so hard to preserve blank lines?"
• "Any tips on adding ornamental art in Sigil or Scrivener?"
  
  • This is where I warn against chapter titles as images.
• "How to Format Scene Breaks?"
  
  • This is where I discuss replacing IMAGES of fleurons/scenebreaks with actual characters + reasoning why.

Originally Posted by Quoth

[...] but there is lots you can't do at all. Headers, footers, text flowing around the shapes of an image and matching the size of text and images.

Text flowing around is possible in CSS3 (EPUB3) by using CSS Shapes... but support in actual devices... probably close to 0.

But the good news is, if support isn't there, shapes should fallback to thinking the image is a rectangle.

Originally Posted by BookWalker

So it looks like in reality I should be producing print in one program and eBooks in another. I'm not a fan of Word, but understand it's value if it performs well in certain areas. I need to employ the right horse for the job.

InDesign is fine for Print, but when you export EPUB, it requires a hell of a lot of massaging.

If you've designed your document with Styles, your job may be partially easier.

I just wrote about how/why Styles are so important a few months ago:

• Post #10, "How to export indexes from indesign to epub"

but there's still a lot that has to be done after the EPUB export to clean up InDesign's mess. :P

InDesign exports an EPUB that "looks good" for iBooks, but fails miserably across other devices.

Originally Posted by BookWalker

I downloaded Sigil a couple of days ago, seeing that it has great reviews for doing eBooks, but when opening the program it pops up a bunch of error windows and then finally the program but it never runs.

What's the errors?

There is a bunch of crap that InDesign might insert in there that Sigil WARNS you about, but it should definitely open it.

[Hitch]

Originally Posted by Tex2002ans

I don't see an attached image.

But what you want won't be possible and/or will break across many actual ereaders.

Yup. Believe me, we try this once every 6 months, trying to see if we can make ti work. Ixnay, no, zip, zein, zilch, no way.

What may be possible is making the entire "Chapter + Number + Background Image" an image, but I recommend strongly against that. (See Note below.)

I don't, really. If you get cute about it, you can make the entire top of your page, full-width, left-to-right, the image and that works mostly. Is it ideal, when someone opens said book on a SMALL smartphone? No, but it works, nonetheless. I would strongly recommend, though, that if the two can be extracted from each other--the number and the image--that you do so and stack them. That's my best recommendation.

Spoiler:

BTW, my "easiest" way to do this is to produce the PDF, export it at press-quality, then extract the chapter pages, then export those to JPG or PNG @300-600DPI, and then crop them all the same. Get a pixel measurement or inches, whatever works for you, from the top of the page to the bottom of the chapter graphic and then crop every single one identically. Then slap that sucker in the code, stacking at the upper edge of the first "page" of the chapter (the top of the chapter's html file, IOW, right?) and that works okay. Is it FANtastic? No, but it works okay 99% of the time. If you just GOTTA have the original chapter head layout.

Completely ignore the ebooks.stackexchange answer. There's absolutely no way that can work on actual devices.

Amen. Once again, eBook formatting advice given to someone from someone else who hasn't got a single freaking clue about how either ePUB or MOBI work.

I would add that I don't feel that you have to work from Word or a word-processing file to make ebooks. Now..is it far easier? Yes, but if you are religious with your INDD file, and always use styles and do NOT use overrides, except very, very VERY sparingly, you can export a reflowable ePUB and then dive into the code (HTML/CSS) and clean it up. It's not undoable and it's not "horrible," as long as you're clean and tidy and good about your INDD usage. And I don't cast blame at you for using CS6, either.

As always, offered FWIW.


Hitch

[JSWolf]

This is s duplicate thread. Go to https://www.mobileread.com/forums/sh...d.php?t=336240 for the original thread where you can see the solution.

[Hitch]

Originally Posted by JSWolf

This is s duplicate thread. Go to https://www.mobileread.com/forums/sh...d.php?t=336240 for the original thread where you can see the solution.

Yes, as long as the book isn't headed for Amazon.

Hitch

[JSWolf]

Originally Posted by Hitch

Yes, as long as the book isn't headed for Amazon.

Hitch

What's wrong with a graphic image as the chapter header?

[Hitch]

Originally Posted by JSWolf

What's wrong with a graphic image as the chapter header?

Nothing, but the question is about floating text atop an image. NOT floating an image at the top of the page. The "solution" that Ruben, et al, made for whoosie-whats-its, 3 years ago, was SVG which is not "all Kindles, all the time."

Hitch

[JSWolf]

Originally Posted by Hitch

Nothing, but the question is about floating text atop an image. NOT floating an image at the top of the page. The "solution" that Ruben, et al, made for whoosie-whats-its, 3 years ago, was SVG which is not "all Kindles, all the time."

Hitch

My solution is to put the chapter number in with the graphic and use that for the chapter header. That would work to get the right look

[BookWalker]

Originally Posted by JSWolf

My solution is to put the chapter number in with the graphic and use that for the chapter header. That would work to get the right look

Thanks everyone for you input! I've learned a lot from all of the posts.

I think I know now that it's going to not work with floating text over an image. And I don't want the ebook to look crappy depending on what device it ends up on, settings, etc.

[Hitch]

Originally Posted by BookWalker

Thanks everyone for you input! I've learned a lot from all of the posts.

I think I know now that it's going to not work with floating text over an image. And I don't want the ebook to look crappy depending on what device it ends up on, settings, etc.

GOOD FOR YOU. I mean it.

Just try the suggestion I gave you, with the PDF, Yes, it's a bit onerous but faster and easier than you think. Using the whole width of the 6x9" or whatever PDF also ensures that you don't get funky results in the LITB or on some devices (yes, I'm lookin' at you, Kindle Paperwhites and Voyages!!!) where an image larger than 50% of the width of the screen zooms up--unasked, you understand!--to take up the full width of the page/screen.

Hitch

[Tex2002ans]

Originally Posted by Hitch

If you get cute about it, you can make the entire top of your page, full-width, left-to-right, the image and that works mostly. Is it ideal, when someone opens said book on a SMALL smartphone? No, but it works, nonetheless. I would strongly recommend, though, that if the two can be extracted from each other--the number and the image--that you do so and stack them. That's my best recommendation.

Originally Posted by Hitch

Then slap that sucker in the code, stacking at the upper edge of the first "page" of the chapter (the top of the chapter's html file, IOW, right?) and that works okay. Is it FANtastic? No, but it works okay 99% of the time. If you just GOTTA have the original chapter head layout.

And then make sure to use proper alt on the image so that Text-to-Speech can read it:

<div class="chapterimage">
	<img alt="Chapter 1: The Prince Arrives" src="../Images/Chapter01.png"/>
</div>

... but I still say throw that chapter-heading-image idea in the trashcan and just use normal HTML headings (<h1>, <h2>, [...])!

<h2>Chapter 1: The Prince Arrives</h2>

Originally Posted by Hitch

[...] but if you are religious with your INDD file, and always use styles and do NOT use overrides, except very, very VERY sparingly, you can export a reflowable ePUB and then dive into the code (HTML/CSS) and clean it up. It's not undoable and it's not "horrible," as long as you're clean and tidy and good about your INDD usage.

And we all know how often that is...

Originally Posted by JSWolf

This is s duplicate thread. Go to https://www.mobileread.com/forums/sh...d.php?t=336240 for the original thread where you can see the solution.

Thanks.

Soon after I answered here, I was digging through the Calibre subforum and was scratching my head, wondering how I saw the image and never saw any of those discussions when I wrote my post!

Originally Posted by BookWalker

I think I know now that it's going to not work with floating text over an image. And I don't want the ebook to look crappy depending on what device it ends up on, settings, etc.

Yep, and that's the thing, you have to remember that ebooks will be read:

• on anything from tall/skinny cellphones to huge/wide computer monitors.
• in every color font/background combination (especially Night Mode).
  
  • See my 2016, Post #22: "Problem with inline image"
• with HUGE FONT sizes.
  
  • This one alone made me shudder if you're trying to have chapter text "float" over a background image.
• in non-visual ways, like Text-to-Speech (TTS).
  
  • See my 2018 Reddit post explaining TTS differences between Dashes vs. Minus Sign.

So usually a good test with an ebook that "looks okay on the surface":

Toss that baby on a cellphone, bump up the font size a little, turn on Night Mode, then turn the phone landscape, and see if it still holds up. Most of the time, all those "fancy tricks" will break.

[JSWolf]

The chapter number and graphic as a graphic chapter header will work. I've seen it done in a number of eBooks.

[Hitch]

Originally Posted by JSWolf

The chapter number and graphic as a graphic chapter header will work. I've seen it done in a number of eBooks.

Jon, dear:

Yes, we've all agreed that it will.

Hitch