07-12-2009, 11:18 PM | #1 |
Banned
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! |
07-13-2009, 04:12 AM | #2 |
The Grand Mouse 高貴的老鼠
Posts: 72,165
Karma: 308792702
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. |
Advert | |
|
07-13-2009, 05:41 AM | #3 | |
zeldinha zippy zeldissima
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:
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. |
|
07-15-2009, 01:39 AM | #4 | ||||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
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:
Quote:
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 read the CSS tutorial at w3schools once -- I'm off to read it again! Thank you for helping! m a r |
||||
07-15-2009, 01:55 AM | #5 | ||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
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:
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 |
||
Advert | |
|
07-15-2009, 03:55 AM | #6 | ||
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
|
||
07-15-2009, 05:19 AM | #7 | ||
The Grand Mouse 高貴的老鼠
Posts: 72,165
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
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 div.parablock > p:first-child { text-indent: 0; margin: 0 } rather than assuming that the first para always follows an h4. Quote:
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. |
||
07-16-2009, 03:49 AM | #8 | ||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
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]; ) Quote:
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 |
||
07-16-2009, 04:10 AM | #9 | ||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
Quote:
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 } (Or should that be: Code:
h2+p,h3+p { text-indent: 0; margin: 0 } m a r |
||
07-16-2009, 07:07 AM | #10 | |||
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
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"> </div> div.pagebreak { page-break-before: always; height: 0; padding: 0 } Code:
div.pagebreak { border: dashed; border-width: 1px 0 0 0; margin: 0 -2.05% 0 -2.05%; } |
|||
07-16-2009, 02:26 PM | #11 | |||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
Bookmarked it -- when/if I start to convert to ePub, I'll definitely need to know it. Quote:
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:
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> Code:
/*NAVIGATION LINKS*/ ul.NavLinks { float:left; margin:0% .5% 0% 0%; padding:0%; list-style-type:none; border:2px solid #420342; } m a r |
|||
07-17-2009, 07:10 AM | #12 | ||
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
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. |
||
07-17-2009, 07:54 AM | #13 | ||
Banned
Posts: 475
Karma: 796
Join Date: Sep 2008
Location: Honolulu
Device: Nokia 770 (fbreader)
|
Quote:
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 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 |
||
07-17-2009, 08:16 AM | #14 | |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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. |
|
07-17-2009, 08:25 AM | #15 |
Banned
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; } Off to test! m a r |
Tags |
css, editing, xhtml |
|
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 |