Help to prevent orphans...

indieauthor83 · 09-05-2015, 10:14 AM

Hi,

I have written a book in which several images reside below headers. Sadly, when I've converted my book from Sigil, to Amazon Kindle Previewer (and also to my Kindle Fire) I'm finding that some of these images are appearing on the next page, and the headers they belong to are remaining on the previous page.

I've tried adding style="page-break-after:avoid" within the header tags, and I've also tried adding style="page-break-before:avoid" within the image tag, in the hope that the two will remain on the same page, but no joy.

Any help would be much appreciated!

Thanks x

RbnJrg · 09-05-2015, 10:40 AM

Quote:

Originally Posted by indieauthor83

Hi,

I have written a book in which several images reside below headers. Sadly, when I've converted my book from Sigil, to Amazon Kindle Previewer (and also to my Kindle Fire) I'm finding that some of these images are appearing on the next page, and the headers they belong to are remaining on the previous page.

I've tried adding style="page-break-after:avoid" within the header tags, and I've also tried adding style="page-break-before:avoid" within the image tag, in the hope that the two will remain on the same page, but no joy.

Any help would be much appreciated!

Thanks x

This is not an issue regarding Sigil, so should post it in the Kindle or Workshop forum (or a moderator to move your post toward one of these sections). There is nothing wrong with Sigil; Kindle doesn't support "page-break-after: avoid". If you are looking for a solution for the .kf8 platform, do a searh in the Kindle subforum; you'll find there several "solutions". One of these ones, you can read it here:

https://www.mobileread.com/forums/sho...36&postcount=4

Another method, that also works in ADE is:

https://www.mobileread.com/forums/sho...92&postcount=4

But in ADE, (if you are using ADE 4.02 or below) "page-break-after: avoid" works

so you won't have any trouble with RMSDK based ereaders.

Regards

DiapDealer · 09-05-2015, 10:40 AM

Keeping captions or headers with images has always been problematic in reflowable text. There may be some tricks available in html5 or css3 (for things that are destined to be kindlebooks), but I don't know what they are.

indieauthor83 · 09-05-2015, 11:14 AM

Quote:

Originally Posted by RbnJrg

This is not an issue regarding Sigil, so should post it in the Kindle or Workshop forum (or a moderator to move your post toward one of these sections). There is nothing wrong with Sigil; Kindle doesn't support "page-break-after: avoid". If you are looking for a solution for the .kf8 platform, do a searh in the Kindle subforum; you'll find there several "solutions". One of these ones, you can read it here:

https://www.mobileread.com/forums/sho...36&postcount=4

Another method, that also works in ADE is:

https://www.mobileread.com/forums/sho...92&postcount=4

But in ADE, (if you are using ADE 4.02 or below) "page-break-after: avoid" works

so you won't have any trouble with RMSDK based ereaders.

Regards

Thanks,

I appreciate the problem doesn't lay with Sigil, I posted it here because this is the program that I'm working with. To amend my present code, I'm using Sigil.

Thanks for the links I'll give them a whirl.

If anyone comes up with anything else please get intouch!

Thanks

x

theducks · 09-05-2015, 11:40 AM

I use my own EXPANDED view of the box model to track down things.

remember you need to leave room for everything to fit in the Outer BOX
<body> </body>

Margins, padding they all add up to burst the bottom onto the next screen
add up all the top and bottom PX (remember the @page), those need to be LESS than the screen (allows for users. Status lines

)

I avoid bottom margins. I push a block down with a top margin.
I use line-height to space lines in the same block (eg <p>foo<br />bar</p> )
I pad to get things away from 'borders'

Notjohn · 09-06-2015, 05:43 AM

Quote:

Originally Posted by DiapDealer

Keeping captions or headers with images has always been problematic in reflowable text. There may be some tricks available in html5 or css3 (for things that are destined to be kindlebooks), but I don't know what they are.

Wherever possible, I try to include what would otherwise be caption information in the text paragraph immediately preceding, so it doesn't really matter whether the image falls on the same page.

This becomes a bit problematical if there's a print edition, but it sometimes works.

At worst, I think e-book readers by now are willing to tolerate the caption's appearing on the following page. I generally put image and caption in their own file, so as to avoid the horror show when captions wind up on the top of the FOLLOWING images, as I have seen in some picture books, page after page of mismatched caption & image.

indieauthor83 · 09-08-2015, 06:11 PM

Thanks everyone for your repliea. And good advice NotJohn.

Well I opted in the end to force a page break for several of the images. On the Fire this looks perfect. On the other devices it looks just fine (I did a check). So all's good.

I had hoped there would be something to keep headers with images, but it's good to know it's not just me this is happening to, and that there's no quick-fix. I'm sure e-readers will be used to it, in this case

Thanks for all of the replies, they are much appreciated.

x

Tex2002ans · 09-08-2015, 09:50 PM

Quote:

Originally Posted by indieauthor83

I had hoped there would be something to keep headers with images, but it's good to know it's not just me this is happening to, and that there's no quick-fix. I'm sure e-readers will be used to it, in this case

The only real 100% surefire way to keep the image Headers/Captions with the image is to create a new image with the text inside:

Click image for larger version

Name: BuiltinHeaderCaption.jpg
Views: 164
Size: 85.9 KB
ID: 141842

Although I would not recommend this method at all. The disadvantages heavily outweigh the advantages.

It degrades the quality of the images, doesn't allow the text to scale or be user adjustable, the text can't be tweaked by CSS, isn't readable by text-to-speech, becomes an absolute pain to maintain (in a future device, if you want higher quality images, you have to redo all of the caption work), [...].

The method that I use is wrap the whole thing in a "page-break-inside: avoid", and hope that devices get better compatibility in the future.

Turtle91 · 09-09-2015, 01:49 AM

You can also wrap everything in SVG...but only the "cool" devices support SVG....

Code:

  <div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 881 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

      <image height="1500" width="881" xlink:href="../Images/cover.jpg" />

<!--  add 100px to height of viewbox and image to make room for caption -->
      <text text-anchor="middle" x="50%" y="40" style="fill:white; font-size:50px; font-family:serif">Caption</text>     
    </svg>
  </div>

exaltedwombat · 09-09-2015, 07:25 AM

Within the practicalities of today's eBook reading devices, I find the safest option is to put a page break before the image, and specify its display size so that there's a good chance the caption will fit on the same page. The strong possibility of a preceding short page may be considered a lesser evil.

Again, to those of us dealing with customers hung up on getting a facsimile of the printed page, I can only share your pain.

09-05-2015, 10:14 AM	#1
indieauthor83 Enthusiast Posts: 30 Karma: 10 Join Date: Feb 2015 Location: UK Device: kindle fire hd	Help to prevent orphans... Hi, I have written a book in which several images reside below headers. Sadly, when I've converted my book from Sigil, to Amazon Kindle Previewer (and also to my Kindle Fire) I'm finding that some of these images are appearing on the next page, and the headers they belong to are remaining on the previous page. I've tried adding style="page-break-after:avoid" within the header tags, and I've also tried adding style="page-break-before:avoid" within the image tag, in the hope that the two will remain on the same page, but no joy. Any help would be much appreciated! Thanks x

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The Orphans is now available	TheOrphansAuthor	Self-Promotions by Authors and Publishers	0	06-08-2014 12:08 PM
using widows & orphans	cybmole	Sigil	11	05-16-2011 01:07 AM
Widows and Orphans	danrodney	ePub	10	12-08-2010 02:08 PM
Windows and Orphans?	Catire	ePub	5	06-29-2010 03:25 PM

09-05-2015, 10:40 AM	#3
DiapDealer Grand Sorcerer Posts: 28,359 Karma: 203720150 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Keeping captions or headers with images has always been problematic in reflowable text. There may be some tricks available in html5 or css3 (for things that are destined to be kindlebooks), but I don't know what they are.

09-05-2015, 11:40 AM	#5
theducks Well trained by Cats Posts: 30,912 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	I use my own EXPANDED view of the box model to track down things. remember you need to leave room for everything to fit in the Outer BOX <body> </body> Margins, padding they all add up to burst the bottom onto the next screen add up all the top and bottom PX (remember the @page), those need to be LESS than the screen (allows for users. Status lines ) I avoid bottom margins. I push a block down with a top margin. I use line-height to space lines in the same block (eg <p>foo<br />bar</p> ) I pad to get things away from 'borders'

09-08-2015, 06:11 PM	#7
indieauthor83 Enthusiast Posts: 30 Karma: 10 Join Date: Feb 2015 Location: UK Device: kindle fire hd	Thanks everyone for your repliea. And good advice NotJohn. Well I opted in the end to force a page break for several of the images. On the Fire this looks perfect. On the other devices it looks just fine (I did a check). So all's good. I had hoped there would be something to keep headers with images, but it's good to know it's not just me this is happening to, and that there's no quick-fix. I'm sure e-readers will be used to it, in this case Thanks for all of the replies, they are much appreciated. x

09-09-2015, 07:25 AM	#10
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	Within the practicalities of today's eBook reading devices, I find the safest option is to put a page break before the image, and specify its display size so that there's a good chance the caption will fit on the same page. The strong possibility of a preceding short page may be considered a lesser evil. Again, to those of us dealing with customers hung up on getting a facsimile of the printed page, I can only share your pain.

Advert

Advert