![]() |
#1 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,591
Karma: 11722446
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2
|
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. |
![]() |
![]() |
![]() |
#2 |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 128
Karma: 238654
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 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. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,591
Karma: 11722446
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2
|
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. |
![]() |
![]() |
![]() |
#4 |
Color me gone
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,089
Karma: 1445295
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! |
![]() |
![]() |
![]() |
#5 | |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 128
Karma: 238654
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
|
Quote:
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. |
|
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,546
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
![]() |
![]() |
![]() |
#7 | |
Zealot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 128
Karma: 238654
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:
Last edited by Keroberos; 03-15-2012 at 06:50 PM. |
|
![]() |
![]() |
![]() |
#8 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,546
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
![]() |
![]() |
![]() |
#9 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,591
Karma: 11722446
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2
|
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!
|
![]() |
![]() |
![]() |
|
![]() |
||||
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 |