Kindle page issue

jfree · 06-28-2025, 01:10 PM

I know Kindle is a problem, but need to create a Kindle version of a book for a friend and am having a problem with the first page of one chapter. Book was converted to epub from InDesign. Have modified a few things from my print version in InDesign and have done some minor editing in Sigil to fix a couple of things and to add a new page (section) or two. Most things have worked out fine. However, I have one chapter, where I have a photo with caption under the chapter title and before the opening paragraph (in the print book, the photo with caption is inline with the text, but for the epub I moved it between the chapter title and opening paragraph.

In any case, what happens when I preview it in Kindle Previewer, if the previewer is in tablet view the image appears at the bottom of the page with the first paragraph on next page (which I could possibly live with), but if viewed on Kindle e-reader setting, chapter title is on one page and image and caption are on the bottom of the next page--see attached images of what should look like and what happens.

I'm a newbie with code, so if you offer edits, please spell them out clearly.

Thanks for any suggestions

KevinH · 06-28-2025, 03:33 PM

A screen shot of the code you are using and any related css would help. Also is this epub2 or epub3 you are trying to convert to Kindle. How large in pixels is the image?

jfree · 06-28-2025, 04:23 PM

Thought I posted images--perhaps I did it wrong --used attachments

Here is code from beginning of page through part of first paragraph:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>CHAPTER 5:</title>
<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css"/>
</head>

<body id="Boys_From_The_Bronx_ePub_2nd-v6-12">
<div class="_idGenObjectStyleOverride-1">
<h2 class="Chapter--" title="Chapter 5: The War"><a id="_idTextAnchor013" target="_blank"></a><span id="page42" role="doc-pagebreak" aria-label="31" epub:type="pagebreak"></span>CHAPTER 5:</h2>

<h1 class="Chapter-Title sigil_not_in_toc"><a id="_idTextAnchor014" target="_blank"></a>THE WAR</h1>

<h3 class="Chapter-subtitle sigil_not_in_toc"><a id="_idTextAnchor015" target="_blank"></a>Military Service and Missing the Club</h3>

<div class="_idGenObjectLayout-1">
<div id="_idContainer021" class="_idGenWritingDirection-1">
<div id="_idContainer019">
<img class="_idGenObjectAttribute-1" src="image/Pvt_Bernard_and_brother_Donald%2C_c._1944_.png" alt="Bernie in military uniforms"/>
</div>

<div id="_idContainer020" class="_idGenObjectStyleOverride-1">
<p class="pic-caption ParaOverride-3">Pvt Bernard and brother Donald, c. 1944</p>
</div>
</div>
</div>

<p class="Chapter-Opener"><span class="Drop-Cap CharOverride-5">T</span>he group formally started in February 1938 when the boys were 10 and 11 years old. The War in Europe began in 1939, when they were likely not so aware of what was happening. The December 1941 attack on Pearl Harbor happened when some of the boys were 15 and 16. Even though this

jfree · 06-28-2025, 04:39 PM

Oh and pixel size as shown in sigil is
396px ✕ 486px

KevinH · 06-28-2025, 04:40 PM

We still need to see the linked css file (css/idGeneratedStyles.css) that defines all those classes used throughout that chapter to know if it is forcing a page break. Especially since the classes for each container may include hard fixed x,y positions just like a fixed layout epub would.

I am really not a fan of InDesign as the code it produces can be horrible and is better suited to pdf or fixed layout epub instead of a normal reflowable epub.

jfree · 06-28-2025, 04:41 PM

If this helps this is the CSS for the containers referenced in the code I pasted:

#_idContainer019 {
height:83.84%;
left:0%;
position:absolute;
top:0%;
width:99.68%;
z-index:0;
}
#_idContainer020 {
height:13.32%;
left:0.32%;
overflow:hidden;
position:absolute;
top:86.68%;
width:99.68%;
z-index:1;
}
#_idContainer021 {
display:inline-block;
padding:50.95% 0% 0% 0%;
position:relative;
width:31.15%;

jfree · 06-28-2025, 04:56 PM

Not sure if you need this as well--since they are referenced within the div:

img._idGenObjectAttribute-1 {
height:100.00%;
min-width:100%;
width:100.00%;

div._idGenObjectStyleOverride-1 {
border-width:0px;

KevinH · 06-28-2025, 06:46 PM

Any img that has width 100% and height 100% on some renderers may be pushed onto a new page depending on image size and starting point.

Also you seem to have created a fixed layout epub, not a reflowable epub. It uses absolute positioning. And as such it was designed for one specific fixed document screen size. Any deviation from that target size will mess with the layout.

How did you create the epub from InDesign? Did you specify Epub Reflowable when you exported it?

jfree · 06-28-2025, 07:47 PM

I exported it as flowable. I may have set that image to be fixed to try and have it stay with the title, but not sure.

KevinH · 06-28-2025, 10:06 PM

Try changing this line in the css in #_idContainer019

height:83.84%;

Does growing or shrinking that impact where the image appears under the Kindle Previewer?

If not, I am really not sure.

It appears to be an attempt to keep the image and caption together. You might want to try changing the outer div to a figure tag and use a figcaption for the caption text all inside the figure tag and add a pagebreak-after css.

I never use Kindle and so never use the Kindle Previewer. Perhaps someone else here can see the issue and provide help.

jfree · 07-01-2025, 10:03 AM

So changing the height did help.

How would I change "the outer div to a figure tag and use a figcaption for the caption text all inside the figure tag and add a pagebreak-after css.

RbnJrg · 07-01-2025, 10:20 AM

Quote:

Originally Posted by jfree

So changing the height did help.

How would I change "the outer div to a figure tag and use a figcaption for the caption text all inside the figure tag and add a pagebreak-after css.

Maybe what you can read in this post:

https://www.mobileread.com/forums/sh...6&postcount=42

it can help you.

06-28-2025, 01:10 PM	#1
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	Kindle page issue I know Kindle is a problem, but need to create a Kindle version of a book for a friend and am having a problem with the first page of one chapter. Book was converted to epub from InDesign. Have modified a few things from my print version in InDesign and have done some minor editing in Sigil to fix a couple of things and to add a new page (section) or two. Most things have worked out fine. However, I have one chapter, where I have a photo with caption under the chapter title and before the opening paragraph (in the print book, the photo with caption is inline with the text, but for the epub I moved it between the chapter title and opening paragraph. In any case, what happens when I preview it in Kindle Previewer, if the previewer is in tablet view the image appears at the bottom of the page with the first paragraph on next page (which I could possibly live with), but if viewed on Kindle e-reader setting, chapter title is on one page and image and caption are on the bottom of the next page--see attached images of what should look like and what happens. I'm a newbie with code, so if you offer edits, please spell them out clearly. Thanks for any suggestions

06-28-2025, 04:23 PM	#3
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	Thought I posted images--perhaps I did it wrong --used attachments Here is code from beginning of page through part of first paragraph: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title>CHAPTER 5:</title> <link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css"/> </head> <body id="Boys_From_The_Bronx_ePub_2nd-v6-12"> <div class="_idGenObjectStyleOverride-1"> <h2 class="Chapter--" title="Chapter 5: The War"><a id="_idTextAnchor013" target="_blank"></a><span id="page42" role="doc-pagebreak" aria-label="31" epub:type="pagebreak"></span>CHAPTER 5:</h2> <h1 class="Chapter-Title sigil_not_in_toc"><a id="_idTextAnchor014" target="_blank"></a>THE WAR</h1> <h3 class="Chapter-subtitle sigil_not_in_toc"><a id="_idTextAnchor015" target="_blank"></a>Military Service and Missing the Club</h3> <div class="_idGenObjectLayout-1"> <div id="_idContainer021" class="_idGenWritingDirection-1"> <div id="_idContainer019"> <img class="_idGenObjectAttribute-1" src="image/Pvt_Bernard_and_brother_Donald%2C_c._1944_.png" alt="Bernie in military uniforms"/> </div> <div id="_idContainer020" class="_idGenObjectStyleOverride-1"> <p class="pic-caption ParaOverride-3">Pvt Bernard and brother Donald, c. 1944</p> </div> </div> </div> <p class="Chapter-Opener"><span class="Drop-Cap CharOverride-5">T</span>he group formally started in February 1938 when the boys were 10 and 11 years old. The War in Europe began in 1939, when they were likely not so aware of what was happening. The December 1941 attack on Pearl Harbor happened when some of the boys were 15 and 16. Even though this Attached Thumbnails

06-28-2025, 04:40 PM	#5
KevinH Sigil Developer Posts: 8,759 Karma: 5706256 Join Date: Nov 2009 Device: many	We still need to see the linked css file (css/idGeneratedStyles.css) that defines all those classes used throughout that chapter to know if it is forcing a page break. Especially since the classes for each container may include hard fixed x,y positions just like a fixed layout epub would. I am really not a fan of InDesign as the code it produces can be horrible and is better suited to pdf or fixed layout epub instead of a normal reflowable epub. Last edited by KevinH; 06-28-2025 at 04:42 PM.

06-28-2025, 10:06 PM	#10
KevinH Sigil Developer Posts: 8,759 Karma: 5706256 Join Date: Nov 2009 Device: many	Try changing this line in the css in #_idContainer019 height:83.84%; Does growing or shrinking that impact where the image appears under the Kindle Previewer? If not, I am really not sure. It appears to be an attempt to keep the image and caption together. You might want to try changing the outer div to a figure tag and use a figcaption for the caption text all inside the figure tag and add a pagebreak-after css. I never use Kindle and so never use the Kindle Previewer. Perhaps someone else here can see the issue and provide help. Last edited by KevinH; 06-28-2025 at 10:11 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page turning issue	Owl_	KOReader	3	04-21-2022 11:25 AM
Kindle 4 Cant reach certain buttons issue and opening keyboard issue	Thefirebeast	KOReader	6	06-26-2021 12:46 AM
Kindle PW page refresh issue	Milanovl	Amazon Kindle	12	08-17-2017 06:52 PM
Kindle PW2 sharing and page number issue with side loaded books	blueJ91	Amazon Kindle	1	12-27-2014 03:18 AM

06-28-2025, 03:33 PM	#2
KevinH Sigil Developer Posts: 8,759 Karma: 5706256 Join Date: Nov 2009 Device: many	A screen shot of the code you are using and any related css would help. Also is this epub2 or epub3 you are trying to convert to Kindle. How large in pixels is the image?

06-28-2025, 04:39 PM	#4
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	Oh and pixel size as shown in sigil is 396px ✕ 486px

06-28-2025, 04:41 PM	#6
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	If this helps this is the CSS for the containers referenced in the code I pasted: #_idContainer019 { height:83.84%; left:0%; position:absolute; top:0%; width:99.68%; z-index:0; } #_idContainer020 { height:13.32%; left:0.32%; overflow:hidden; position:absolute; top:86.68%; width:99.68%; z-index:1; } #_idContainer021 { display:inline-block; padding:50.95% 0% 0% 0%; position:relative; width:31.15%;

06-28-2025, 04:56 PM	#7
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	Not sure if you need this as well--since they are referenced within the div: img._idGenObjectAttribute-1 { height:100.00%; min-width:100%; width:100.00%; div._idGenObjectStyleOverride-1 { border-width:0px;

06-28-2025, 06:46 PM	#8
KevinH Sigil Developer Posts: 8,759 Karma: 5706256 Join Date: Nov 2009 Device: many	Any img that has width 100% and height 100% on some renderers may be pushed onto a new page depending on image size and starting point. Also you seem to have created a fixed layout epub, not a reflowable epub. It uses absolute positioning. And as such it was designed for one specific fixed document screen size. Any deviation from that target size will mess with the layout. How did you create the epub from InDesign? Did you specify Epub Reflowable when you exported it?

06-28-2025, 07:47 PM	#9
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	I exported it as flowable. I may have set that image to be fixed to try and have it stay with the title, but not sure.

07-01-2025, 10:03 AM	#11
jfree jfree Posts: 9 Karma: 10 Join Date: Feb 2024 Location: NYS Device: Kindle paperwhite	So changing the height did help. How would I change "the outer div to a figure tag and use a figcaption for the caption text all inside the figure tag and add a pagebreak-after css.