The final step is CSS, which I was hoping to get a little collaboration with -- it's probably the fun part! I think I've made an optimal spec, and the documents should be completely manipulable without having to edit.

Device: eb1150 & is that a nook in her pocket, or she just happy to see you?

good advice from paul durrant ; the more style markup you can move to the css the better. that said, things like italics are usually okay to leave in the text, although some people define them as a style as well.

Quote:

Originally Posted by pdurrant

Also, in the CSS you can specify the indent and paragraph spacing, and for the first paragraph in a chapter you can also specify no indent.

another quick tip about css to make it shorter : when you are defining a property which has 4 possible measurements (like a margin), if they are all the same, you can just write the measurement one time, and it will be applied to all sides. if the measurement is 0, no need to specify units (em, px, etc.), you can just write : "margin: 0;"

if you are using the same measure for left and right and another meausure for top and bottom you can specify only 2 measures. the order is Top Right Bottom Left (spells TRouBLe) or Top (+ bottom) Right (+left), so for instance "margin : 0 1em;" will give a margin of 0 on the top and bottom, and 1em on the left and right.

I've taken a look at your HTML. The main thing I'd mention is that you shouldn't have explicit display coding in the text. For example

<p><strong>IN</strong> submitting Captain Carter's strange manuscript to you in book form, I believe that a few words relative to this remarkable personality will be of interest.</p>

Would be a lot better as

<p><span class="firstword">In</span> submitting Captain Carter's strange manuscript to you in book form, I believe that a few words relative to this remarkable personality will be of interest.</p>

You are quite right. That formatting was left over from the original source, and while I noted it when I did the conversion, I did no thinking about it.

I took a while to respond to you, partly because I wanted to check on pseudo-elements: I thought that there was a first-word pseudo-element, but there isn't (there are first-line and first-letter, as I'm sure you know.)

So I will definitely do what you suggest, and I'll add the <span class="firstword"> element to my tools.

Quote:

and then in the CSS have

span.firstword { text-transform: uppercase; font-weight: bold }

Right on. Or any other sort of transformation.

Quote:

Also, in the CSS you can specify the indent and paragraph spacing, and for the first paragraph in a chapter you can also specify no indent.

(alternatively we could have given paragraphs requiring no indent because they're the first in a chapter a specific class)

Y'know, this'll sound ignorant, but I've never thought about first-paragraph spacing before -- now that you mention it, I realize it is the norm. Strange, considering how important reading has been to my life. I'll definitely do something like this. Is there a first-paragraph pseudo-class?

good advice from paul durrant ; the more style markup you can move to the css the better. that said, things like italics are usually okay to leave in the text, although some people define them as a style as well.

I understand. I think that pdurrant is correct here, too: that emphasis he pointed out is really about presentation and design on the part of the book publisher -- I doubt that ERB underlined the first word of every chapter, although it's possible.

Going forward, I'm going to try to separate design and presentation from communication and intent of the author as near as I can determine -- and let's not get into communication theory! That would mean that <em> and <strong> would remain in the body of the text where an author would seem to want it, for emphasis say, or for telepathic communication about Awful Truths That Must Remain Unspoken!. Or for foreign words, etc.

Quote:

another quick tip about css to make it shorter : when you are defining a property which has 4 possible measurements (like a margin), if they are all the same, you can just write the measurement one time, and it will be applied to all sides. if the measurement is 0, no need to specify units (em, px, etc.), you can just write : "margin: 0;"

if you are using the same measure for left and right and another meausure for top and bottom you can specify only 2 measures. the order is Top Right Bottom Left (spells TRouBLe) or Top (+ bottom) Right (+left), so for instance "margin : 0 1em;" will give a margin of 0 on the top and bottom, and 1em on the left and right.

I've clipped that and stuck it in my notes manager -- the more cool tips I get, the bigger that file will be!

I think I'll take a first swing at CSS today, after re-reading the w3school tutorial.

Thanks for helping!

m a r

Last edited by rogue_ronin; 07-15-2009 at 02:58 AM.
Reason: cleaned up mistakes

I took a while to respond to you, partly because I wanted to check on pseudo-elements: I thought that there was a first-word pseudo-element, but there isn't (there are first-line and first-letter, as I'm sure you know.)

It matches a p immediately following an h4 contained inside a div.body. The + is the "adjacent sibling" selector (other selectors here).

Done some reading now, and I get it, I think. Headings don't contain paragraphs, so the best you can do is look for nearness. If there is even an img or hr then no good.

Thanks for helping!

What is the good ol' CSS way to make a horizontal rule? In my current CSS, I've added page-break-after to all my divs, which works as expected in print preview -- but I'd love to add a visible rule for normal browsers, which don't break the page.

Yes - seems a bit of an oversight to me. So adding in a first-word span seems the best solution.

Done, it's in my tools as <span class="FirstWord">

Quote:

No and yes. There isn't a first paragraph pseudo-class, but if you enclosed the sections that should have a special first paragraph with a div of class parablock, you could use

Code:

div.parablock > p:first-child { text-indent: 0; margin: 0 }

rather than assuming that the first para always follows an h4.

In my case, where I'm auto-generating the book sections, and I already have a consistent use of divs to break up sections of the book, I'm a bit averse to adding another set of divs for this simple purpose. (I understand that you are simply giving an example, not suggesting a solution.)

Also, there will almost always be a header of some sort preceding a first paragraph in most books, right? So you'd have to add the div after the more logical place to divide the text.

I think it's simpler to add a p class: <p class="FirstParagraph">, so that's what I think I'll do. It's more explicit, as your div.parablock example offers, but I think it's closer to the bone.

I could probably code something like:

Code:

h2,h3+p { text-indent: 0; margin: 0 }

since my books should always have the content immediately after one of those two headers. But there may be exceptions, and why rewrite the CSS if I don't have to?

What is the good ol' CSS way to make a horizontal rule? In my current CSS, I've added page-break-after to all my divs, which works as expected in print preview -- but I'd love to add a visible rule for normal browsers, which don't break the page.

Hmm... I think you'd have to add some specific css for browsers showing a bottom border.

Note that, apparently, vertical space must be discarded after a pagebreak. So that, if you have a <hX> after a pagebreak, no matter how much margin-top you assign it, it will be flushed to the top of the page (or so it should). To avoid this, I had to add manual pagebreaks:

That's a long read... I glanced through it, no mention of pseudo-elements, as you said.

Bookmarked it -- when/if I start to convert to ePub, I'll definitely need to know it.

Quote:

Hmm... I think you'd have to add some specific css for browsers showing a bottom border.

I've been playing around with CSS all day -- now the answer seems obvious, just add a border-bottom to all the divs. As my divs are only where the page-breaks must occur structurally, it's perfect.

In print-preview, Firefox doesn't display them, but I have no idea if they'd show up in a reader right before the page-break -- I haven't tried this with FBReader yet.

A border occuring before the div or chapter heading would probably be very obvious (as you suggest below,) but at the end of a chapter maybe not-so-much. I'm using page-break-after, as my files start with divs right out of the gate, and I don't want a page break before the first one -- but after the last one is no big deal.

In terms of separating rules, I suppose the easiest thing would be an @rule and some specific CSS files -- but are most readers supporting them (@rules?)

Quote:

Note that, apparently, vertical space must be discarded after a pagebreak. So that, if you have a <hX> after a pagebreak, no matter how much margin-top you assign it, it will be flushed to the top of the page (or so it should). To avoid this, I had to add manual pagebreaks:

Does a div satisfy that vertical consumption? I'm working with a div starting after every page-break right now -- then the h# element occurs. (Or img or ul, etc.) If it does, then probably it won't be an issue for me -- but it is important to know, for when I'm not using divs like this.

I've been thinking about using hr for manual page breaks, but the more I consider, the less I like it. Almost empty divs don't excite me either. I feel like I'm missing an obvious something-or-other...

I have some images that I'm using for navlinks within the ebook (prior chapter, TOC, next chapter) and all is good, in terms of floating it to an interesting place -- but there is some sort of gap underneath all three images. I've tried removing the margins and padding from the containing a, li, ul and div as well as the img tag itself. Any idea what it could be?

Does a div satisfy that vertical consumption? I'm working with a div starting after every page-break right now -- then the h# element occurs. (Or img or ul, etc.) If it does, then probably it won't be an issue for me -- but it is important to know, for when I'm not using divs like this.

I'm not sure what you mean... immediately after a page break, all vertical space should be collapsed and discarded, but only the space before the next element's content (which can be an empty div). So, if you have a pagebreak and then an h1 with top margin, the margin will be ignored; if you have a pagebreak and a div with an h1 inside, both top margins or the div and h1 will be discarded (I believe), but if the h1 is outside and after the div, then the bottom margin of the div and the top margin of the h1 will be displayed.

Quote:

I've been thinking about using hr for manual page breaks, but the more I consider, the less I like it. Almost empty divs don't excite me either. I feel like I'm missing an obvious something-or-other...

I don't like the empty divs either, but I only use them in my ePUBs when I want a manual page break inside a file, which is not often (usually page breaks are between two files/chapters, which is fine).

You could use padding, which is not discarded after a page break, but of course, padding is not margin if you have backgrounds or borders.

I'm not sure what you mean... immediately after a page break, all vertical space should be collapsed and discarded, but only the space before the next element's content (which can be an empty div). So, if you have a pagebreak and then an h1 with top margin, the margin will be ignored; if you have a pagebreak and a div with an h1 inside, both top margins or the div and h1 will be discarded (I believe), but if the h1 is outside and after the div, then the bottom margin of the div and the top margin of the h1 will be displayed.

Ah, I understand. Well, I was talking about an h# contained in a div. There is nothing in my files that wouldn't be contained in a div. It's nothing but divs containing content (cover, chapters, etc.) I'm trying to use divs for only highest-level containers.

Still, now that I understand, I don't foresee a problem for my books. It actually makes sense to me that the vertical margin would collapse -- it seems desirable to do that. Padding is enough, I think.

But you don't like it, and I think if I were using image backgrounds for my headers I wouldn't like it either... Hmmm. Is it occurring on your reader, in your browser, where? Can you point to a spec that defines it? Crazy question: can you add bottom margin to the pseudo-class? (BTW, why don't you like it?)

Quote:

I don't like the empty divs either, but I only use them in my ePUBs when I want a manual page break inside a file, which is not often (usually page breaks are between two files/chapters, which is fine).

I'm still thinking about using hrs. I know that they are not strictly structure, but two things: a) they mark the page break when you aren't using a paged reader (like a browser) and b) is it really any different than an image? It's sorta like content, isn't it? "Here is a visual indicator of the end of the page!"

I guess there's a c), too: it doesn't have to display, with CSS.

[Also, d) I come from the old RocketBook world, where <hr size=0> and <hr new-page> were page markers. So it feels reasonable. "Feels reasonable", kinda an oxymoron...]

And if I can do it for page-breaks, it seems right for scene-breaks too!

But you don't like it, and I think if I were using image backgrounds for my headers I wouldn't like it either... Hmmm. Is it occurring on your reader, in your browser, where? Can you point to a spec that defines it? Crazy question: can you add bottom margin to the pseudo-class? (BTW, why don't you like it?)

I don't like it in some cases. An example: An ebook that's a collection of several other books has, for each of them a title page, and after the title page a dedication. I want the dedication for each book to be in another page, but not flushed to the top, I want a generous top margin above the dedication, that means I cannot use "page-break-before: always" in a div.dedication class. I could, since I'm talking about ePUB, have a file for the title page and a separate file for the dedication, but I don't like so many files either

As for the spec, it's here (for CSS2.1). Last time I saw it (because someone told me, I think it was Peter Sorotkin?) I don't remeber it saying that the margin-top could be retained after a forced pagebreak, or the CSS3 "preview" (though the current draft doesn't say anything), but maybe I read another version. Anyway, it seems ADE sets margin-top to 0 after a forced pagebreak, which is what I don't like.