Please check ebook template

AlexBell · 07-20-2009, 05:40 AM

I've done more work on an XHTML 1.0 Strict Ebook Template, and prepared a small simple ebook with it and its associated CSS.

I'd really appreciate any comments on the XHTML and CSS, and the resultant ebook before I upload it to the mobi section.

The attachment contains War is a Racket.html, ebook.css, SmedleyButler.jpg (for the title page) and warisaracket.jpg (for the cover).

I've prepared an ebook with Calibre and looked at it on my Cybook. I'd particularly appreciate any comments on how it looks on other readers.

Regards, Alex

rogue_ronin · 07-21-2009, 09:42 AM

Hi Alex,

Just took a quick look at it in both Firefox and IE. Noticed some things:

In the head,

Code:

<head>
	<title>War is a Racket</title>
	<meta name="Author" content="Alex Bell afjbell@bigpond.net.au"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" type="text/css" href="ebook.css"/>
	<!-- Version 1 of this book 2009-07-20 -->
</head>

Are you the author? I think Smedley is... Maybe you could use a meta value like preparer or proofer or publisher? Also, you might want to move the versioning and the preparation date into meta values, too. Machine readable, donchaknow!

Also, the cover is not showing, and the source doesn't have any code to display it.

Saw this, too:

Code:

			<img src="SmedleyButler.jpg"
			alt="Pachelbel" width="300" height="376"/>

What does "Pachelbel" mean? Maybe you copy/pasted? I think you want a value like "Photograph of Maj.General Smedley D. Butler" or something.

In the CSS I saw this:

Code:

div.photoholder {
    margin: auto;  /* Centres block level elements */
	padding: 0;
	width: 300px; /* For ebooks must be same as image */
		  } /* Manages graphics */

And I wonder if you want to hard-code the width into your photoholder class? If you use the class for another image, and it's not natively 300px, your comment suggests that it might cause issues.

That's just a quick look, hope it helps.

m a r

rogue_ronin · 07-21-2009, 09:49 AM

Oh, I found a freeware CSS editor called TopStyle.

Well, the most recent version is not free, but the 3.5 Lite version is.

m a r

AlexBell · 07-22-2009, 12:57 AM

Quote:

Originally Posted by rogue_ronin

Hi Alex,

Just took a quick look at it in both Firefox and IE. Noticed some things:

In the head,

Code:

<head>
	<title>War is a Racket</title>
	<meta name="Author" content="Alex Bell afjbell@bigpond.net.au"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" type="text/css" href="ebook.css"/>
	<!-- Version 1 of this book 2009-07-20 -->
</head>

Are you the author? I think Smedley is... Maybe you could use a meta value like preparer or proofer or publisher? Also, you might want to move the versioning and the preparation date into meta values, too. Machine readable, donchaknow!

Also, the cover is not showing, and the source doesn't have any code to display it.

Saw this, too:

Code:

			<img src="SmedleyButler.jpg"
			alt="Pachelbel" width="300" height="376"/>

What does "Pachelbel" mean? Maybe you copy/pasted? I think you want a value like "Photograph of Maj.General Smedley D. Butler" or something.

In the CSS I saw this:

Code:

div.photoholder {
    margin: auto;  /* Centres block level elements */
	padding: 0;
	width: 300px; /* For ebooks must be same as image */
		  } /* Manages graphics */

And I wonder if you want to hard-code the width into your photoholder class? If you use the class for another image, and it's not natively 300px, your comment suggests that it might cause issues.

That's just a quick look, hope it helps.

m a r

Many thanks. As Patricia and Ecclesiastes says, Of the making of books there is no end - or, one can never proof read enough.

The author, meta, and pachelbel errors were carelessness on my part. I used a graphic of Pachelbel when developing the template, and forgot to change the alt text.

The width in the photoholder does have to change if one uses a different graphic - the pachelbel graphic was smaller than the SmedleyButler graphic, so I changed both width and height, and will use other values depending on the size of the next author's graphic.

I thought I'd included warisaracket.jpg in the zip file for the cover. Apparently not.

Regards, Alex

AlexBell · 07-22-2009, 12:57 AM

Quote:

Originally Posted by rogue_ronin

Oh, I found a freeware CSS editor called TopStyle.

Well, the most recent version is not free, but the 3.5 Lite version is.

m a r

Thanks again. I've just downloaded that, and will try it out.

Regards, Alex

rogue_ronin · 07-22-2009, 01:27 AM

Quote:

Originally Posted by AlexBell

The width in the photoholder does have to change if one uses a different graphic - the pachelbel graphic was smaller than the SmedleyButler graphic, so I changed both width and height, and will use other values depending on the size of the next author's graphic.

I think I meant that while you could code it in for each image, if you don't it will be displayed at it's real size. So unless you need to add that info to resize, my suggestion is that you don't.

Quote:

I thought I'd included warisaracket.jpg in the zip file for the cover. Apparently not.

You did. But it is not referenced in the XHTML so it doesn't display automatically. I suppose that you intend to manually add it while converting to your reader.

If there is a way that your conversion recognizes the cover from the XHTML, perhaps you should do that.

m a r

rogue_ronin · 07-23-2009, 12:26 AM

Quote:

Originally Posted by rogue_ronin

I think I meant that while you could code it in for each image, if you don't it will be displayed at it's real size. So unless you need to add that info to resize, my suggestion is that you don't.

Also, it's a class so if you have more than one image in this class in a book, they will all be resized the same. Adding a class for every image is probably overkill.

Now, if you are only using one image, ever, you're okay -- but will have to manually recode each book.

m a r

AlexBell · 07-23-2009, 03:24 AM

Quote:

Originally Posted by rogue_ronin

Also, it's a class so if you have more than one image in this class in a book, they will all be resized the same. Adding a class for every image is probably overkill.

Now, if you are only using one image, ever, you're okay -- but will have to manually recode each book.

m a r

I think we have three issues here - hard coding the cover jpg into the HTML, manually changing the dimensions, and using more than one image.

The very few ebooks I've prepared have been done for Mobipocket format with Mobipocket Creator and/or Calibre. Both have the option/requirement of specifying the cover image separately, and 'bind' it to the ebook. I'm used to that process, and have not thought of (and don't see the need) to hard code it into the HTML. I'm still learning, and recognise that things may change when I become able to do ePub or other formats.

I don't expect at the moment to have more than one image in an ebook, so it's no great shakes to manually change the width and height.

The markup I use is taken directly from some web pages I have done and manages images of different sizes on the same page.
One example is http://citybaptistchurch.net/Iraq.htm

rogue_ronin · 07-23-2009, 11:24 AM

I think that you've touched the crux here -- you're really focused on mobipocket, so this suits that format.

I guess you're going to need some input from mobipocket users.

Luck!

m a r

AlexBell · 07-24-2009, 02:12 AM

Thanks. Best wishes with the Princess.

Regards, Alex

07-21-2009, 09:42 AM	#2
rogue_ronin Banned Posts: 475 Karma: 796 Join Date: Sep 2008 Location: Honolulu Device: Nokia 770 (fbreader)	Hi Alex, Just took a quick look at it in both Firefox and IE. Noticed some things: In the head, Code: <head> <title>War is a Racket</title> <meta name="Author" content="Alex Bell afjbell@bigpond.net.au"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="ebook.css"/> <!-- Version 1 of this book 2009-07-20 --> </head> Are you the author? I think Smedley is... Maybe you could use a meta value like preparer or proofer or publisher? Also, you might want to move the versioning and the preparation date into meta values, too. Machine readable, donchaknow! Also, the cover is not showing, and the source doesn't have any code to display it. Saw this, too: Code: <img src="SmedleyButler.jpg" alt="Pachelbel" width="300" height="376"/> What does "Pachelbel" mean? Maybe you copy/pasted? I think you want a value like "Photograph of Maj.General Smedley D. Butler" or something. In the CSS I saw this: Code: div.photoholder { margin: auto; /* Centres block level elements / padding: 0; width: 300px; / For ebooks must be same as image / } / Manages graphics */ And I wonder if you want to hard-code the width into your photoholder class? If you use the class for another image, and it's not natively 300px, your comment suggests that it might cause issues. That's just a quick look, hope it helps. m a r

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
save to disk template	speakingtohe	Calibre	9	05-29-2010 06:02 AM
Favor: check free ebook for me?	frabjous	Amazon Kindle	13	09-12-2009 01:55 PM
page-template ?	setzer	Calibre	13	07-27-2009 11:23 PM
Kindle DX Template	Gideon	Calibre	6	06-02-2009 12:52 AM

07-21-2009, 09:49 AM	#3
rogue_ronin Banned Posts: 475 Karma: 796 Join Date: Sep 2008 Location: Honolulu Device: Nokia 770 (fbreader)	Oh, I found a freeware CSS editor called TopStyle. Well, the most recent version is not free, but the 3.5 Lite version is. m a r

07-23-2009, 11:24 AM	#9
rogue_ronin Banned Posts: 475 Karma: 796 Join Date: Sep 2008 Location: Honolulu Device: Nokia 770 (fbreader)	I think that you've touched the crux here -- you're really focused on mobipocket, so this suits that format. I guess you're going to need some input from mobipocket users. Luck! m a r

07-24-2009, 02:12 AM	#10
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	Thanks. Best wishes with the Princess. Regards, Alex

Advert

Advert