View Full Version : Feedback on CSS?


GraciousMe
10-31-2012, 12:33 PM
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.

Jellby
10-31-2012, 01:09 PM
Some comments:

@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.

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.

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.

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.

<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".

pholy
10-31-2012, 11:46 PM
Code:

@page {margin: 1.3em}

I was just looking at @page for another book, and W3C (http://www.w3.org/TR/CSS21/page.html) 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.

mrmikel
11-01-2012, 08:33 AM
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.

GraciousMe
11-01-2012, 01:12 PM
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.

Jellby
11-02-2012, 08:46 AM
<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:

<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:

<h1>Chapter Title</h1>

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

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

Block element:

<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>
div.big_spacer { height: 2em; }
div.spacer { height: 1em; }

GraciousMe
11-02-2012, 10:06 AM
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.

DaleDe
11-03-2012, 01:15 PM
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

Jellby
11-03-2012, 04:37 PM
A possible solution

<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...

theducks
11-03-2012, 09:11 PM
A possible solution

<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 :)

Jellby
11-04-2012, 05:53 AM
I was actually thinking of having something like:

span.subtitle {
display: block;
font-size: 80%;
margin-top: 0.5em;
}

that would make it unnecessary ;)

theducks
11-05-2012, 09:03 PM
I was actually thinking of having something like:

span.subtitle {
display: block;
font-size: 80%;
margin-top: 0.5em;
}

that would make it unnecessary ;)

just learned a new trick :2thumbsup