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 03-14-2012, 08:49 PM   #1
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 1595268
Join Date: Aug 2010
Location: NE Oregon
Device: Sony T1, Samsung Galaxy Note, Kobo Aura HD, Nook HD+, Nexus 7 (2013)
Questions about CSS and best practices

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.

Last edited by graycyn; 03-14-2012 at 08:55 PM. Reason: added P.S.
graycyn is offline   Reply With Quote
Old 03-15-2012, 01:47 AM   #2
Keroberos
Zealot
Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.
 
Keroberos's Avatar
 
Posts: 127
Karma: 194002
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
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 http://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.
Keroberos is offline   Reply With Quote
Old 03-15-2012, 04:06 AM   #3
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 1595268
Join Date: Aug 2010
Location: NE Oregon
Device: Sony T1, Samsung Galaxy Note, Kobo Aura HD, Nook HD+, Nexus 7 (2013)
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.
graycyn is offline   Reply With Quote
Old 03-15-2012, 08:00 AM   #4
mrmikel
Book Twiddler
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: 1,712
Karma: 1356799
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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!
mrmikel is offline   Reply With Quote
Old 03-15-2012, 09:37 AM   #5
Keroberos
Zealot
Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.
 
Keroberos's Avatar
 
Posts: 127
Karma: 194002
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
Quote:
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.
Keroberos is offline   Reply With Quote
Old 03-15-2012, 04:06 PM   #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: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Quote:
Originally Posted by Keroberos View Post
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).
Jellby is online now   Reply With Quote
Old 03-15-2012, 06:47 PM   #7
Keroberos
Zealot
Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.
 
Keroberos's Avatar
 
Posts: 127
Karma: 194002
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
Ah... interesting to know, but this part kind of gives me pause,
Quote:
...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").

Last edited by Keroberos; 03-15-2012 at 06:50 PM.
Keroberos is offline   Reply With Quote
Old 03-16-2012, 12:29 PM   #8
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: 5,795
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
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.
Jellby is online now   Reply With Quote
Old 03-18-2012, 04:15 PM   #9
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 1595268
Join Date: Aug 2010
Location: NE Oregon
Device: Sony T1, Samsung Galaxy Note, Kobo Aura HD, Nook HD+, Nexus 7 (2013)
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!
graycyn 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
Questions about best practices: InDesign CS5 to ePub (file formatted for printing) mtrahan ePub 15 06-17-2011 03:43 AM
External CSS file questions michaelbr Sigil 10 01-27-2011 08:08 AM
a few extra css questions marbs Recipes 12 11-20-2010 10:15 AM
CSS Questions JTAL604622 Calibre 0 11-18-2010 06:33 PM
Inline SVG questions (whitespace & other practices) politicorific Workshop 6 04-12-2009 05:32 PM


All times are GMT -4. The time now is 02:55 PM.


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