Unable to convert html to azw or epub

Lucas Malor · 10-13-2013, 07:00 AM

UPDATE: probably it's a viewer bug, see this post.

I converted the attached html document (the bzip file) to an epub document. If I open it with the Calibre ebook reader I can't read anything but two divs. My Kobo has no problems to read it correctly.

I have Calibre 1.7 on Linux.

EDIT: As Kovid Goyal pointed out, a workaroud is to use the flow mode.

kovidgoyal · 10-14-2013, 12:56 AM

That html uses javascript to display its contents. Most ebook viewers do not support javascript.

Lucas Malor · 10-14-2013, 06:04 AM

It doesn't use javascript, I can see it with NoScript with JS disabled for the doc.

kovidgoyal · 10-14-2013, 08:21 AM

Then it's a magic conspiracy that is preventing it from being displayed in anything except your browser.

Lucas Malor · 10-15-2013, 01:59 PM

As I previously said, the browser shows me the original document correctly (and Kindle shows me correctly the converted one). It's the Calibre e-book viewer that does not show the converted document correctly. So the magic conspiracy is for Calibre only or for your browser that creates JS for HTML only docs

I attach the converted document as well.

DoctorOhh · 10-15-2013, 05:47 PM

Quote:

Originally Posted by Lucas Malor

So the magic conspiracy is for Calibre only or for your browser that creates JS for HTML only docs

When your source has a dozen or so JS files in it, it is easy to jump to conclusions.

kovidgoyal · 10-16-2013, 06:59 AM

So it wasn't JS, it was some kind of absolute layout markup instead, click the little yellow scroll icon in the top right corner of the viewer and it will work.

Lucas Malor · 10-20-2013, 04:26 PM

I can confirm the book is displayed well using flow mode.

I purged the html package from useless files and corrected html and css so they pass all w3c validators, and the problem still happens (bad using page mode, good with flow mode). Maybe the ebook reader adds some html tags to divide the html into pages, and this brokes up this document?

I re-uploaded the documents, see first post.

DoctorOhh · 10-20-2013, 08:18 PM

Quote:

Originally Posted by Lucas Malor

I can confirm the book is displayed well using flow mode.

I purged the html package from useless files and corrected html and css so they pass all w3c validators, and the problem still happens (bad using page mode, good with flow mode).

There is nothing more to do. The book works in flow mode.

kovidgoyal · 10-20-2013, 11:11 PM

Passing w3c validation is meaningless. In order to ensure that your markup display well in ebook readers, you have to ensure it is reflowable. This means not using absolute sizes/positions, tables for layout and so on. If I were you I'd use the filter css conversion options to remove all width position, left, top, height etc css properties during conversion.

Lucas Malor · 10-21-2013, 01:14 PM

I've found: the problem is caused by position: relative for the div #contenuto. I removed it on line 1365 and re-converted the document, and now it looks fine.

For what I know position: relative is not discouraged by epub 2 specs.

Lucas Malor · 10-22-2013, 04:24 PM

I tried to remove a child div of #contenuto, an I can see now its sibling, but no other divs except the last one, as for the original converted doc. Indeed if you notice you can see the first and last page of the document, even if all the contents are inside #contenuto. I can't say if this is a rendering problem.

Lucas Malor · 10-23-2013, 01:08 PM

Ok, I've found it and created a very simple testcase: shortly, I think the problem is that Calibre ebook viewer calculates the width of an element summing the widths of all the pages that element spans:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
        <title>Test</title>
        <style type="text/css">
            #container
            {
                width: 500px;
                overflow: hidden;
            }

            #content
            {
                position: relative;
            }
        </style>
    </head>
    
    <body>
        <div id="container">
            <div id="content">
                1<br />
                2<br />
                3<br />
                4<br />
                5<br />
                6<br />
                7<br />
                8<br />
                9<br />
                10<br />
                11<br />
                12<br />
                13<br />
                14<br />
                15<br />
                16<br />
                17<br />
                18<br />
                19<br />
                20<br />
                21<br />
                22<br />
                23<br />
                24<br />
                25<br />
                26<br />
                27<br />
                28<br />
                29<br />
                30<br />
                31<br />
                32<br />
                33<br />
                34<br />
                35<br />
                36<br />
                37<br />
                38<br />
                39<br />
                40<br />
                41<br />
                42<br />
                43<br />
                44<br />
                45<br />
                46<br />
                47<br />
                48<br />
                49<br />
                50<br />
                51<br />
                52<br />
                53<br />
                54<br />
                55<br />
                56<br />
                57<br />
                58<br />
                59<br />
                60<br />
                61<br />
                62<br />
                63<br />
                64<br />
                65<br />
                66<br />
                67<br />
                68<br />
                69<br />
                70<br />
                71<br />
                72<br />
                73<br />
                74<br />
                75<br />
                76<br />
                77<br />
                78<br />
                79<br />
                80<br />
                81<br />
                82<br />
                83<br />
                84<br />
                85<br />
                86<br />
                87<br />
                88<br />
                89<br />
                90<br />
                91<br />
                92<br />
                93<br />
                94<br />
                95<br />
                96<br />
                97<br />
                98<br />
                99<br />
                100<br />
            </div>
        </div>
    </body>
</html>

To be concise, the problem rises when a #content div is the child of a #container div; #container has a not-auto width and hides overflows, while #content is relative positioned and its contents span more than one ebook page.

Notice that if you set #container width to 1000px you can see the second page but not the third, that's why I think the viewer wrongs to calculate the element width. It's not clear why this happens only when #content is relative positioned.

kovidgoyal · 10-23-2013, 01:12 PM

As i said absolute layouts are going to cause problems, they are inherently not reflowable.

Lucas Malor · 10-23-2013, 02:26 PM

...and as I said before and before, this is a relative positioned element, not absolute.

(Why no ones read me... Am I so boring? Next time I've to add some girl images to my posts)

10-14-2013, 06:04 AM	#3
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	It doesn't use javascript, I can see it with NoScript with JS disabled for the doc. Last edited by Lucas Malor; 10-14-2013 at 06:10 AM.

10-20-2013, 04:26 PM	#8
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	I can confirm the book is displayed well using flow mode. I purged the html package from useless files and corrected html and css so they pass all w3c validators, and the problem still happens (bad using page mode, good with flow mode). Maybe the ebook reader adds some html tags to divide the html into pages, and this brokes up this document? I re-uploaded the documents, see first post. Last edited by Lucas Malor; 10-20-2013 at 04:29 PM.

10-21-2013, 01:14 PM	#11
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	I've found: the problem is caused by position: relative for the div #contenuto. I removed it on line 1365 and re-converted the document, and now it looks fine. For what I know position: relative is not discouraged by epub 2 specs. Last edited by Lucas Malor; 10-22-2013 at 03:07 PM.

10-22-2013, 04:24 PM	#12
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	I tried to remove a child div of #contenuto, an I can see now its sibling, but no other divs except the last one, as for the original converted doc. Indeed if you notice you can see the first and last page of the document, even if all the contents are inside #contenuto. I can't say if this is a rendering problem. Last edited by Lucas Malor; 10-22-2013 at 04:29 PM.

10-23-2013, 01:08 PM	#13
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	Ok, I've found it and created a very simple testcase: shortly, I think the problem is that Calibre ebook viewer calculates the width of an element summing the widths of all the pages that element spans: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Test</title> <style type="text/css"> #container { width: 500px; overflow: hidden; } #content { position: relative; } </style> </head> <body> <div id="container"> <div id="content"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> 21<br /> 22<br /> 23<br /> 24<br /> 25<br /> 26<br /> 27<br /> 28<br /> 29<br /> 30<br /> 31<br /> 32<br /> 33<br /> 34<br /> 35<br /> 36<br /> 37<br /> 38<br /> 39<br /> 40<br /> 41<br /> 42<br /> 43<br /> 44<br /> 45<br /> 46<br /> 47<br /> 48<br /> 49<br /> 50<br /> 51<br /> 52<br /> 53<br /> 54<br /> 55<br /> 56<br /> 57<br /> 58<br /> 59<br /> 60<br /> 61<br /> 62<br /> 63<br /> 64<br /> 65<br /> 66<br /> 67<br /> 68<br /> 69<br /> 70<br /> 71<br /> 72<br /> 73<br /> 74<br /> 75<br /> 76<br /> 77<br /> 78<br /> 79<br /> 80<br /> 81<br /> 82<br /> 83<br /> 84<br /> 85<br /> 86<br /> 87<br /> 88<br /> 89<br /> 90<br /> 91<br /> 92<br /> 93<br /> 94<br /> 95<br /> 96<br /> 97<br /> 98<br /> 99<br /> 100<br /> </div> </div> </body> </html> To be concise, the problem rises when a #content div is the child of a #container div; #container has a not-auto width and hides overflows, while #content is relative positioned and its contents span more than one ebook page. Notice that if you set #container width to 1000px you can see the second page but not the third, that's why I think the viewer wrongs to calculate the element width. It's not clear why this happens only when #content is relative positioned. Last edited by DoctorOhh; 10-23-2013 at 07:43 PM. Reason: back to php tags

10-14-2013, 12:56 AM	#2
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That html uses javascript to display its contents. Most ebook viewers do not support javascript.

10-14-2013, 08:21 AM	#4
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Then it's a magic conspiracy that is preventing it from being displayed in anything except your browser.

10-16-2013, 06:59 AM	#7
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	So it wasn't JS, it was some kind of absolute layout markup instead, click the little yellow scroll icon in the top right corner of the viewer and it will work.

10-20-2013, 11:11 PM	#10
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Passing w3c validation is meaningless. In order to ensure that your markup display well in ebook readers, you have to ensure it is reflowable. This means not using absolute sizes/positions, tables for layout and so on. If I were you I'd use the filter css conversion options to remove all width position, left, top, height etc css properties during conversion.

10-23-2013, 01:12 PM	#14
kovidgoyal creator of calibre Posts: 45,345 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	As i said absolute layouts are going to cause problems, they are inherently not reflowable.

10-23-2013, 02:26 PM	#15
Lucas Malor Pain in the arse Posts: 758 Karma: 77856 Join Date: Apr 2013 Device: Kobo Aura One, Kindle 4	...and as I said before and before, this is a relative positioned element, not absolute. (Why no ones read me... Am I so boring? Next time I've to add some girl images to my posts)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Unable to convert from EPUB to AZW3	jujubox7	Conversion	12	02-12-2013 01:43 PM
Unable to convert MOBI to EPUB	bb46970	Conversion	6	08-21-2011 04:45 PM
Unable to convert Mobi to Epub	Japes	Conversion	27	07-19-2011 12:14 AM
Convert azw to epub or pdf?	NLight95	Calibre	5	06-19-2011 06:04 AM
[Old Thread] unable to convert ebooks(rtf, txt,lit,html,pdf) to lrf in calibre .4.131	jackdeth191	Calibre	9	05-02-2009 02:55 AM

Advert

Advert