Conversion Problems from HTML to AZW3

gm139 · 03-25-2013, 01:19 PM

I am trying to convert an HTML file to AZW3 format so to read it on my kindle paperwhite.

Here is an HTML sample.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>

<style>

body {
	margin:0;
	padding:0;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11.5pt;
}

.Book {
	margin:0cm;
	margin-bottom:.0001pt;
	text-align:center;
	font-size:16.0pt;
	font-weight:bold;
	page-break-before:always;
	page-break-after:always;
}

.Chapter {
	margin-bottom:4.0cm;
	text-align:center;
	font-size:14.0pt;
	font-weight:bold;
	page-break-before:always; 
} 

p {
	margin-top: 0px;	
	margin-bottom:.0001pt;
	text-align:justify;
	text-indent:11.35pt;
}

</style>

<body>

<div class=Book>BOOK TITLE</div>

<div class=Chapter>CHAPTER TITLE</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>

</html>

Two problems:

1 - The calibre reader does not recognize the "margin-bottom:4.0cm;" tag.

2 - I send the converted file to the Kindle but it does not show the book.

theducks · 03-25-2013, 02:10 PM

Quote:

Originally Posted by gm139

I am trying to convert an HTML file to AZW3 format so to read it on my kindle paperwhite.

Here is an HTML sample.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>

<style>

body {
	margin:0;
	padding:0;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11.5pt;
}

.Book {
	margin:0cm;
	margin-bottom:.0001pt;
	text-align:center;
	font-size:16.0pt;
	font-weight:bold;
	page-break-before:always;
	page-break-after:always;
}

.Chapter {
	margin-bottom:4.0cm;
	text-align:center;
	font-size:14.0pt;
	font-weight:bold;
	page-break-before:always; 
} 

p {
	margin-top: 0px;	
	margin-bottom:.0001pt;
	text-align:justify;
	text-indent:11.35pt;
}

</style>

<body>

<div class=Book>BOOK TITLE</div>

<div class=Chapter>CHAPTER TITLE</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>

</html>

Two problems:

1 - The calibre reader does not recognize the "margin-bottom:4.0cm;" tag.

2 - I send the converted file to the Kindle but it does not show the book.

class="Chapter" Note the missing quotes around the RED above

What is with everyone using Absolute values for normal margins?

margin: 0; (used in .Book is the correct form. Zero has no units

Mixed case selector names are not wrong, but you must maintain case in ALL usage. KISS

gm139 · 03-25-2013, 06:30 PM

Quotes are not requested by HTML in this case. In fact, with or without quotes you get the same result. You can try opening the HTML sent with any browser and it works even without quotes.

"margin-bottom:4.0cm;" does not work with calibre while it is repressented correctly by browsers.

writerkit · 03-26-2013, 03:41 AM

You might try using "em" instead of "cm" for your margins. An "em" = 12 pts. Works for most every format.

gm139 · 03-26-2013, 08:46 AM

Tried with "em". Nothing changes.

writerkit · 03-30-2013, 02:17 AM

Whoops - I failed to read part of your post.

I recall reading on another thread that AZW3 might not be supported on some devices, unless the file is downloaded from Amazon - something about the DRM code auto-embedded into AZW3, or somesuch. Maybe someone else can clarify better than I. The reason I think this may be true is that my Kindle app on my iPhone cannot read the AZW3 files that I create for my ebook. I can, however, read the files using the Kindle app on my Mac.

You might be able to read the book on your Paperwhite if you convert it to MOBI instead of AZW3 in Calibre, however.

Re: the margin problem, the other fix/hack I suggest trying is to enclose the offending <div> in a container with a display:block property. Seems to remedy many conversion ills for me:

In between your <style></style tag>, add the following:

.container
{
display: block
}

Add the corresponding HTML to your Chapter tag:

<div class="container"><div class="Chapter">CHAPTER TITLE</div></div>

You can use whatever you like, instead of "container." By the way, I also suggest correcting your style tag syntax to comply with standards:

<style type="text/css">

And finally, you might find it helpful to run your file through the W3C Validator at

http://validator.w3.org/

Good luck!

gm139 · 03-31-2013, 05:20 PM

thank you. I tried but it does not work. BTW, I converted other HTMLs to AZW3 without problems. My Kindle was able to recognize and show the book.

Thanks to http://validator.w3.org/ I discovered that the </head> was in the wrong position. Dreamwaver cs6 did not notice it. However, even moving it to the right position did not modify the situation.

Another interesting thing is that the

Code:

font-size:16.0pt;
font-weight:bold;

styles in .Book are not recognized, while the same styles are correctly interpreted in .Chapter.

writerkit · 04-05-2013, 11:18 PM

Sorry my suggestions didn't work for you. I've done a little more investigating for you.

I just ran your sample through the W3 validator (after moving the </head> tag to the correct position before <body>), and it returned 3 errors. Below is a cut and paste, except that I've added these brackets [] around the portions of the tags that are displayed in RED on the results page, indicating where the error lies:
____________

Validation Output: 3 Errors

Error Line 7, Column 7: required attribute "type" not specified

<style[>]

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Error Line 49, Column 12: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<div class=[B]ook>BOOK TITLE</div>

Error Line 51, Column 12: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<div class=[C]hapter>CHAPTER TITLE</div>

_____________________

I added the correct type attribute to your style tag:

<style type="text/css">

And enclosed your HTML class tags in quotes:

<div class="Book">

<div class="Chapter">

and the sample validated perfectly.

I then converted the sample to AZW3 in Calibre, and viewed it in Calibre's viewer (I don't have a Kindle).

Both "Book Title" and "Chapter" are in bold. There is a 4-centimeter (1-1/2 inch) margin between "Chapter" and the latin text paragraph.

So as the next thing to try, I suggest you enclose your HTML class tags attributes in straight quotes, as I did, and see if that helps.

I also strongly recommend making all your measurements consistent. Use pt or em, but do it across the board. Good luck to you!

gm139 · 04-06-2013, 06:02 AM

Thank you for your answer.
I modified my htm sample accordingly.
Here is my html code now:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>

<style type="text/css">

body {
	margin:0;
	padding:0;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11.5pt;
}

.Book {
	margin:0cm;
	margin-bottom:.0001pt;
	text-align:center;
	font-size:16.0pt;
	font-weight:bold;
	page-break-before:always;
	page-break-after:always;
}

.Chapter {
	margin-bottom:4.0cm;
	text-align:center;
	font-size:14.0pt;
	font-weight:bold;
	page-break-before:always; 
} 

p {
	margin-top: 0px;	
	margin-bottom:0pt;
	text-align:justify;
	text-indent:15.35pt;
}

</style>
</head>

<body>

<div class="Book">BOOK TITLE</div>

<div class="Chapter">CHAPTER TITLE</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>

</html>

I converted it to AZW3 using calibre 9.26. But reading it using the calibre reader I still get the same problems:

1 - the book title is not bold

2 - there is not space between "chapter" and "p".

Please, If you have time try with my code. Thank you again.

writerkit · 04-25-2013, 02:57 AM

Quote:

Originally Posted by gm139

Thank you for your answer.
I modified my htm sample accordingly.

Please, If you have time try with my code. Thank you again.

I am so sorry I have not been on the forum for a long time. I don't know whether you've fixed your problem, but I did want to report back with my results, using your new code.

I've attached two screenshots - each with the Calibre viewer on the left and Kindle for Mac viewer on the right. As you can see, your code translated correctly on both.

I have also attached the azw3 file that your code generated in Calibre. I hope these help!

03-31-2013, 05:20 PM	#7
gm139 Member Posts: 10 Karma: 10 Join Date: Mar 2013 Device: kindle paperwhite	thank you. I tried but it does not work. BTW, I converted other HTMLs to AZW3 without problems. My Kindle was able to recognize and show the book. Thanks to http://validator.w3.org/ I discovered that the </head> was in the wrong position. Dreamwaver cs6 did not notice it. However, even moving it to the right position did not modify the situation. Another interesting thing is that the Code: font-size:16.0pt; font-weight:bold; styles in .Book are not recognized, while the same styles are correctly interpreted in .Chapter. Last edited by gm139; 04-01-2013 at 03:32 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Conversion from html to azw3 does not work	gm139	Conversion	2	03-19-2013 06:32 AM
Azw3 conversion : little picture ( vignette )	gouni	Conversion	2	03-05-2013 04:06 AM
Conversion from epub to azw3	Joy736	Conversion	12	01-01-2013 11:00 AM
azw3 conversion bug?	KleineMaus	Conversion	17	06-13-2012 12:00 PM
html to epub conversion problems	DrPL	ePub	4	12-22-2010 07:13 AM

03-25-2013, 06:30 PM	#3
gm139 Member Posts: 10 Karma: 10 Join Date: Mar 2013 Device: kindle paperwhite	Quotes are not requested by HTML in this case. In fact, with or without quotes you get the same result. You can try opening the HTML sent with any browser and it works even without quotes. "margin-bottom:4.0cm;" does not work with calibre while it is repressented correctly by browsers.

03-26-2013, 03:41 AM	#4
writerkit Enthusiast Posts: 27 Karma: 10 Join Date: Mar 2013 Device: none	You might try using "em" instead of "cm" for your margins. An "em" = 12 pts. Works for most every format.

03-26-2013, 08:46 AM	#5
gm139 Member Posts: 10 Karma: 10 Join Date: Mar 2013 Device: kindle paperwhite	Tried with "em". Nothing changes.

03-30-2013, 02:17 AM	#6
writerkit Enthusiast Posts: 27 Karma: 10 Join Date: Mar 2013 Device: none	Whoops - I failed to read part of your post. I recall reading on another thread that AZW3 might not be supported on some devices, unless the file is downloaded from Amazon - something about the DRM code auto-embedded into AZW3, or somesuch. Maybe someone else can clarify better than I. The reason I think this may be true is that my Kindle app on my iPhone cannot read the AZW3 files that I create for my ebook. I can, however, read the files using the Kindle app on my Mac. You might be able to read the book on your Paperwhite if you convert it to MOBI instead of AZW3 in Calibre, however. Re: the margin problem, the other fix/hack I suggest trying is to enclose the offending <div> in a container with a display:block property. Seems to remedy many conversion ills for me: In between your <style></style tag>, add the following: .container { display: block } Add the corresponding HTML to your Chapter tag: <div class="container"><div class="Chapter">CHAPTER TITLE</div></div> You can use whatever you like, instead of "container." By the way, I also suggest correcting your style tag syntax to comply with standards: <style type="text/css"> And finally, you might find it helpful to run your file through the W3C Validator at http://validator.w3.org/ Good luck!

04-05-2013, 11:18 PM	#8
writerkit Enthusiast Posts: 27 Karma: 10 Join Date: Mar 2013 Device: none	Sorry my suggestions didn't work for you. I've done a little more investigating for you. I just ran your sample through the W3 validator (after moving the </head> tag to the correct position before <body>), and it returned 3 errors. Below is a cut and paste, except that I've added these brackets [] around the portions of the tags that are displayed in RED on the results page, indicating where the error lies: ____________ Validation Output: 3 Errors Error Line 7, Column 7: required attribute "type" not specified <style[>] The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>. Error Line 49, Column 12: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified <div class=[B]ook>BOOK TITLE</div> Error Line 51, Column 12: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified <div class=[C]hapter>CHAPTER TITLE</div> _____________________ I added the correct type attribute to your style tag: <style type="text/css"> And enclosed your HTML class tags in quotes: <div class="Book"> <div class="Chapter"> and the sample validated perfectly. I then converted the sample to AZW3 in Calibre, and viewed it in Calibre's viewer (I don't have a Kindle). Both "Book Title" and "Chapter" are in bold. There is a 4-centimeter (1-1/2 inch) margin between "Chapter" and the latin text paragraph. So as the next thing to try, I suggest you enclose your HTML class tags attributes in straight quotes, as I did, and see if that helps. I also strongly recommend making all your measurements consistent. Use pt or em, but do it across the board. Good luck to you!