Advanced ebook formatting tips

[Jellby]

Originally Posted by radius

If you put in some CSS that looks like this:

.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:

em { font-style: italic; }
em em { font-style: normal; }

So you can have:

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

[rogue_ronin]

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:

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:

<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.

[radius]

Originally Posted by Jellby

I even have:

em { font-style: italic; }
em em { font-style: normal; }

So you can have:

<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

[Ankh]

Originally Posted by 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:

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:

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.

[Jellby]

I've found that there are many cases to consider, so at the end I decided it was simple to just set:

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?).

[JSWolf]

1.5em is too larger for paragraph indents. I've taken to using 1.1em in ePub and that just cuts it as far as spacing goes.

[Peake]

Hi Alex,

I believe the name attribute was deprecated in XHTML 1.1 for certain tags (a and map), but is still valid under XHTML 1.0. I use the id attribute as sometimes I forget to update names to be unique when cutting and pasting and XHTML validation catches my foopahs.

I do some things differently in my HTML source, which I'll list below, and can be taken with a grain of salt, lol. I do not know if these differences would work in HTML source to generate ePub files or not, as I generally use Mobipocket Creator or mobigen.exe.

h1 for title only
p class="byline" and p class="authors" for those fields
h2 for toc, chapters, etc.
no divs for chapters. I add pagebreaks before the toc/chapters by using h2 {page-break-before: always} in the stylesheet. On longer texts where I don't want pagebreaks before each chapter, I use a div class="section" and specify the css pagebreak for those instead.
id="xxx" attributes in the corresponding h2 tags instead of anchor tags. This works in the html version's toc and the resulting prc file. Also can use these ids in the guide section in mobipocket creator (to specify table of contents, preface, start page and the like). You do need unique anchor tags or id tags for your table of contents if you are creating it yourself. A workaround if you are using Creator to create your TOC is to specify an attribute such as h2 class="toc_ent" or something similar, and creator will add id tags for you.

If you like, I could modify your example and post if that might make my ramblings somewhat clearer.

Regards,
Peake

[Nate the great]

This tip is primarily for makers of Mobipocket ebooks. I'm working on replacing nonstandard Mobipocket only attributes with ones that are standards compliant. Here is replacement for width that works with MobiCreator and uses standards compliant attributes:

<style type="text/css">
p.hanging {
margin-left:00;
text-indent:-20;
}
</style>

[AlexBell]

Originally Posted by Peake

Hi Alex,

If you like, I could modify your example and post if that might make my ramblings somewhat clearer.

Regards,
Peake

Thanks, Peake, I'd like that.

Regards, Alex

[AlexBell]

Originally Posted by Nate the great

This tip is primarily for makers of Mobipocket ebooks. I'm working on replacing nonstandard Mobipocket only attributes with ones that are standards compliant. Here is replacement for width that works with MobiCreator and uses standards compliant attributes:

<style type="text/css">
p.hanging {
margin-left:00;
text-indent:-20;
}
</style>

Are you sure that MobiCreator recognises margin-left: ? So far as I know Mobipocket only recognises margin-top: and margin: bottom - though it does seem to recognise margin: 2em 0 0 0; MobiCreator certainly does not recognise margin: auto;

I'm currently exploring Calibre as a replacement for MobiCreator.

Regards, Alex

[Nate the great]

Originally Posted by AlexBell

Are you sure that MobiCreator recognises margin-left: ? So far as I know Mobipocket only recognises margin-top: and margin: bottom - though it does seem to recognise margin: 2em 0 0 0; MobiCreator certainly does not recognise margin: auto;

I'm currently exploring Calibre as a replacement for MobiCreator.

Regards, Alex

I just tested it, and you're correct. It was doing something with margin-left but it wasn't consistent or correct.

[radius]

Originally Posted by Ankh

The more generic form:

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.

I like this from an economy of coding point of view, but I don't write like this because it doesn't express my mental model.

That is, I think of the indentation as being:

Paragraphs in general are indented by XXX space on the first line, except for the first paragraph in a section, which is not indented.


I don't really think of it as being:

Paragraphs are not indented, unless they follow another paragraph.

[Jellby]

Originally Posted by radius

I don't really think of it as being:

Paragraphs are not indented, unless they follow another paragraph.

Which, besides, is not true. Paragraphs can be indented after an illustration, a centered block, a piece of poetry, etc. (wich are usually not <p>'s, but <div>'s or whatever).

[Nate the great]

I decided to post again because I have some more examples.

The RAR is a collection of images from His Majesty's Dragon. It'a Ballantine title, and I like what they accomplished in spite of the limitation of the Mobipocket format.

The images included are not screenshots. Instead, Ballantine created the title page and section breaks as images. It had to be done this way becuase Mobi format doesn't support embedding fonts and the Kindle doesn't support fonts at all.

The Zip is an example of an about page. I don't use most of what is on it, but I keep a copy in my source folder just in case.

If you are going to get sophisticated about making ebooks, at some point you really need to include a page like this that discusses the legal status of the text, images, and fonts inlcuded in an ebook. You should mention where you got them, the copyright vs public domain status, and if necessary name the license agreement(s) that allows you to distribute them.

[Nate the great]

Originally Posted by radius

Another idea I got from Thoughcrime Experiments and from forum user pepak is use emphasis tags to make text regular typeface instead of italics.

I was working on a copy of Enter Without Desire by Ed Lacy that I downloaded from Munsey's, and there is a preface which is shown italicized, and then there is a word here and there which is shown in regular typeface for emphasis.

What I originally did was something like:

<em>...blah blah blah...</em>emphasized words<em>...blah blah blah...</em>

Which works but is very inelegant from the point of marking up text semantically.

If you put in some CSS that looks like this:

.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>

which is a lot more satisfying.

Just so everyone knows, this doesn't work in Mobipocket.