ebook.com preview is mangled.

[roland1]

Would anyone else like to post a generic style sheet from their own collection as JSWolf has done?

It would be useful to have a few examples as a reference for what CSS is "known to work" for others in their publishing of ebooks. It's good to know where the guardrails are.

[phillipgessert]

That example is a pretty good baseline for things that tend to work. It’s nice and simple which is about as good as you can get for something that works for lots of stuff. The farther you get out from that, the more you get into little calculated risks and more general ideas like D.R.Y. and K.I.S.S. type stuff.

[Turtle91]

Originally Posted by roland1

Would anyone else like to post a generic style sheet from their own collection as JSWolf has done?

It would be useful to have a few examples as a reference for what CSS is "known to work" for others in their publishing of ebooks. It's good to know where the guardrails are.

There are certainly professional types here, and they are more than happy to help answer questions, give advice, etc. But I would be surprised if they were to give out their house css sheet...that's their bread and butter.

I'd be happy to give you a copy of mine, but alas, I am not constrained by having to sell on different sites and only need to make them pretty for myself.

However, there are several books in MR's free library that you can download and look at their css. There are some very well done (and a few not so well done ) that can give you ideas on what people have used. Another trick is to download a book (hopefully a well done one) from each of the sites you want to publish your book. Look at the css and see if/how it's different between the sites.

[roland1]

I thought about that "bread and butter" aspect as I was writing my post. I asked because I don't need to borrow ideas from people in regards to design. But I certainly understand people's not wanting to share their proprietary css styling.

I struggled with that in my book, where I give away a bunch of proprietary secrets like "The IPSFA Sequence" —*which anyone could claim and run with as their own "social psychology breakthrough tool."

World is full of creeps, as we all know. But I'm not one of them.

But yeah, I totally get it.

And thank you, JSWolf. I'm sure those styles will be a useful guide.

[roland1]

Originally Posted by Turtle91

...
However, there are several books in MR's free library that you can download and look at their css. There are some very well done ....

This is what came to mind today, too. I need to look at what's working out there so that I don't play the css coding lottery where it looks fine on some websites but like a car wreck on others.

(In think my only point of reference before I began was the SIGIL user manual —*a modern day classic.)

[Hitch]

Originally Posted by Turtle91

There are certainly professional types here, and they are more than happy to help answer questions, give advice, etc. But I would be surprised if they were to give out their house css sheet...that's their bread and butter.

I'd be happy to give you a copy of mine, but alas, I am not constrained by having to sell on different sites and only need to make them pretty for myself.

However, there are several books in MR's free library that you can download and look at their css. There are some very well done (and a few not so well done ) that can give you ideas on what people have used. Another trick is to download a book (hopefully a well done one) from each of the sites you want to publish your book. Look at the css and see if/how it's different between the sites.

Well, I confess it--we do have some stuff that I'd be loath to give out, like our (way cool, if I do say so myself) Dropcaps that actually DO work on Kindle eInks (woo woo).

I know that ages ago--it's gotta be 10 years, eh, Wolfie?--I shared our then-inhouse CSS with him, but that's nearly worthless now. Also, we have a rule--we only keep in each eBook what we use in that eBook. We don't leave unused CSS in any ebook. At least, hopefully, we don't. (Famous last words).

I'll see if I can find a nice simple CSS sheet, but Jon (Wolfie) is very picky about his books and you should be in good stead if you start with his.

Hitch

[roland1]

Q. In my new book I have bold headings followed by a short, no indent paragraph. However, I need to maintain some spacing between these sections, yet the advice here has been to avoid margins to allow the user to assign them.

So how would I deal with something that looks like this? :

SOME HEADING
Paragraph full of text, some of it good.
(space)
ANOTHER HEADING UNLIKE THE FIRST
Another paragraph full of text, none of it good.
(space)
YET ANOTHER HEADING...
content that's hopefully better than that last stuff...
(space)

Well, you get the idea. Should I use < br/> or margins —*or are there space before and space after css conventions now that actually work?

[roland1]

Originally Posted by Hitch

...
I'll see if I can find a nice simple CSS sheet, but Jon (Wolfie) is very picky about his books and you should be in good stead if you start with his.

Hitch

Thanks, Hitch. And I'm sure what you said is true about Jon's style sheet. I get the feeling that there are no amateurs posting here, at least not on this thread. Well, with one exception...me. But I do get some good work done in between making jokes.

[phillipgessert]

Originally Posted by roland1

Q. In my new book I have bold headings followed by a short, no indent paragraph. However, I need to maintain some spacing between these sections, yet the advice here has been to avoid margins to allow the user to assign them.

So how would I deal with something that looks like this? :

SOME HEADING
Paragraph full of text, some of it good.
(space)
ANOTHER HEADING UNLIKE THE FIRST
Another paragraph full of text, none of it good.
(space)
YET ANOTHER HEADING...
content that's hopefully better than that last stuff...
(space)

Well, you get the idea. Should I use < br/> or margins —*or are there space before and space after css conventions now that actually work?

It’s best to avoid margins between indented paragraphs, because the indent does the job of conveying that info. And it’s best to leave line-height unset, because the reader controls that. But there is nothing wrong with setting a margin-top on h2 (for example). They also have one by default.

[roland1]

Thanks for your reply, Phillip. I believe I am becoming slightly suspicious of all that I think I know about html/css.

Schroedinger's ebook —*if you don't read it, the layout remains perfect.

[Hitch]

Originally Posted by roland1

Thanks for your reply, Phillip. I believe I am becoming slightly suspicious of all that I think I know about html/css.

Schroedinger's ebook —*if you don't read it, the layout remains perfect.

The path to wisdom....is realizing that everything you thought you knew about eBook HTML and CSS is pure crap. :-) I had that epiphany sometime at the end of 2009, if memory serves.

Hitch

[JSWolf]

Originally Posted by DNSB

ADE 2.0.1 is somewhat useful but then having a selection of ereaders and renderers to test your ebooks is even more useful. When I am working on an ebook that is going to be published, I like to test on both epub and Kindle ereaders and renderers with the objective of producing something that may not be the prettiest but it will be readable on multiple platforms saving the author from drowning in complaints and without needing me to produce an edition for every platform. The addition to Sigil of multiple renderers (BibiReader, EpubJSReader and ReadiumReader) in addition to it's builtin preview has been very helpful.

The good thing about ADE 2.0.1 i that it's pretty basic. So chances are that if the ePub looks good in ADE 2.0.1, it will look good in most programs.

[JSWolf]

Originally Posted by roland1

Q. In my new book I have bold headings followed by a short, no indent paragraph. However, I need to maintain some spacing between these sections, yet the advice here has been to avoid margins to allow the user to assign them.

So how would I deal with something that looks like this? :

SOME HEADING
Paragraph full of text, some of it good.
(space)
ANOTHER HEADING UNLIKE THE FIRST
Another paragraph full of text, none of it good.
(space)
YET ANOTHER HEADING...
content that's hopefully better than that last stuff...
(space)

Well, you get the idea. Should I use < br/> or margins —*or are there space before and space after css conventions now that actually work?

Here is some HTML code.

<p class="CN">CHAPTER ONE</p>
<p class="CT">BEN (I)</p>
<p class="SN">1</p>
<p class="noindent">By the time he had passed Portland going north on the turnpike, Ben Mears had begun to feel a not unpleasurable tingle of excitement in his belly. It was September 5, 1975, and summer was enjoying her final grand fling. The trees were bursting with green, the sky was a high, soft blue, and just over the Falmouth town line he saw two boys walking a road parallel to the expressway with fishing rods settled on their shoulders like carbines.</p>

<p>He looked down at his arms. They had broken out in goose flesh.</p>
<p class="SN">2</p>
<p class="noindent">He deliberately skirted town, crossing into Cumberland and then coming back into ’salem’s Lot from the west, taking the Burns Road. He was amazed by how little things had changed out here. There were a few new houses he didn’t remember, there was a tavern called Dell’s just over the town line, and a pair of fresh gravel quarries. A good deal of the hardwood had been pulped over. But the old tin sign pointing the way to the town dump was still there, and the road itself was still unpaved, full of chuckholes and washboards, and he could see Schoolyard Hill through the slash in the trees where the Central Maine Power pylons ran on a northwest to southeast line. The Griffen farm was still there, although the barn had been enlarged. He wondered if they still bottled and sold their own milk. The logo had been a smiling cow under the name brand: “Sunshine Milk from the Griffen Farms!” He smiled. He had splashed a lot of that milk on his corn flakes at Aunt Cindy’s house.</p>

Here is the CSS code that goes with it.

.CN {
  font-family: sans-serif;
  font-size: 1.7em;
  margin-top: 0.8em;
  margin-bottom: 0.6em;
  text-align: center;
  text-indent: 0;
}
.CT {
  font-family: sans-serif;
  font-size: 1.7em;
  font-weight: bold;
  line-height: 0.7;
  text-align: center;
  text-indent: 0;
}
.noindent {
  text-indent: 0;
}
.SN {
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  text-align: center;
  text-indent: 0;
}

[JSWolf]

Originally Posted by roland1

Thanks for your reply, Phillip. I believe I am becoming slightly suspicious of all that I think I know about html/css.

Schroedinger's ebook —*if you don't read it, the layout remains perfect.

Using the <p> that I posted, you won't have paragraph spaces. They just get in the way of reading and make it annoying. line spacing is for things like offset text, section breaks, etc. They are not for regular paragraphs.

Answer this question before you decide you want paragraph spaces. How many pBooks (paper books) have you read that have paragraph spaces?

Also, do not use line-height at all. It's not needed. A lot of Readers allow you to specify your own choice of a line height.

[Turtle91]

Originally Posted by roland1

Q. In my new book I have bold headings followed by a short, no indent paragraph. However, I need to maintain some spacing between these sections, yet the advice here has been to avoid margins to allow the user to assign them.

So how would I deal with something that looks like this? :

SOME HEADING
Paragraph full of text, some of it good.
(space)
ANOTHER HEADING UNLIKE THE FIRST
Another paragraph full of text, none of it good.
(space)
YET ANOTHER HEADING...
content that's hopefully better than that last stuff...
(space)

Well, you get the idea. Should I use < br/> or margins —*or are there space before and space after css conventions now that actually work?

I'm going to throw a semantics flag on Jon here...while the CSS is purely whatever you want it to look like (within the limits of your website's rules) HEADINGS need to use the HEADINGS tag <h1> - <h6>...that's what they are for. You can still style headings however you want with CSS but lots of people and devices (accessibility) depend on publishers marking up the document properly.
<h1> - <h6> can be used in a hierarchical manner. Some here don't see a purpose in that, but I like organization.


So here's my change to Jon's sample:

<h3>CHAPTER ONE</h3>
<p class="CT">BEN (I)</p>

<h4>1</h4>
<p class="noindent">By the time he had passed Portland ...</p>
<p>He looked down at his arms...</p> 

<h4>2</h4>
<p class="noindent">He deliberately skirted town, crossing into...</p>

Then you can just give the <h4> your margins of choice:
ex.
h4 {margin-top:2em}