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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-31-2012, 11:33 AM   #1
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
Question Feedback on CSS?

Did I get it right, can one post one´s CSS for reactions and feedback?

In that case, I welcome feedback on my CSS and a small representative snippet from my book. The text here is not my own, just some random stuff from E. Britannica. There is no real continutiy, just a catalog of different, recurring patterns in my book.

(I should perhaps mention that the book is a music manual for youngish singers. English is not my native language, nor is the book written in that language.)

PLEASE NOTE: I am mainly interested in feedback on my CSS (the construction of which is a quite new thing to me). You might have views, even violent ones, on the way I construct my page. I am less interested in that.

I am an writer (that´s how I pay my rent), and not a designer, programmer or typographer. I have noted that typograpy is one of the stiffest, most purist and most resistant to change-domains. I do NOT wish to enter into a polemic about those things.

I have given a lot of thought to how I want my book to look, so please respect that and do not regard me as a thoughtless beginner. Ok?

Sorry for sounding so defensive. I´ve had bad experiences with anal typographers.

PS: In another thread I have discussed footnotes with some of you. In brackets you can see my "solution" to this. I omitted the *-s which otherwise signal "footnote" , so basically what we have at the end of the 4-th paragraph is not a footnote, but auxilary text in smaller case within brackets.
Attached Files
File Type: epub CSS plus CODE.epub (3.3 KB, 126 views)

Last edited by GraciousMe; 10-31-2012 at 11:35 AM.
GraciousMe is offline   Reply With Quote
Old 10-31-2012, 12:09 PM   #2
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
Some comments:

Code:
@page {margin: 1.3em}
I think that's too large a margin, and you probably don't want it to change with font size. For ebook readers, a minimal margin is usually a better idea, something like 2mm.

Code:
body { font-family: "Garamond"; }
Avoid specifying a font-family unless for some particular technical or stylistic effects. The main text font is probably something the user would like to set him/herself, and not have it forced by the book. Besides, most ebook readers won't have a "Garamond" font available anyway.

Code:
p { text-align: left; }
Personally, I prefer justified text, but I know some people prefer left-aligned, especially in small screens. In any case, that's also something better left to the user, do not set any alignment to normal paragraphs.

Code:
intro { letter-spacing: 0.09em; }
The letter-spacing property is not in the ePub 2.1 spec. It's not a big deal, readers that don't support it (because they are not required too) will just ignore it.

Code:
<p class="tom">&nbsp;</p>
Do not do that. You just want some vertical space, use vertical (top/bottom) margins, or a block element with fixed height. That's not a paragraph and there's no content to have there, don't add vertical space with "empty lines".
Jellby is online now   Reply With Quote
Old 10-31-2012, 10:46 PM   #3
pholy
Booklegger
pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.
 
pholy's Avatar
 
Posts: 1,801
Karma: 7999816
Join Date: Jun 2009
Location: Toronto, Ontario, Canada
Device: BeBook(1 & 2010), PEZ, PRS-505, Kobo BT, PRS-T1, Playbook, Kobo Touch
Quote:
Code:

@page {margin: 1.3em}
I was just looking at @page for another book, and W3C says only absolute measures are allowed in @page; the font size isn't defined outside the page, so em has no meaning.

My own feeling is that since margins in @page can only reduce the usable area, I'd rather not have any @page specification at all (in an EPUB file). But that's just me, I suppose.
pholy is offline   Reply With Quote
Old 11-01-2012, 07:33 AM   #4
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
You might look at:
http://www.w3schools.com/css/. Quite basic and straightforward and it allows you to try it out so you can see the effect of changes.
mrmikel is offline   Reply With Quote
Old 11-01-2012, 12:12 PM   #5
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
Quote:
Originally Posted by Jellby View Post
Some comments:

Thanks for your valuable input. At least part of my CSS is copied from manuals, etc. that I don´t really understand. For example this one: @page {margin: 1.3em}

Most of your suggestion is about removing stuff.

I have a question about this one, though.

<p class="tom">&nbsp;</p>
>Do not do that. You just want some vertical space, use vertical (top/bottom) margins, or a block element with fixed height. That's not a paragraph and there's no content to have there, don't add vertical space with "empty lines".

Margins of what? Block element...?

I feel freer being able to just insert a blank space, more independent than having to change another element.
GraciousMe is offline   Reply With Quote
Old 11-02-2012, 07:46 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 GraciousMe View Post
<p class="tom">&nbsp;</p>
Do not do that. You just want some vertical space, use vertical (top/bottom) margins, or a block element with fixed height. That's not a paragraph and there's no content to have there, don't add vertical space with "empty lines".

Margins of what? Block element...?
You have something like this:

Code:
<h1>Chapter Title</h1>

<p class="tom">&nbsp;</p>

<p class="tom">&nbsp;</p>

<div class="intro">
Short introductory text.
</div>

<p class="tom">&nbsp;</p>

<p class="first">First paragraph</p>
I'd recommend one if these (the first one is preferable):

Margins:

Code:
<h1>Chapter Title</h1>

<div class="intro">
Short introductory text.
</div>

<p class="first">First paragraph</p>
Code:
h1 { margin-bottom: 1.5em; }
div.intro { margin-bottom: 1em; }
Block element:

Code:
<h1>Chapter Title</h1>

<div class="big_spacer">&nbsp;</div>

<div class="intro">
Short introductory text.
</div>

<div class="spacer">&nbsp;</div>

<p class="first">First paragraph</p>
Code:
div.big_spacer { height: 2em; }
div.spacer { height: 1em; }
Jellby is online now   Reply With Quote
Old 11-02-2012, 09:06 AM   #7
GraciousMe
Zealot
GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.GraciousMe ought to be getting tired of karma fortunes by now.
 
Posts: 101
Karma: 202774
Join Date: Apr 2012
Device: none
Quote:
Originally Posted by Jellby View Post
You have something like this:
Thanks. The reason I would prefer the block element before the margin-solution is that in one chapter I have a... don´t know what it is called... A heading like this:

THE UNIVERSE
or
How to boil an egg


With those bigger margins for h1 the distance between the lines gets too big.
GraciousMe is offline   Reply With Quote
Old 11-03-2012, 12:15 PM   #8
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
Quote:
Originally Posted by GraciousMe View Post
Thanks. The reason I would prefer the block element before the margin-solution is that in one chapter I have a... don´t know what it is called... A heading like this:

THE UNIVERSE
or
How to boil an egg


With those bigger margins for h1 the distance between the lines gets too big.
Use <br/> to make the three lines instead of three H1 tags. It will work better in the TOC and will display better on the page. And CSS margin will work properly.

Dale
DaleDe is offline   Reply With Quote
Old 11-03-2012, 03:37 PM   #9
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
A possible solution

Code:
<h1>THE UNIVERSE
<span class="subtitle">or<br/>
How to boil an egg</span></h1>
The <h1> holds the whole title, and you can control how the subtitle is displayed...
Jellby is online now   Reply With Quote
Old 11-03-2012, 08:11 PM   #10
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by Jellby View Post
A possible solution

Code:
<h1>THE UNIVERSE<br />
<span class="subtitle">or<br/>
How to boil an egg</span></h1>
The <h1> holds the whole title, and you can control how the subtitle is displayed...
did you forget one
theducks is offline   Reply With Quote
Old 11-04-2012, 04:53 AM   #11
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
I was actually thinking of having something like:

Code:
span.subtitle {
  display: block;
  font-size: 80%;
  margin-top: 0.5em;
}
that would make it unnecessary
Jellby is online now   Reply With Quote
Old 11-05-2012, 08:03 PM   #12
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by Jellby View Post
I was actually thinking of having something like:

Code:
span.subtitle {
  display: block;
  font-size: 80%;
  margin-top: 0.5em;
}
that would make it unnecessary
just learned a new trick
theducks is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
To all your feedback – for which many thanks! Graham Coulson General Discussions 0 09-18-2011 08:32 AM
Override ePub CSS with userStyle.css? barium Sony Reader Dev Corner 11 07-16-2011 03:25 PM
epub CSS versus "Regular" CSS konrad ePub 4 02-18-2011 09:29 AM
css pseudo elements and adjacent combinators in extra css? ldolse Calibre 2 12-21-2010 05:09 PM
Some feedback please twr Amazon Kindle 7 09-14-2010 03:28 PM


All times are GMT -4. The time now is 09:10 AM.


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