Stylesheet examples?

Skitzman69 · 09-14-2010, 09:31 PM

Hi,

Am trying to standardize my epubs, they are quite a mess (converted from various things) and was wondering what basic stylesheet do people use? Could you post yours?

Thanks,
Mike.

theducks · 09-14-2010, 10:18 PM

Quote:

Originally Posted by Skitzman69

Hi,

Am trying to standardize my epubs, they are quite a mess (converted from various things) and was wondering what basic stylesheet do people use? Could you post yours?

Thanks,
Mike.

I belong to the one size fits none crowd

Lean and mean, Just what that book needs

for a brisk performance. Most weigh in at 100 lines for basic books.
Add another 100 for books with drop caps and/or with syled headers.

Code:

.calibre {
    display: block;
    font-size: 1.25em;
    margin-bottom: 0;
    margin-left: 2pt;
    margin-right: 16pt;
    margin-top: 0;
    page-break-before: always;
    text-align: justify  /* optional */
    }

.calibre3 {  /* non-indented, when not just first Para */
    display: block;
    margin-bottom: 0.85em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.5em;
    text-align: justify;
	text-indent: 0
    }
.calibre4 {  /* when indented para */
    display: block;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.5em;
    text-align: justify;
    text-indent: 3%   
    }
 .firstpara { /* when non-indent 1st para wanted */
  text-indent:0
  }

schlonz · 09-15-2010, 04:57 AM

Hmm, mine is larger.

Code:

.standart {
    display: block;
    font-size: 1.2em;
    margin-bottom: 0;
    margin-left: 2pt;
    margin-right: 5pt;
    margin-top: 0;
    page-break-before: always;
    }
.foto {
    height: auto;
    width: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
    }
.text {
    display: block;
    margin-bottom: 0.2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
	text-indent: 1em;
    }
.song {
    display: block;
    margin-bottom: 0.2em;
    margin-left: 1em;
    margin-right: 0;
    margin-top: 0;
    font-style: italic;
    }
.bold {
    font-weight: bolder;
    }
.ital {
    font-style: italic;
    }
.header1 {
    display: block;
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 1.0em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    }
.header2 {
    display: block;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 1.0em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    }
.header3 {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 1.0em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    }
.pb  {
    page-break-before: always;
    }
.split {
	margin-top: 1em;
	margin-bottom: 0;
	}
.ce {
	text-align: center;
	}
.ri {
	text-align: right;
	margin-left: 20;
	}

its grown in about a 100 books.

shall1028 · 09-15-2010, 05:08 AM

I don't really have a one style fits all mentality and I don't think I ever would. How a work is styled should fit with the content of the work. For example a Shakespearean comedy such as "As You Like It" would be styled differently from William Gibson's "Neuromancer".

Having said that. I am finding myself attracted to the included CSS for generic fiction works. I would remove the poem sections or the letter sections for those docs that don't have verse or letters.

Each xhtml file that I use with this has <body id="content"> except the title-page which has <body id="content-title">. I do this in case in the future I need to have other # sections (say for sidebars or menus or ???).

With this and other CSS sheets I use <p> only for the bulk of my paragraphs unless I want to specifically override it with a class such as noindent. Use classes as necessary not unnecessarily.

There are probably things that could be trimmed but not right now.

Code:

/* Base CSS file */

@font-face {
  font-family: "Liberation Sans";
  font-weight: normal;
  font-style:  normal;
  font-variant: normal;
  src: url(../Fonts/LiberationSans-Regular.ttf);
}

@font-face {
  font-family: "Liberation Sans";
  font-weight: normal;
  font-style:  italic;
  font-variant: normal;
  src: url(../Fonts/LiberationSans-Italic.ttf);
}

@font-face {
  font-family: "Liberation Serif";
  font-weight: normal;
  font-style:  normal;
  font-variant: normal;
  src: url(../Fonts/LiberationSerif-Regular.ttf);
}

@font-face {
  font-family: "Liberation Serif";
  font-weight: normal;
  font-style:  italic;
  font-variant: normal;
  src: url(../Fonts/LiberationSerif-Italic.ttf);
}

@font-face {
  font-family: "Liberation Serif";
  font-weight: bold;
  font-style:  normal;
  font-variant: normal;
  src: url(../Fonts/LiberationSerif-Bold.ttf);
}

@font-face {
  font-family: "Liberation Serif";
  font-weight: bold;
  font-style:  italic;
  font-variant: normal;
  src: url(../Fonts/LiberationSerif-BoldItalic.ttf);
}

body {
	font-family: "Liberation Serif", serif;
	margin: 0.5em 3%  0.6em 3%;
}

#content
{
	background-color: white;
	color: black;
	font-family: "Liberation Serif", serif;
	text-align: justify;
}

#content h1, #content h2
{
	color: navy;
}

#content h1 /* Book */
{
	font-variant: small-caps;
	font-family: "Liberation Sans", sans-serif;
	text-align: right;
	border-bottom: 1px solid #88F;
	margin-bottom: 2.5em;
}

#content h2 /* Part */
{
	font-variant: small-caps;
	font-family: "Liberation Sans", sans-serif;
	text-align: center;
	font-size: 2em;
}

#content h3 /* Chapter */
{
	/* font-variant: small-caps; */
	font-family: "Liberation Sans", sans-serif;
	font-size: 1.5em;
	text-align: right;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 1%;
	color: navy;
	border-bottom: 1px solid #88F;
}

/* h4 would be for Section */
/* h5 would be for Subsection */

#content blockquote
{
	margin-left: 35px;
	margin-right: 20px;
}

#content .italics
{
	margin-left: 20px;
	margin-right: 20px;
	font-style: italic;
}

#content .smallcaps
{
	font-variant: small-caps;
}

#content blockquote .attribution /* where did the quote come from */
{
	display: block;
	text-align: right;
	font-family: "Liberation Sans", sans-serif;
	font-style: italic;
	font-size: smaller;
}

#content blockquote .attribution-name /* who said it */
{
	display: block;
	text-align: right;
	font-family: "Liberation Sans", sans-serif;
	font-style: normal;
	font-size: smaller;
}

#content sup { /* great for exponent such as in <i>e=mc<sup>2</sup></i> */
  font-size: 80%;
  vertical-align: top;
  line-height: 0.8
}

#content p
{
	text-align: justify;
	margin: 0px;
	line-height: 1.35em;
}

#content p+p
{
	text-indent: 20px;
}

#content p.noindent, blockquote p, p.first
{
	text-indent: 0px;
	margin-top: 1em;
}

#content p.notab
{
	text-indent: 0px;
	font-family: "Liberation Serif", serif;
}

#content .firstletter {
	display: block;
	font-family: "Liberation Serif", serif;
	font-size: 3em;
	float: left;
	padding-top: .2em;
	line-height: .5em;
	margin: 0 .1em 0 0;
}

#content p.salutation {
	margin-top: 1em;
}

#content p.letter {
	width:86%;
	margin-left: 35px;
}

#content p.closing {
	width:88%;
	text-align: right;
	margin-bottom: 1em;
}

#content blockquote.poem {
	text-align: left;
	font-style: normal;
	font-family: "Liberation Serif", serif;
}

#content .stanza
{
	text-indent: 0;
	line-height: 1.2em;
}

#content .stanza-fl /* first line of a stanza */
{
	letter-spacing: 1px;
             font-style: italic;
	font-family: "Liberation Serif", serif;
}

/* Outside of the content area you can address the style of the running
   book and author headings. */

#content-title
{
	font-family: "Liberation Sans", sans-serif;
	text-align: center;
}

#content-title p
{
	font-size: 0.80em;
	line-height: 1.35em;
}


#content-title .title {
    	text-align: left;
	/* font-variant: small-caps; */
	font-size: 2.5em;
	border-bottom: 2px solid #88F;
}

#content-title .sub-title
{
    	text-align: left;
	font-size: 1.35em;
}

#content-title .author {
	text-align: left;
	font-size: 1.5em;
	margin-bottom: 1.25em;
	color: navy;
}

#content-title i, em
{
	font-style: italic;
	font-family: "Liberation Serif", serif;
}

theducks · 09-15-2010, 12:38 PM

Quote:

Originally Posted by schlonz

Hmm, mine is larger.

its grown in about a 100 books.

Mine as my BASIC style sheet STARTING point (or first edit to be done)

I guess I failed to make another point.
All my books DO NOT look the same, even if they are "Text only"
( I do try and make a "series" look
Different chapter heading styles.
different Paragraph (block) styles

My "first" tweak of a CSS sets basic things that work nice with my 5" PEz (But I also look at what happens on the bigger screen.

Next I tame "white space". One screen for just the Chapter heading don't cut it with me

25% for Heading with Margins

tops
(But I usually do give a single page to "Part 1" style type pages).

I lose any white space at the end of a chapter. (Chapters always start on a new page

(even if the original printing did not.)

Obviously, my "style" does not work well on a tiny phone screen.

and AFAIK the current standards do not have setting provisions for the huge differences in "CRT" size, orientation or aspect ratio

Jellby · 09-15-2010, 01:09 PM

A pretty basic stylesheet:

Code:

p {
  text-indent: 1em;
  margin: 0;
}

p.noindent { /* use it after chapter headings, scene breaks, etc. */
  text-indent: 0;
}

div.break { /* for scene breaks: <div class="break" /> */
  height: 3em;
  padding: 0;
  margin: 0;
}

em {
  font-style: italic;
}
em em { /* to have non-italic text inside an otherwise italic block */
  font-style: normal;
}

div.center { /* short fragments of centered text (banners, equations...) */
  margin: 1em 2em;
  text-align: center;
}

blockquote {
  margin: 1em 2em;
}

/* for poetry, use it as:
<div class="poetry">
<div class="stanza">
<div>First line</div>
<div>Second line</div>
</div>
</div> */
div.poetry {
  margin: 1em 0 1em 2em;
}
div.poetry div.stanza {
  margin: 0.5em 0;
  text-indent: 0;
  padding: 0;
}
div.poetry div {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
}

charleski · 09-15-2010, 11:47 PM

Code:

@page {
  margin-top: 9pt;
  margin-bottom: 1pt
}

body {
  font-size: 100%; 
  line-height: 1.25em; /* just a bit more leading than the standard of 1.2 because I read at small sizes. I sometimes bump the font up to 105% too so that the smallest size is easier on my presbyopic eyes */
  margin: 0 12pt;
}

p.flushbrk {  /* the class for the initial paragraph of a section */
  margin-top: 1.25em;
  margin-bottom: 0;
  text-indent: 0
}

p. indent { /* the class for standard indented paragraphs */
  margin: 0;
  text-indent: 1em
}

p. centerbrk { /* for scene-break markers such as asterisks */
  margin: 1.25em 0;
  text-align: center
}

div.extract { /* a div that wraps around paragraphs that are further indented (e.g. verse, letters, etc) */
  margin: 0.625em 2em;
  text-align: left
}
/* often there will be different variations of extract, some with both left and right indents, some with just a left indent, some using a different font, etc */

All formatting is done in the css - I strip out line-spacing garbage (trailing <br/>s and empty p or div tags) using regexes.

All vertical margins are related to the line-height (either a simple fraction or integral multiple) and margins using fractions of the line-height are organised so that the top and bottom add up to a multiple, eg for a subhead I might use

Code:

p.subhead {
  margin-top: 1.875em;
  margin-bottom: 0.625em;
  font-style: italic
}

so that the total spacing retains the rhythm of the surrounding body text but the subhead is shifted towards the text to which it relates.

schlonz · 09-16-2010, 04:59 AM

Hello

Quote:

I guess I failed to make another point.
All my books DO NOT look the same, even if they are "Text only"

maybe i misunderstood SKITZMAN, but as he wrote

Quote:

Am trying to standardize my epubs

i thought that he would all his books look the same, so as my books do.

ru

theducks · 09-16-2010, 11:42 AM

Quote:

Originally Posted by schlonz

Hello

maybe i misunderstood SKITZMAN, but as he wrote

i thought that he would all his books look the same, so as my books do.

ru

You loved the old mono-spaced font of typewriter and early computer days?

If that is all you want,?
Html with NO (aka default) style. Every document will look the same(ish) AND UGLY, to boot

There is a reason that publishers spend LOTS of money on Fonts (licensed) and typographers.
It's so the book does NOT look "just the same" as the others.
Many Imprints do have basic "Style rules" to set their "brand".
Series may use a uniform style across the series.

Interestingly, I discovered "Style" has changed almost full circle. I was scanning some covers on my older (1960's) Paper Library to use in Calibre, when I noticed that New chapters could begin almost anywhere on the page. A style that I had been *fixing* , to start on a fresh page, in the e-edition

Tastes change

Perkin · 09-16-2010, 01:35 PM

Quote:

Originally Posted by theducks

Interestingly, I discovered "Style" has changed almost full circle. I was scanning some covers on my older (1960's) Paper Library to use in Calibre, when I noticed that New chapters could begin almost anywhere on the page. A style that I had been *fixing* , to start on a fresh page, in the e-edition

Tastes change

That's because it was so costly to print a book, even saving a few pages from the cost of a book made a lot of difference.

Now printing costs are less prohibitive, so they space out books, even using larger fonts, and splitting what used to be a single 'old' book into two or more 'modern' books. (so they get more money out of the punters.)

schlonz · 09-17-2010, 02:54 AM

OMG

Quote:

If that is all you want,?
Html with NO (aka default) style. Every document will look the same(ish) AND UGLY, to boot

You just opened my eyes.

Over 40 Years of reading all the time i thought that the Story of a book is that what matters. Now, finaly after all that lost time you told me that it's the look of the book that's all about.

OMG what have i done.

Now, for real, i think you take this to serious.

Maybe it's because of my age, but i have no problem with

Quote:

the mono-spaced font

But now something diffrent.
When i startet playing around with computers 30 years ago, there were no alternatives. I played a lot of Computergames in the last 30 Years and what i realy learned in my excessive gamingnights is the the look of a game is of absolutly no interrest FOR ME. The only thing that matters is the Story thats being told.
Maybe (in your eyes) thats wrong, but its my Opinion. I'm not trying to tell you that your "EVERY BOOK NEEDS HIS ONE STYLE" Way is wrong. So dont tell me that mine is not right.

Sometimes i read for about 4 houres in one without making anything else. I get totaly lost in the Story of the book (if it's a good one) and with the first word i read a movie is starting in my head and i do not realize what's going on around me. And if you ask me after reading, how many pages i read or what the book looks like, i can not say, because the only thing i see is the movie in my head.

Finaly, i dont know if i do somthing wrong ( and in my 1. Post i only gave an example of my Stylsheet and did NOT start a discussion about the way a book should look) but for me, the only thing that matters about a book, is the Story that it told's.

ru

theducks · 09-17-2010, 11:24 AM

Lipstick on a Pig (Story) does not change it from being a bad deal

Part of the thing about great food, is its presentation. The food still has to be good

(My local chain store Bakery has cookies that look wonderful... They forgot to put in the flavor

Books are the same way. Have a Story. Now add presentation. Like the difference in ME reading lines in a animated film and, Say Robin Williams

Using a one size fits all CSS is like taking a 18 Wheeler to Market to get a Quart of milk.

Skitzman69 · 09-17-2010, 04:28 PM

Wow! Thanks for all the great examples, they are greatly appreciated. I've learned quite a bit just seeing some examples (I haven't done html since before CSS and didn't know anything about it) It gives me a great starting point for my own (currently evolving) stylesheet. I was surprised how many didn't use the standard <p> and just modify off that with <p.noindent>/<p.italic>/etc., the idea of inheritance is appealing to me. It also seems most don't use the standard <h1/2/3/4> for easy TOC in Sigil.

I am not surprised there are lots of different opinions on how the book should look

But as @schlonz says I was looking for a standard look, something close to a book. My iPhone has a relatively small screen and the excessive margins, line spacing, font size changes, etc. just mean I fit less on the screen at a time and need to flip pages excessively. If I had a larger device then I would be much more interested in an expressive look. Since my (and most I would hope) device allows a global text size change I am very interested in what relative font sizes people use.

Quote:

Originally Posted by charleski

All formatting is done in the css - I strip out line-spacing garbage (trailing <br/>s and empty p or div tags) using regexes.

I was wondering about this exact thing... If everything is in the stylesheet then it's easier for someone else to quickly change the look of the document and was the direction I started to take. Again, I'm sure there are different opinions about external/internal/inline but I like having it in just one place.

Mike.

charleski · 09-17-2010, 06:13 PM

Quote:

Originally Posted by Skitzman69

I was surprised how many didn't use the standard <p> and just modify off that with <p.noindent>/<p.italic>/etc.

Largely because then you have to add text-indent: 0 to all the other classes. It works out easier just to use a separate class for indented body paragraphs.

Quote:

It also seems most don't use the standard <h1/2/3/4> for easy TOC in Sigil.

I use them all the time, but headings are the way you introduce variety, so those styles wouldn't be part of a standard set.

Quote:

I am very interested in what relative font sizes people use.

In theory it's best to use a geometric progression, eg 100%, 120%, 144%, 176%, though I think in practice this isn't too important. You need to avoid using sizes that are too large (2em is shouting), and remember that setting text in bold is functionally similar to increasing the size one step.

Carpathian · 09-24-2010, 07:59 PM

I'm out of my depth here....a true noob...

I'm trying to figure out how to change the fonts on epubs I load onto my Kobo, i.e. override the built-in fonts that for me are too light, not black or contrasty enough.

I have a sense that this means altering or adding to the stylesheet for an epub, but that's as far as I've gotten.

I've used Calibre and just downloaded Sigil....but I don't see this capability or at least in any direct way...

Can someone point me toward the next step or offer other suggestions. Many thanks (from Toronto).

09-14-2010, 09:31 PM	#1
Skitzman69 Junior Member Posts: 6 Karma: 10 Join Date: Sep 2010 Device: IPhone	Stylesheet examples? Hi, Am trying to standardize my epubs, they are quite a mess (converted from various things) and was wondering what basic stylesheet do people use? Could you post yours? Thanks, Mike.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Examples	kafkaesque1978	iRiver Story	1	07-26-2010 04:49 PM
How to maintain a global CSS stylesheet	amoroso	Sigil	7	07-18-2010 09:37 PM
Looking for examples of typos in eBooks	Tonycole	General Discussions	1	05-05-2010 05:23 AM
Where is the stylesheet.css?	roger64	Sigil	4	03-23-2010 03:12 PM
Skinning Gmail with a Custom Stylesheet	Colin Dunstan	Lounge	0	02-14-2005 09:20 AM

09-17-2010, 11:24 AM	#12
theducks Well trained by Cats Posts: 30,455 Karma: 58055868 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Lipstick on a Pig (Story) does not change it from being a bad deal Part of the thing about great food, is its presentation. The food still has to be good (My local chain store Bakery has cookies that look wonderful... They forgot to put in the flavor Books are the same way. Have a Story. Now add presentation. Like the difference in ME reading lines in a animated film and, Say Robin Williams Using a one size fits all CSS is like taking a 18 Wheeler to Market to get a Quart of milk.

09-24-2010, 07:59 PM	#15
Carpathian Junior Member Posts: 7 Karma: 10 Join Date: Sep 2010 Device: Kobo	I'm out of my depth here....a true noob... I'm trying to figure out how to change the fonts on epubs I load onto my Kobo, i.e. override the built-in fonts that for me are too light, not black or contrasty enough. I have a sense that this means altering or adding to the stylesheet for an epub, but that's as far as I've gotten. I've used Calibre and just downloaded Sigil....but I don't see this capability or at least in any direct way... Can someone point me toward the next step or offer other suggestions. Many thanks (from Toronto).

Advert

Advert