Questions about CSS and best practices

[graycyn]

OK, I'm newish to creating epubs and scanning a few rare books I own for personal use since there is no other way to get them on my reader. I can't upload them as they are under copyright still.

My CSS skills are kind of limited and I'm getting really confused about how best to set up my ebooks, though I'm trying to keep it fairly simple.

For instance, what is the best way to set up font size?

I've seen it done with percent or ems or "small, medium, large, etc..." and I'm wondering what really is the best way to handle it? Or does it not matter as long as the ebook works and validates?

Also, what is the best way to set up spacing for things like chapter titles, subtitles, numbers and the like? Is it better to use percent, ems or px?

I could really use a guide on what is best used where!

And is it better to use <div> instead of <blockquote> or is either OK when you want to quote a block of text?

If anyone knows a website or book that covers this kind of stuff, feel free to provide a link, thanks!

P.S. I have several e-reading devices, Sony PRS-950, PRS-350, Samsung Galaxy Player 5.0, so ideally, I want solutions that will adapt well to different screen sizes and resolutions.

[Keroberos]

Well first off here's a good site for getting all the basic ins and outs of CSS, http://www.w3schools.com/css/default.asp, lots of good info there (I still reference it from time to time if I can't remember something). And here's a good epub tutorial from right here on MR https://www.mobileread.com/forums/sho...d.php?t=130390.

For setting up font sizes, I'd start off just keeping it simple (no sizing in the CSS), If you use correct headings for everything it should all work pretty well together. If you want to start playing with sizes, I always leave the main body text at the default (it can be resized in the reader anyway), and use ems or percents for sizing anything that I want to be different (those two are relative sizing, so they will scale to the main text if the font size is changed in the reader).

For spacing things it all depends on what and where it is, if it's a chapter heading at the top of a page, I use px for the top margin (this is a fixed amount so it will not change if the font size is changed in the reader), for everything else it depends on what kind of look you want. Just remember that ems are relative sizing (changes based on the reader's font size settings) and px is a fixed size (doesn't change).

Between <div> and <blockquote> tags, either is OK, but if you use a <div> tag it needs additional styling in your CSS, whereas the <blockquote> tag spacing is handled by the reader device's rendering engine.

As long as you keep things fairly simple it should adapt to many different devices.

[graycyn]

Oh many thanks! I downloaded the MR tutorial and have given it a quick look through and I think I'm mostly on the right track with a few possibly "off track" items that I will review further.

At the moment I am using ems for font sizing and percents for spacing. I was using px for spacing, which worked great on all the e-ink readers, but did not look quite so hot when I took it to the Samsung player. With percent it's looking good in Mantano and Aldiko and OK in Moon+ and FBReader and fine on the e-ink readers as well. It was a little harder for me to think that way though.

I'm keeping things as simple as I can, but man, each book is a new challenge.

[mrmikel]

Greetings from coastal Oregon!

With epubs, compatibility is the key, as they can be used on anything and as you discovered perfection on device yields mess on another.

I have had blockquotes give me a little grief on my Sony 300, if I remember because of extra lines that get thrown in.

There is a book on here, three men in a boat, which shows what can be done with fancy formatting. Might be a good way to test various readers and see how they handle various formatting, as well as being a source of CCS for steal from for your projects!

[Keroberos]

I was using px for spacing, which worked great on all the e-ink readers, but did not look quite so hot when I took it to the Samsung player.

That's due to pxs being an absolute size based on the size of the pixels on the screen, the Samsung player has the same horizontal resolution as the e-ink readers (800px), so the spacing will look different.

One thing with percents and ems that they are interchangeable, being based on the size of the parent element (1.5em is the same as 150%), but that means they will be different based on the size of the parent, i.e. a 1.5em or 150% margin on an element with a 2em size will be smaller than a 1.5em or 150% margin on an element with a 3em size.

Another thing that can help which is more html than CSS is to use correct tagging, (paragraphs in <p> tags. headings in <h1>-<h6> tags, etc). It makes it easier to go back and know what your looking at later, and makes it easier to convert to other formats if needed.

[Jellby]

Originally Posted by Keroberos

That's due to pxs being an absolute size based on the size of the pixels on the screen, the Samsung player has the same horizontal resolution as the e-ink readers (800px), so the spacing will look different.

Surprisingly, that's not exactly so (http://www.emdpi.com/csspixel.html).

[Keroberos]

Ah... interesting to know, but this part kind of gives me pause,

...the user agent should rescale pixel values.

I don't think I trust the programmers of the user agent to follow what they should do, as opposed to doing what's easiest (especially when it comes to e-readers, "should" sometimes seems to be synonymous with "optional").

[Jellby]

Right, never trust programmers to do what the specification recommends or what seems more logical to you.

My old Gen3 "thought" it was A4-size. If I opened an A4 PDF and set it to 100%, I would get it full screen.

[graycyn]

Just want to say thanks again for pointing me to that tutorial, I have just used some of the advice to handle two simple poetry sections in a book I am doing and it looks like it is working well! I was just lost on what to do before!