Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 07-12-2009, 11:18 PM   #1
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)
Help with CSS, anyone?

I'm working on an xHTML microformat, which is pretty insane given my level of expertise.

I've gotten the thing into shape, though and created tools in my text editor to do all the heavy lifting, including database management of projects and file management.

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.

You can find my example book, A Princess of Mars, by Edgar Rice Burroughs, here. I've made some nice, baroque illustrations for it -- navigation buttons, cover, frontispiece, colophon, author image -- using web images.

If anyone enjoys coding CSS, and would like to help a noob -- thanks! I intend to eventually write more tools to semi-auto-generate the style sheet.

Discussion of how to handle elements, structure the ebook, and design/layout would all be welcome! The more specific, the better!

m a r

ps: re-reading this -- no expertise necessary, I'm mostly looking for a discussion and collaboration. 'Course if you're an expert and you're interested, excellent!

Last edited by rogue_ronin; 07-13-2009 at 12:05 AM. Reason: PS!
rogue_ronin is offline   Reply With Quote
Old 07-13-2009, 04:12 AM   #2
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,367
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
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>

and then in the CSS have

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

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.

div.body p { text-indent: 1em; margin: 0em 0em 0em 0em }
div.body h4+p { text-indent: 0em; margin: 0em 0em 0em 0em }

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


I've found http://htmldog.com/ to be a very useful site for finding out about CSS.
pdurrant is offline   Reply With Quote
Old 07-13-2009, 05:41 AM   #3
zelda_pinwheel
zeldinha zippy zeldissima
zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.zelda_pinwheel ought to be getting tired of karma fortunes by now.
 
zelda_pinwheel's Avatar
 
Posts: 27,827
Karma: 921169
Join Date: Dec 2007
Location: Paris, France
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 View Post
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.

div.body p { text-indent: 1em; margin: 0em 0em 0em 0em }
div.body h4+p { text-indent: 0em; margin: 0em 0em 0em 0em }
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.
zelda_pinwheel is offline   Reply With Quote
Old 07-15-2009, 01:39 AM   #4
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 pdurrant View Post
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.

div.body p { text-indent: 1em; margin: 0em 0em 0em 0em }
div.body h4+p { text-indent: 0em; margin: 0em 0em 0em 0em }

(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?

The div.body h4+p example -- could you expound on it? Particularly the + -- my quick search failed...

I did find something on the :first-child pseudo-class: would this be relevant?

Quote:
I've found http://htmldog.com/ to be a very useful site for finding out about CSS.
I keep coming back to w3schools.com, myself -- I'll take a look at htmldog, though!

I've read the CSS tutorial at w3schools once -- I'm off to read it again!

Thank you for helping!

m a r
rogue_ronin is offline   Reply With Quote
Old 07-15-2009, 01:55 AM   #5
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 zelda_pinwheel View Post
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 01:58 AM. Reason: cleaned up mistakes
rogue_ronin is offline   Reply With Quote
Old 07-15-2009, 03:55 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by rogue_ronin View Post
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.)
I think those pseudo-elements are not supported in ePUB, so beware.

Quote:
Originally Posted by rogue_ronin View Post
The div.body h4+p example -- could you expound on it? Particularly the + -- my quick search failed...
It matches a p immediately following an h4 contained inside a div.body. The + is the "adjacent sibling" selector (other selectors here).
Jellby is offline   Reply With Quote
Old 07-15-2009, 05:19 AM   #7
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,367
Karma: 305065800
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Quote:
Originally Posted by rogue_ronin View Post
I thought that there was a first-word pseudo-element, but there isn't
Yes - seems a bit of an oversight to me. So adding in a first-word span seems the best solution.

Quote:
Originally Posted by rogue_ronin View Post
Is there a first-paragraph pseudo-class?
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

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

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

Quote:
Originally Posted by rogue_ronin View Post
The div.body h4+p example -- could you expound on it? Particularly the + -- my quick search failed...

I did find something on the :first-child pseudo-class: would this be relevant?
You're right - htmldog doesn't do the sibling selector. I must have picked that up elsewhere.

http://www.w3.org/TR/CSS2/selector.h...cent-selectors

explains all. The first-child pseudo class is useful in other ways - but not here, as the p isn't a child of the h4.
pdurrant is offline   Reply With Quote
Old 07-16-2009, 03:49 AM   #8
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
I think those pseudo-elements are not supported in ePUB, so beware.
According to this popular page the limitation seems to be ADE, not ePub:

Code:
(ADE 1.0 doesn't support:

    * pseudo-classes/elements
    * text-align: justify;
    * font-variant: small-caps;
    * OPS extras:
          o display: oeb-page-head;
          o display: oeb-page-foot;
          o oeb-column-number: [integer]; )
'course, I'm not exactly shooting for ePub.

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

Am I right in thinking that hr is a formatting tag?

m a r
rogue_ronin is offline   Reply With Quote
Old 07-16-2009, 04:10 AM   #9
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 pdurrant View Post
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?

(Or should that be:

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

m a r
rogue_ronin is offline   Reply With Quote
Old 07-16-2009, 07:07 AM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by rogue_ronin View Post
According to this popular page the limitation seems to be ADE, not ePub
Well, the pseudo-elements are not listed in the ePUB spec either.

Quote:
'course, I'm not exactly shooting for ePub.
Right, but it's goodo to know what is and isn't supported, I guess.

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

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%;
}
Jellby is offline   Reply With Quote
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
Old 07-17-2009, 07:10 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by rogue_ronin View Post
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.
Jellby is offline   Reply With Quote
Old 07-17-2009, 07:54 AM   #13
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
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!

m a r
rogue_ronin is offline   Reply With Quote
Old 07-17-2009, 08:16 AM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by rogue_ronin View Post
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.

Last edited by Jellby; 07-17-2009 at 08:19 AM.
Jellby is offline   Reply With Quote
Old 07-17-2009, 08:25 AM   #15
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)
Whoa. I'm slow.

Instead of hrs for scene-breaks and page breaks, I could use brs. Heck, the name is right in the name of the job I'm trying to do.

So, make <br class="SceneBreak" /> and <br class="PageBreak" /> and add something like this to CSS:

Code:
br.SceneBreak {
display:none;
}

br.SceneBreak:after {
content:"* * *";
text-align:center
}

br.PageBreak {
display:none;
}

br.PageBreak {
page-break-after:always;
}
If this works, it might solve your need to add a div: don't suppress the display, and you should get one line after the break, right?

Off to test!

m a r
rogue_ronin is offline   Reply With Quote
Reply

Tags
css, editing, xhtml

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Standardised CSS? MacEachaidh Sigil 5 08-09-2010 11:18 AM
CSS glitch crutledge Sigil 2 05-16-2010 08:05 AM
Path to CSS PlainBobMax Calibre 2 03-08-2010 10:55 PM
help with css bobcdy ePub 2 02-13-2010 11:59 AM
RSS and CSS ? zelda_pinwheel Calibre 10 10-28-2009 11:15 PM


All times are GMT -4. The time now is 07:13 AM.


MobileRead.com is a privately owned, operated and funded community.