View Single Post
Old 07-16-2009, 02:26 PM   #11
rogue_ronin
Banned
rogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-booksrogue_ronin has learned how to read e-books
 
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
Quote:
Originally Posted by Jellby View Post
Well, the pseudo-elements are not listed in the ePUB spec either.
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:

Code:
<div class="pagebreak">&nbsp;</div>

div.pagebreak {
  page-break-before: always;
  height: 0;
  padding: 0
}
... and I could change the css for browsers:

Code:
div.pagebreak {
  border: dashed;
  border-width: 1px 0 0 0;
  margin: 0 -2.05% 0 -2.05%;
}
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?

Here's the xHTML
Code:
	<div class="Body Logue" id="Body_0">
		<h3>Foreword</h3>
		<ul class="NavLinks">
			<li>
				<a href="#TableOfContents">
					<img src="images\chapter_up.png" />
				</a>
			</li>
			<li>
				<a href="#TableOfContents">
					<img src="images\toc.png" />
				</a>
			</li>
			<li>
				<a href="#Body_1">
					<img src="images\chapter_down.png" />
				</a>
			</li>
		</ul>

		<h4>To the Reader of this Work</h4>
And here's the current CSS:
Code:
/*NAVIGATION LINKS*/
ul.NavLinks {
float:left;
margin:0% .5% 0% 0%;
padding:0%;
list-style-type:none;
border:2px solid #420342;
}
Is it some sort of browser thing? Both IE and Firefox display it. I'd really like them to butt up cleanly to one another (They're being displayed vertically, which I dig.)

m a r
rogue_ronin is offline   Reply With Quote