EPUB->AZW3 disrupts chapter headers

Siavahda · 10-01-2024, 08:10 AM

So when I have an EPUB with chapter header decorations - usually an image that goes above and/or below the chapter name - the header decoration always gets shunted to the right once it's in AZW3 and on my kindle.

For example

.chapter-title-decoration-below-inner {
display: inline-block;
height: 0.4833in;
width: 1.1967in;
margin: 0;
padding: 0
}

It displays properly when I check the AZW3 in the Calibre viewer, and on Kindle For PC. But once the file is on my kindle, the header is on the right, with part of the image not visible because it's been shoved a bit off the page.

It's always a problem with the display: inline-block. Sometimes removing it makes the image display properly, but often not.

My output profile is set to my kindle model - Paperwhite 3. I've tried aligning the images to center (with the display: inline-block deleted, and with it present), but that didn't do it. I'm not sure what else to try, or where the problem might be.

kovidgoyal · 10-01-2024, 10:07 AM

It will be a bug in the kindle renderer. Try a completely different approach to achieving the look you want.

Siavahda · 10-02-2024, 05:20 PM

I don't understand what you mean? The headers are supposed to be centred, but I haven't made the files, I don't have an approach, I'm just clicking convert so I can read these on my kindle. What approach am I meant to take?

theducks · 10-02-2024, 09:16 PM

Quote:

Originally Posted by Siavahda

I don't understand what you mean? The headers are supposed to be centred, but I haven't made the files, I don't have an approach, I'm just clicking convert so I can read these on my kindle. What approach am I meant to take?

It is a free for all out there. There is no law that they need to follow all the W3C.
You want center, specify that (and hope some foo who 'knows better' did not lock that out. ) Pick a brand and you will find 'quirks' in how they render code.

DNSB · 10-02-2024, 09:48 PM

Quote:

Originally Posted by Siavahda

I don't understand what you mean? The headers are supposed to be centred, but I haven't made the files, I don't have an approach, I'm just clicking convert so I can read these on my kindle. What approach am I meant to take?

What you are running into is one of the reasons that I edit virtually all the ebooks that I read. One recent ebook instead of using a simple text-align: center; to center text used margin-left:auto;, margin-right: auto; which does not work in all cases or with all renderers.

In your sample, there are 3 or more divs wrapped around the line that actually displays the image. You would have to at the combined effects of those styles to see what is actually happening and keep in mind cascade and specificity. See Cascade, specificity, and inheritance for a basic lesson.

Siavahda · 10-03-2024, 10:39 AM

Quote:

Originally Posted by theducks

It is a free for all out there. There is no law that they need to follow all the W3C.
You want center, specify that (and hope some foo who 'knows better' did not lock that out. ) Pick a brand and you will find 'quirks' in how they render code.

No idea what W3C means, but I think I understand what you're saying. I have tried to center the images already and that didn't help, alas.

Siavahda · 10-03-2024, 10:42 AM

Quote:

Originally Posted by DNSB

What you are running into is one of the reasons that I edit virtually all the ebooks that I read. One recent ebook instead of using a simple text-align: center; to center text used margin-left:auto;, margin-right: auto; which does not work in all cases or with all renderers.

In your sample, there are 3 or more divs wrapped around the line that actually displays the image. You would have to at the combined effects of those styles to see what is actually happening and keep in mind cascade and specificity. See Cascade, specificity, and inheritance for a basic lesson.

I edit everything I read, but usually only basic formatting, paragraph indents and stuff like that. But I think I understand (although I can't believe someone tried that instead of just centering?!) I've run into weirdly overcomplicated attempts to do a thing that could be done very simply with a different command; didn't occur to me that something like that could be happening here, but you're absolutely right.

I'll mess about with all those styles and see if I can figure out the problem that way. Thank you!

DNSB · 10-03-2024, 04:52 PM

Some stylesheets are generated by computers such as when you feed a Word .docx file into Vellum or use InDesign to create an ePub. Then there are the corporate stylesheets used by many publishers. All great sources for unnecessary complexity.

You may want to check HTML and CSS Tags Supported in Kindle Format 8 though those lists are incomplete.

If you open the azw3 ebook in calibre's ebook-editor and enable the Live CSS tool, it helps to see what is being applied.

10-01-2024, 08:10 AM	#1
Siavahda Zealot Posts: 107 Karma: 9400 Join Date: Aug 2010 Location: Helsinki Device: Kindle Paperwhite 2018	EPUB->AZW3 disrupts chapter headers So when I have an EPUB with chapter header decorations - usually an image that goes above and/or below the chapter name - the header decoration always gets shunted to the right once it's in AZW3 and on my kindle. For example .chapter-title-decoration-below-inner { display: inline-block; height: 0.4833in; width: 1.1967in; margin: 0; padding: 0 } It displays properly when I check the AZW3 in the Calibre viewer, and on Kindle For PC. But once the file is on my kindle, the header is on the right, with part of the image not visible because it's been shoved a bit off the page. It's always a problem with the display: inline-block. Sometimes removing it makes the image display properly, but often not. My output profile is set to my kindle model - Paperwhite 3. I've tried aligning the images to center (with the display: inline-block deleted, and with it present), but that didn't do it. I'm not sure what else to try, or where the problem might be.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub -> AZW3 conversion. Kindle displays incorrect chapter, but TOC is correct	greenskye	Conversion	9	07-28-2022 06:32 PM
Microsoft Word not labeling Chapter Headers as <h1>	Gary Friedman	Conversion	5	10-23-2014 12:12 AM
Chapter marks lost epub -> azw3	pepelugil	Conversion	3	10-01-2012 02:43 PM
Paragraph spaces in ePub to Mobi conversion disrupts indent formatting	markpearl	Conversion	34	09-21-2011 03:42 PM
what to do when chapter headers are images ?s	cybmole	Conversion	5	04-06-2011 04:02 PM

10-01-2024, 10:07 AM	#2
kovidgoyal creator of calibre Posts: 44,521 Karma: 24495784 Join Date: Oct 2006 Location: Mumbai, India Device: Various	It will be a bug in the kindle renderer. Try a completely different approach to achieving the look you want.

10-02-2024, 05:20 PM	#3
Siavahda Zealot Posts: 107 Karma: 9400 Join Date: Aug 2010 Location: Helsinki Device: Kindle Paperwhite 2018	I don't understand what you mean? The headers are supposed to be centred, but I haven't made the files, I don't have an approach, I'm just clicking convert so I can read these on my kindle. What approach am I meant to take?

10-03-2024, 04:52 PM	#8
DNSB Bibliophagist Posts: 40,457 Karma: 156982136 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Some stylesheets are generated by computers such as when you feed a Word .docx file into Vellum or use InDesign to create an ePub. Then there are the corporate stylesheets used by many publishers. All great sources for unnecessary complexity. You may want to check HTML and CSS Tags Supported in Kindle Format 8 though those lists are incomplete. If you open the azw3 ebook in calibre's ebook-editor and enable the Live CSS tool, it helps to see what is being applied.

Advert

Advert