Mobileread
Advanced ebook formatting tips
#11  rogue_ronin 07-01-2009, 11:08 PM
Quote AlexBell
For what it is worth I am struggling with designing an XHTML ebook template. I'll upload it for comments in a day or so, though it certainly won't be finished by then.
I'm working now on a set of macros to implement a very basic xhtml template. I use NoteTab, so it's slightly influenced by the way that editor works.

I posted publicly here, looking for feedback. I'd love to see what you're doing, and if there's any chance to help each other.

My basic premise is that the xhtml is an archive file, convertible to anything else. It's also heavy on meta information, and fairly strict in its layout so that I can automate the creation/conversion using regex and search/replace macros.

Done properly, it should be trivial to generate .oef files, and .epub.

m a r
Reply 

#12  rogue_ronin 07-02-2009, 02:47 AM
Of course, I've changed what's listed there -- once I finish working through my tools, I'll have an "improved" version. For example, Table of Contents, what I'm working on now, has had to change.

I'm a beginner at xhtml -- trying for a purely semantic markup is both easier and more thought-intensive...

I haven't even been able to consider the CSS part yet!

I'll post some thoughts on markup soon. I'm on the hump with this, just at around 50% done.

m a r
Reply 

#13  AlexBell 07-02-2009, 03:15 AM
As mentioned in an earlier post here is the very first draft of an ebook template. The zip file contains EbookTemplate.html, ebook.css, EbookTemplate.jpg (for the cover), and pachelbel.jpg for the title page.

Yes, I know Pachelbel is best known as a composer rather than an author, but he looks so cute.

I have built EbookTemplate.prc with Mobipocket Creator, and it seems to look reasonable on a Cybook Gen3. I'd really appreciate it if people could look at it on other readers, and especially if people could suggest improvements in the HTML and CSS. I'd like the Author and Book title to look better than they do.

Regards, Alex
[zip] EbookTemplate.zip (30.4 KB, 1050 views)
Reply 

#14  rogue_ronin 07-02-2009, 04:31 AM
Minor error: image is Pachelbel.jpg, but html file is looking for pachelbel.jpg -- didn't show up on my system until I renamed the jpg.

First impression: isn't the name attribute deprecated? Should you add the id attribute directly to either the div or the h#?

One of the things that I'm doing is making sure that each div has a unique name -- as you've done with the id="titlepage" bit. This will let you apply styles to any section individually.

If you were to use divs for each chapter, you would not have to explicitly page-break. Simply make it a part of the CSS.

Good start!

m a r
Reply 

#15  AlexBell 07-02-2009, 06:01 AM
Quote rogue_ronin
Minor error: image is Pachelbel.jpg, but html file is looking for pachelbel.jpg -- didn't show up on my system until I renamed the jpg.

First impression: isn't the name attribute deprecated? Should you add the id attribute directly to either the div or the h#?

One of the things that I'm doing is making sure that each div has a unique name -- as you've done with the id="titlepage" bit. This will let you apply styles to any section individually.

If you were to use divs for each chapter, you would not have to explicitly page-break. Simply make it a part of the CSS.

Good start!

m a r
Thanks, and sorry about the jpg.

So far as I know the name attribute is is not deprecated, and I don't know of any alternative for it. The file validates as XHTML strict, which it wouldn't do if name was deprecated.

id refers to unique divs or elements; there is only one title page but several chapters, and I don't think it's worth the trouble to give each chapter a unique id. And the other side of the coin is that although I have only one Author's name h1 I may well want to use several h3s, so I can't make them unique.

Could you give an example please of how a chapter could be put into it's own div and not need an explicit page break? I'd certainly use that technique, but can't work out how to do it.

And could you tell me please whether you built the prc with Mobipocket Creator or with Calibre? And what reader you are using? I suspect there are differences in the way a given prc or mobi format ebook looks depending on how it was built and on what reader it is read, but as I have only a Cybook and can't work out how to use Calibre I've no way of testing that suspicion.

Regards, Alex
Reply 

#16  Jellby 07-02-2009, 06:52 AM
Quote radius
If you put in some CSS that looks like this:

Code
.preface { font-style: italic;
}
.preface em { font-style: normal;
}
then you can instead write:

<div class="preface">...blah blah blah...<em>emphasized word</em>...blah blah blah...</div>
I even have:

Code
em { font-style: italic; }
em em { font-style: normal; }
So you can have:

Code
<em>emphasized text with <em>A Title</em> inside.</em>
Reply 

#17  rogue_ronin 07-02-2009, 07:50 AM
You're right, it's not deprecated, I just checked at W3Schools -- but I had a dialogue in another thread that referred to this very thing, and the other guy's point was that with the id attribute, adding an additional tag as an anchor was redundant. It was a good point, I thought.

If you do place your chapters into divs, you get several benefits, besides more control of styling. One is that example above. Another is that the chapter is explicitly instead of implicitly ended. (It's pretty logical, too.)

Add a class to the div for chapters, if you don't want to id them -- but if you id them, the link target is already done for you. If you class them, (say, with class="chapter") then just add something like:

Code
div.chapter
{
page-break-after: always
}
to your CSS.

I think that would work, it's what I intend to do myself, but I'm just beginning... so double-check it, of course.

I'm working on a very large xhtml spec -- trying to lay out a general structure that will work for most books.

Classes and divs seem to be key to keeping it organized and simple -- well, simpler. It's not ever going to be simple -- there are too many things in a book for that.

Here's my current, working chapter layout:
Code
<div class="Body" id="CHAPTER ID">	<h3>CHAPTER HEADING</h3>	<ul class="NavLinks"	<li>	<a href="#PREVIOUS CHAPTER ID">	<img src="images/up.png" />	</a>	</li>	<li>	<a href="#TableOfContents">	<img src="images/toc.png" />	</a>	</li>	<li>	<a href="#NEXT CHAPTER ID">	<img src="images/down.png" />	</a>	</li>	</ul>	<h4>SECTION HEADING</h4>	<h5>SUBSECTION HEADING</h5>	<p class="Epigram">EPIGRAM</p>	<p class="PullQuote">PULL QUOTE</p>	<p>CHAPTER CONTENT</p>	<p class="SceneBreak">&nbsp;</p>	<img id="MAP ID" class="Map" src="images/MAPNAME.EXT" />	<img id="ILLUSTRATION ID" class="Illustration" src="images/ILLUSTRATIONNAME.EXT" />	<table id="TABLE ID">TABLE CONTENTS</table>	<a id="LINK-TO-ENDNOTE ID" class="EndNoteLink" href="END-NOTE-ID">LINK-TO-ENDNOTE NAME</a>
</div>
Don't Panic!

I'm using a Spine/Body layout, so the chapters are part of the body of the book, thus the current class name. It could change.

Not everything listed would be in every chapter -- I'm just trying to come up with what might, and trying to think ahead about what to use. I haven't confirmed any of this as valid yet -- just a first swing.

I'm doing it this way because I'm writing macro-scripts for everything -- it'll be mostly automated, and I largely won't have to remember it once I figure it out.

If you added content to this, it would be pretty ugly. The idea is just to get everything explicitly structured and named -- then CSS it into a thing of beauty.

m a r

ps: I just looked at your code my browser -- I have an REB1100 and it doesn't have much in the way of CSS support.
Reply 

#18  radius 07-02-2009, 09:18 AM
Quote Jellby
I even have:

Code
em { font-style: italic; }
em em { font-style: normal; }
So you can have:

Code
<em>emphasized text with <em>A Title</em> inside.</em>
That's actually what I wrote to begin with, until I realized I was talking about a preface and it would be more clear in a div
Reply 

#19  Ankh 07-02-2009, 07:34 PM
Quote radius
Then, since there seems to be a slight preference on Mobileread among North American English readers to have paragraphs indicated by indenting but not indent the first paragraph, I would add something like this:

Code
p { text-indent: 1.5em;
}
h2 + p { text-indent: 0em;
}
This should make most paragraphs have an indent of 1.5em but paragraphs that come after chapter headings have no indent.
I've seen pbooks where section breaks (thought breaks, asterisk break, type ornament) are followed by paragraph without an indentation. The more generic form:
Code
p{ text-indent: 0em;
}
p+p { text-indent: 1.5em;
}
would work for all of these cases, provided that section break markers (whatever they are, fleurons, asterisks, nonbreakable spaces) are enclosed in <div> block.
Reply 

#20  Jellby 07-03-2009, 05:09 AM
I've found that there are many cases to consider, so at the end I decided it was simple to just set:

Code
p.noindent { text-indent: 0; }
It's a pity CSS does not allow aliasing and reference, that would make it possible to say that every "h1 + p" is a "p.noindent" (or does it?).
Reply 

 « First  « Prev Next »  Last »  (2/5)
Today's Posts | Search this Thread | Login | Register