Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: Required CSS for fiction


Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 17 - Pages: 2 [ 1 2 | Next ] - Last Post: Jul 11, 2012 3:11 PM Last Post By: findlaybooks
blackoaktomes

Posts: 782
Registered: 02/28/11
Required CSS for fiction
Posted: Jul 10, 2012 2:03 AM
Click to report abuse...   Click to reply to this thread Reply
I'm sure a CSS template or sample must exist (let me know if there is!), but I'm trying to pin down the necessary exceptions to the standard paragraph that might crop up in a fiction novel. So far I have:

1. No indent for first paragraph of chapter (and large initial letter - speech mark + initial letter where the former starts a chapter); also needs space above paragraph to leave a gap between the chapter heading and start of the chapter.

2. Centered three asterisks (no indent) to break major scenes/passage of time.

3. No indent for first paragraph of new scene or after #4 or #5. (also needs line space above paragraph)

4. Right block indent for verse/poetry. (line space above and below)

5. More complex right block for quoted letters (this requires a line space at both the top and bottom, as well as normal indentation but within an already-indented block; italics.

Can you think of any other times where a style might be needed from a CSS?

Do you know of such a style sheet already available? :)

Thanks!

Message was edited by: blackoaktomes

paulsalvette

Posts: 53
Registered: 07/10/12
Re: Required CSS for fiction
Posted: Jul 10, 2012 2:18 AM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
@blackoaktomes Sounds like a pretty standard CSS stylesheet. You want to make use of two CSS properties: text-indent and margin. You can also use the text-align property for things like centered breaks. By default, the kindle sets the paragraph text-align to "justify".

For no indent paragraphs, the CSS could be (note I just made the classes up)

p.texttop
{
margin: 1.5em 0 0 0;
text-indent: 0;
}

For centered breaks:

p.centeredbreak
{
margin: 1.0em 0; /*adds padding on top and bottom*/
text-indent: 0;
text-align: center;
}

For first paragraphs of new scenes:

p.noindent
{
margin: 1.0em 0 0 0;
text-indent: 0;
}

For right blocks with above and below spacing:

p.rightblock
{
margin: 1.0em 0;
text-indent: 0;
text-align: right;
}

I'm a bit confused on what you're looking for #5. We have some CSS boilerplate for the Kindle on our website, and you're more than welcome to use it.

http://bbebooksthailand.com/developers.html

I hope that helps.

Paul Salvette
Managing Director
BB eBooks Thailand
paulsalvette

Posts: 53
Registered: 07/10/12
Re: Required CSS for fiction
Posted: Jul 10, 2012 2:38 AM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
@blackoaktomes

Sorry I misread your forum post, and I see now that you are looking for exceptions. Thank you for the helpful list. For us, an extra two exceptions that come up for us in fiction include:

1) Sometimes there are excerpts from letters/telegraphs/articles and such. The client usually wants to distinguish these from the normal content, so we use a block type paragraph rather than a first-line indent type paragraph:

p.block
{
margin: 1.0em 0 0 0;
text-indent: 0;
}

2) For the paragraph after a drop cap paragraph (i.e. the second paragraph in the chapter), we clear the float, since the drop cap is floated left. To ensure that the drop cap doesn't extend into the second paragraph, we use something like this:

p.secondpara
{
clear: both;
}

This works well on KF8, but I hear there are problems with float clearing on the Nook Simple Touch.
notjohn

Posts: 15,241
Registered: 01/06/10
Re: Required CSS for fiction
Posted: Jul 10, 2012 2:43 AM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
I posted my CSS on this forum a month or so ago. You should be able to find it with a search.
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 4:49 AM   in response to: notjohn in response to: notjohn
Click to report abuse...   Click to reply to this thread Reply
Found it - thanks to both of you.

OK, I've sorted out a style sheet and uploaded straight from Sigil ePub, missing out the Calibre mobi stage.

It looks to be working right in the Previewer, but it won't display my ToC (Sigil-generated by H2 headers)...any idea why? I've done nothing different except left out the Calibre stage.

FYI, this is my simple CSS (not inclusive of poem or quoted letter styles):

/*book title*/
h1 {
text-align: center;
text-indent: 0;
height: 100;
margin-top: 12pt;
}
/*chapter titles (ToC)*/
h2 {
text-align: center;
text-indent: 0;
margin-top: 12pt;
}
/*lesser headings*/
h3 {
text-align: center;
text-indent: 0;
margin-top: 12pt;
}
/*standard paragraph*/
p {
text-indent: 1em;
margin-top: -12pt;
}
/*1st paragraph of scene break (no indent)*/
p.noind {
text-indent: 0;
margin-top: 8pt;
}
/*1st paragraph of chapter (no indent)*/
p.chaptnoind {
text-indent: 0;
margin-top: 60pt;
}
/*1st letter of chapter*/
span.sgc-2 {
font-size: 160%;
}
/*centered isolated line (no indent)*/
p.noindline {
text-align: center;
text-indent: 0;
margin-top: 12pt;
}

Message was edited by: blackoaktomes

blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 9:10 AM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
Hmm...

OK cover issue solved (back down to 172 kb from 639kb) but two new issues:

1. Kindle format seems to have changed recently because:

margin-top: -12pt;

on the default paragraph is now causing paragraphs to crash into each other, whereas it used to address a problem of Kindle having two big a gap! Will remove that from my CSS!

2. Sigil's ToC (generated from H2 headers) did NOT carry over into the saved ePub for some reason, hence my Kindle book has no built-in ToC (or any at all, seeing as I don't manually add one for fiction).

Anyone any idea about how to overcome this second issue?

Message was edited by: blackoaktomes
mrlasers

Posts: 1,633
Registered: 07/06/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 9:37 AM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
margin-top: -12pt;

You'll generally never want to use a negative top margin on Kindle. In fact, you'll find it much easier to keep your formatting consistent by not using top margins at all. The bottom margin of the previous paragraph should be preferred. Depending on your workflow this may be more or less work for you, but it will give better results in Mobi7. [u]Especially[/u] if you're using left margins, since this can result in the top margin being omitted.

<p style='margin-bottom:1em'>last paragraph</p>
<p style='margin-bottom:1em;text-align:center'>* * *</p>
<p>first paragraph</p>

--
MrLasers
eBook Formatting & Production
http://www.mrlasers.com
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 9:51 AM   in response to: mrlasers in response to: mrlasers
Click to report abuse...   Click to reply to this thread Reply
Thanks, mrlasers.

I seem to remember margin-bottom not working when I initially ran tests last year, because it's the obvious thing to do before using margin-tops - but I'll try again!
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 12:05 PM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
Update....

It seems that Amazon Kindle does not accept or recognize the auto-generated ToC from Sigil.

You have to create it manually, but seeing as Caibre does it automatically, there must be some way to do it without having to do in manually.

Will investigate.
notjohn

Posts: 15,241
Registered: 01/06/10
Re: Required CSS for fiction
Posted: Jul 10, 2012 12:13 PM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
**uploaded straight from Sigil ePub**

I am really anxious to know how that turns out. Keep posting as you proceed!

**won't display my ToC (Sigil-generated by H2 headers)**

Well, I suppose that was the virtual TOC, the one that's accessed by software. To see an actual TOC, whether on epub or in mobi (Kindle) format, you need to make the links yourself.

What Previewer are you using, the downloadable software with Fire etc emulation, or the rudimentary online Preview?

As MrLasers will explain, margin-top is problematical, though I have used it successfully.
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 12:51 PM   in response to: notjohn in response to: notjohn
Click to report abuse...   Click to reply to this thread Reply
I've used the Simple Previewer, but tbh I don't trust anything but the real thing so I'm actually doing the testing by uploading onto Kindle and then checking my sample dload for that book.

Currently the CSS is doing well, and the cover issue is no more, but finding a way to do the in-line ToC automatically is still proving elusive. I can't even find a sample toc.xhtml for Sigil online...

In other news, I've read that the soon-to-be-released 0.6 of Sigil will have an automatic in-line ToC generator! :)

EDIT: updated CSS...

/*book title*/
h1 {
text-align: center;
text-indent: 0;
height: 100;
margin-top: 12pt;
}
/*chapter titles (ToC)*/
h2 {
text-align: center;
text-indent: 0;
margin-top: 12pt;
margin-bottom: 60pt;
}
/*lesser headings*/
h3 {
text-align: center;
text-indent: 0;
margin-top: 12pt;
}
/*standard paragraph*/
p {
text-indent: 1em;
margin:0;
}
/*1st paragraph of scene break (no indent)*/
p.noind {
text-indent: 0;
margin:0;
}
/*1st paragraph of chapter (no indent)*/
p.chaptnoind {
text-indent: 0;
margin:0;
}
/*1st letter of chapter*/
span.sgc-2 {
font-size: 160%;
}
/*centered isolated line (no indent)*/
p.noindline {
text-align: center;
text-indent: 0;
margin-bottom: 12pt;
}

Message was edited by: blackoaktomes

Message was edited by: blackoaktomes

mrlasers

Posts: 1,633
Registered: 07/06/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 12:59 PM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
I've used the Simple Previewer, but tbh I don't trust
anything but the real thing so I'm actually doing the
testing by uploading onto Kindle and then checking my
sample dload for that book.

There are quite a few different configurations of Kindles, making use of two entirely separate internal formatting structures (Mobi7 and KF8). Unless you have a wide range of Kindle devices you [i]need[/i] to be using Kindle Previewer to proof your content before publishing. One of the big things that many authors/publishers miss, even those who have been doing this for years, is that what looks right on one platform may not look right on another.

Kindle Previewer is quite accurate (though "Kindle" mode seems a bit messed up in 2.5) and is certainly a lot faster than copying to a device for iterative testing. Definitely use whatever hardware you have at hand to test before publishing, but don't make the mistake of thinking that because it looks good on one device it will look good everywhere.

--
MrLasers
eBook Formatting & Production
http://www.mrlasers.com
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 10, 2012 2:18 PM   in response to: mrlasers in response to: mrlasers
Click to report abuse...   Click to reply to this thread Reply
That may be wise advice, but you still need to check it on a Kindle - the Previewers do NOT show all errors.

This is why Amazon should allow authors to check out their own books for free without having to by them (and removing the need to archive/delete them to check them out) - the sample goes some way to achieving this, but it'd be good to check out the whole book.

Take that margin-top clash - it does not show up in the Previewer (and I doubt in the advanced one either) but it looks horrible on the actual Kindle.
findlaybooks

Posts: 22
Registered: 07/11/12
Re: Required CSS for fiction
Posted: Jul 10, 2012 10:15 PM   in response to: blackoaktomes in response to: blackoaktomes
Click to report abuse...   Click to reply to this thread Reply
Another thing you might find you'd need in a work of fiction is "typed" text - e.g. something on a computer screen, written on a sign, etc. For this, you might want to use a different font (e.g. something fixed-width if it's an old-school computer display etc).

But, my suggestion is just put the CSS in a separate file, reference it from the header of any HTML pages you create, and if you need to add any new styles (or edit existing ones), you'll only need to make changes in one place.

Hope this helps :-)
- Bevan Findlay.
blackoaktomes

Posts: 782
Registered: 02/28/11
Re: Required CSS for fiction
Posted: Jul 11, 2012 2:31 AM   in response to: findlaybooks in response to: findlaybooks
Click to report abuse...   Click to reply to this thread Reply
Thanks yes - that might be one to include.

Update:

I now seem to have resolved, pending the "publishing" of the book to Kindle, all the issues that Calibre solved, simply by using Sigil.

I created a manual toc.xhtml, but won't report on that because Sigil 0.6.0 will soon be released and has an automatic way to generate a toc.xhtml

I also added the margin:0; into the above CSS in order to get rid of the annoying spaces between paragraphs.

Hopefully the basic novel template is now in place. I will think about adding the luxuries - poem CSS, quoted-letter CSS, etc. thereafter.

Thanks, all!
Legend
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums