View Full Version : Reset CSS in ebooks?


gardefjord
11-07-2011, 06:44 AM
Hi,
Anyone knows or has developed an reset.css for ebooks?
If not, wouldn't it be awesome if there was one?

/Adam

Toxaris
11-07-2011, 08:17 AM
What do you mean with a reset CSS? If you don't want layout, remove the stylesheet. However, don't complain that it looks terrible.

virtual_ink
11-10-2011, 12:48 AM
I assume gardefjord is looking for a css template that works across as many devices as possible, as a starting point for building epubs?

This would be useful and I believe there are a few out there. I haven't looked into it yet, but will when time allows.

SamL
11-10-2011, 03:08 PM
I know what your talking about, I use a reset.css file for all my web pages. I haven't really seen the need for one in a epub.

gardefjord
11-11-2011, 08:21 AM
Yes SamL, that's exactly what I'm refering too.
And, it feels kind of weird that people on mobileread don't know about it.

Guess that it's tricky to try and implement a reset.css in a similar way that you/we do in web design (I think we have a lot more read-engines then web designers has browsers). But, you have to start somewhere...

How about here: http://wiki.mobileread.com/wiki/CSS_template

DiapDealer
11-11-2011, 09:15 AM
I'm not grasping why/how it's being labeled a "reset" css? I understand "template" or "starting-point," but "reset" just doesn't make any sense. It seems to imply that you could "reset" the style of an html document with that type of stylesheet—which is, of course, impossible... unless you find a way to strip all the old class attributes from the HTML itself and replace them with the appropriate "reset" values?

Templates are fine. But in order for a global template to work with the widest range of texts/ereaders/browsers/creators possible, it's going to have to be so minimal as to be rather pointless.

I know people develop their own css templates, but that's different... they've discovered what works for them.

A global ePub CSS template might look something like:
p {
line-height: 120%;
text-indent: 1.2em;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
margin-left: 0;
}

And even that would probably be stepping on the toes of many ebook creators' designs/plans.

HarryT
11-11-2011, 09:32 AM
Yes SamL, that's exactly what I'm refering too.
And, it feels kind of weird that people on mobileread don't know about it.

Guess that it's tricky to try and implement a reset.css in a similar way that you/we do in web design (I think we have a lot more read-engines then web designers has browsers). But, you have to start somewhere...

How about here: http://wiki.mobileread.com/wiki/CSS_template

Why do you call it a "reset" CSS? Where does "resetting" something come into it? Sorry if I'm missing something obvious.

Jim Lester
11-11-2011, 12:04 PM
It's a term from web designers - it's called 'reset' because by including it you were 'resetting' the styles that were different between different browsers to a common set of stylings, however it's come to be a basic template that designers then elaborate on.

Google came up with this as a history primer which looks close to right:
http://sixrevisions.com/css/the-history-of-css-resets/

I don't know think there's an equivalent for ePub rendering space, because as the OP is starting to realize, nobody's really considered this. Likely because the various renderers (even those using the same rendering engine) vary so widely in what they do, and we (the vendors) haven't published much information about what we are doing. As a for instance if you look at the same EPUB on a Nook Color, a Sony T1, and in ADE 1.8 - you will find all three different renderings:

1.) Unless the font is embedded - the font used will be different (and even then it may be overridden on the NC)
2.) EInk vs Color makes a big difference, that the browser reset CSS authors haven't thought about.
2.) Linespacing,font size, margin and other override settings are available on the T1 and NC, but not in ADE (well font size is).

HarryT
11-11-2011, 12:21 PM
Thanks, Jim; I've been creating eBooks for more years than I care to remember, but that's a new one on me.

DiapDealer
11-11-2011, 12:43 PM
My thanks, as well.

I've always considered myself fairly fluent in web design and its terminology, but that was a term I'd never heard of.

HarryT
11-11-2011, 01:00 PM
One should perhaps be wary of resetting too many of the "defaults" of a reading device for an eBook. Eg, changing the font size for the body text is a BAD idea; there's nothing more annoying than a book which displays in a font size that's different from what the user expects; the reading device itself will allow the user to make the text larger or small. Don't mess with that!

virtual_ink
11-20-2011, 06:22 PM
You might try this out: wiki.mobileread.com/wiki/CSS_template

gardefjord
11-25-2011, 04:52 AM
@Harry_T & DiapDealer, sorry for not explaining in full what i've meant. But now you know, thanks to Jim!
And I totally agree with him that it's a very difficult task to try and create a reset for all the different devices out there. But you got to start somewhere, don't you?
I guess reset.css in webdeisgn came about because of IE, perhaps that samething similar will happen for Mobile Reader SDK, which I (and others (http://blip.tv/booknet-canada/liza-daly-open-source-epub-3514792)) think is developing too slow.

@virtual_ink I've allready posted that link

SusanM
09-04-2012, 10:34 AM
A css reset is very common in web design, with the most popular one being Meyer's reset which I use in all my web css stylesheets. I also use a reset for ebooks that does not reset the font size.

derangedhermit
09-11-2012, 09:44 PM
Or whatever you want to call us who want to format their e-books to their own preferences. In this case, the CSS person is also the reader.

It would be nice to have a reset.css equivalent, for exactly the same reason the Yahoo YUI reset became so popular - more consistent presentation across multiple clients and over time - except in this case, from the reader's point of view of reading and keeping their books in their library.

JSWolf
09-12-2012, 02:41 AM
You cannot use a reset.css to change the formatting of a given eBook. You would have to know the classes used in the eBooks and set them up appropriately. Sure, you can guess and maybe get it partially correct. But if you don't, it could look worse. The best thing to do is to look at the XML to see the used classes and then edit the CSS to do it the way you want. In most cases, it's not that difficult.

DiapDealer
09-12-2012, 08:03 AM
Also, in the case of a reset.css for the web, the differences between all the various browsers are fairly well known/documented. Not so for the various reading devices/apps. You don't know what you don't know. A reader might be able to come up with a basic "reset" css for their own device; but then again... I think most people who create a lot of ebooks (or tweak a lot of their own) already do this. They just naturally develop their own template, or css style—which might prove quite useless to anyone else.

JSWolf
09-12-2012, 01:14 PM
What I do is take CSS code I might use and put it in a separate text file. Then if I'm editing an ePub, I can copy the already made code.

The best thing to do is create a reset.css and use that as the template. Then copy from it as needed to fix up the ePub. Then you'll make sure you have the correct classes. if your reset.css has a class called noindent and the ePub you are working on has the same class called nonindent, you can easily fix things. But if you were to replace the existing CSS with your reset CSS, every instance of nonindent would fail to render properly.

mzmm
09-18-2012, 07:21 AM
the only time i've actually found it useful to include a reset.css was for fixed layout epubs (for iOS), and even then i've only used it ever to obliterate the padding and margins for block elements. it's rudimentary, but i was using something like

html,body,div,img,p,a,ul,li {margin:0;padding:0;}

started using originally because i was looking for a way to reset the default margins on the iOS. if OP's looking for a really comprehensive reset, there's no reason not just to grab one from wp or similar.

SusanM
09-25-2012, 10:40 AM
It's a term from web designers - it's called 'reset' because by including it you were 'resetting' the styles that were different between different browsers to a common set of stylings, however it's come to be a basic template that designers then elaborate on.

Google came up with this as a history primer which looks close to right:
http://sixrevisions.com/css/the-history-of-css-resets/

I don't know think there's an equivalent for ePub rendering space, because as the OP is starting to realize, nobody's really considered this. Likely because the various renderers (even those using the same rendering engine) vary so widely in what they do, and we (the vendors) haven't published much information about what we are doing. As a for instance if you look at the same EPUB on a Nook Color, a Sony T1, and in ADE 1.8 - you will find all three different renderings:

1.) Unless the font is embedded - the font used will be different (and even then it may be overridden on the NC)
2.) EInk vs Color makes a big difference, that the browser reset CSS authors haven't thought about.
2.) Linespacing,font size, margin and other override settings are available on the T1 and NC, but not in ADE (well font size is).

Jim,

This is really useful information, thanks.

SusanM
09-25-2012, 10:56 AM
I am just testing out InDesign CS6 and it automatically includes a streamlined CSS reset when exported to ePub. This is the code:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
td, th {
border-style:solid;
border-width:1px;
}
table {
border-collapse:collapse;
}
li {
display:block;
}

I have also seen this reset code in ePubs:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, ol, ul, li, pre, a, cite, code, del,
dfn, em, font, img, q, s, samp, small, strike, strong, sub,
sup, tt, var, b, u, i, center, dl, dt, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }

Yes, it doesn't work on all readers (engines), but it does make a difference on quite a few, especially if you start using background images on headers, etc. and use the second example. My view is it makes the "playing field" more predictable!

DiapDealer
09-25-2012, 04:02 PM
I rarely (if ever) leave anything unstyled in my ePubs anyway, so a reset seems like a waste of time (strictly speaking for myself). But I can see how they might be handy for someone who isn't going to take the hands-on, build-every-ePub-from-scratch approach.

SusanM
09-26-2012, 07:27 PM
I rarely (if ever) leave anything unstyled in my ePubs anyway, so a reset seems like a waste of time (strictly speaking for myself). But I can see how they might be handy for someone who isn't going to take the hands-on, build-every-ePub-from-scratch approach.

Do you work from Word or from HTML, InDesign?