Very basic ePub CSS?

JJ Johnson · 06-16-2020, 04:29 PM

I have some ePub files that I've downloaded from a free book site that I'm trying to clean up with a python script. Basically just some global search/replaces using regular expressions, and then replacing the CSS file with my own.

These will be loaded onto my Kobo Libra, converted to kepub, if that's relevant. Formatting in these files is extremely basic - chapters have a heading and paragraphs, seldom anything more.

I'm looking for some basic guidelines to what works best on an ereader. Some specific questions:

Default font size? Is 1em standard?

What about line spacing?

Should there be any page margins or padding? My Kobo has a (side) margin setting. If there's a standard, I'd want to use that and expect the Kobo's setting to work both with commercially published books and those that I modify.

Paragraphs. Is there a standard for indents? I've seen 2em used.

One thing I also notice in these files is that they specify two CSS files in the header. The first has most of the formatting. The second does nothing but set <body> top and bottom margins to 5pt. Is there any particular reason for doing this?

JSWolf · 06-16-2020, 04:49 PM

What is this free eBook site and what is the eBook you've downloaded? I an grab a copy and have a look at the code.

As to defaults, there should be no font size set for the body font and there should be no margins and no line height (except if a large first letter or dropcap) is used.

From your description of the second CSS file, it sounds like a Calibre conversion to ePub.

JJ Johnson · 06-16-2020, 05:02 PM

Thanks. That's helpful. I'll see how that works.

Something else is that paragraphs are formatted as divs.

<div class="p">..</div>

My OCD is telling me to just change it all to

<p>...</p>

Is there any reason that paragraphs need to be <div>, or even <p> with a class designation? I can understand when a specific formatting is desired.

If I don't specify the indent or treatment of paragraphs, will the ereader generally apply its own formatting, or just leave them without any indent at all? They'd still be block elements, but would anything set them off?

JSWolf · 06-16-2020, 05:10 PM

Normally <p> is used. I do convert those <div> to <p>. But you have to be careful as not all <div> would need to be converted. Some <div> may need to be left as a <div>.

As for indents, I prefer a 1.2em indent. I don't like paragraph spaces. Those are my personal preferences.

phillipgessert · 06-16-2020, 05:12 PM

Quote:

Originally Posted by JJ Johnson

Thanks. That's helpful. I'll see how that works.

Something else is that paragraphs are formatted as divs.

<div class="p">..</div>

My OCD is telling me to just change it all to

<p>...</p>

Is there any reason that paragraphs need to be <div>, or even <p> with a class designation? I can understand when a specific formatting is desired.

If I don't specify the indent or treatment of paragraphs, will the ereader generally apply its own formatting, or just leave them without any indent at all? They'd still be block elements, but would anything set them off?

Those definitely shouldn't be divs, thats awful. And yes, if you don't style your <p>s at all, the app/device defaults and settings will kick in, which I suppose in some weird edge case COULD mean nothing whatsoever sets them apart, but if such a device exists I suppose its users would be strangely used to that.

Notjohn · 06-17-2020, 01:10 PM

Grab whatever you want from my style sheet, which is at https://notjohnkdp.blogspot.com/2013...yle-sheet.html

Or grab the whole thing, and when you're done use Sigil to get rid of the ones you don't use (Sigil > Tools > Delete Unused Style Classes. Save the streamlined style sheet and use it on subsequent books.

hobnail · 06-17-2020, 02:14 PM

When I download an epub from Project Gutenberg I feel the need (compulsion) to "fix" its layout and formatting. I open it in Sigil, find the files that have the first and last chapters and use Sigil's merge function to turn them into one big file. Then I select and copy everything between the start and end body tags and paste that into a new Sigil instance, replacing that empty paragraph it provides. Looking at what that produces in Sigil's preview window it's by and large readable, the main offenders being a big space between paragraphs and no indentation; since I didn't copy over the original CSS file there's no styling other than what the previewer has built in.

So I'd start with something like that; strip all class= lines and make all the tags bare. Then add some basic css file after deleting the original.

Turtle91 · 06-17-2020, 04:06 PM

Quote:

Originally Posted by Notjohn

... when you're done use Sigil to get rid of the ones you don't use (Sigil > Tools > Delete Unused Style Classes. Save the streamlined style sheet and use it on subsequent books.

Be careful, the built-in version of Delete Unused Style Classes is a bit buggy. It can miss, and delete, things that you would rather keep. (eg it has a hard time determining that pseudo-selectors are, in fact, used.)

I would recommend installing the cssRemoveUnusedSelectors plugin, It seems to do a great job, and prettify's your style sheet when it's done.

Cheers,

JSWolf · 06-17-2020, 05:05 PM

Quote:

Originally Posted by Turtle91

Be careful, the built-in version of Delete Unused Style Classes is a bit buggy. It can miss, and delete, things that you would rather keep. (eg it has a hard time determining that pseudo-selectors are, in fact, used.)

I would recommend installing the cssRemoveUnusedSelectors plugin, It seems to do a great job, and prettify's your style sheet when it's done.

Cheers,

I use the Calibre Editor's Remove unused CSS Rules and I've not had it remove any classes that are actually in use. It works very well.

DNSB · 06-17-2020, 07:51 PM

Quote:

Originally Posted by JSWolf

I use the Calibre Editor's Remove unused CSS Rules and I've not had it remove any classes that are actually in use. It works very well.

I've found a couple of issues with calibre removing unused CSS elements. Multiple abcdefg::hijkl CSS3 pseudo-elements on the same line for one.

PeterT · 06-17-2020, 08:37 PM

A few years ago Pablo made a basic tutorials on creating an ePub including a basic discussion of CSS. See https://www.mobileread.com/forums/sh...19#post1503619

JSWolf · 06-18-2020, 05:36 AM

Quote:

Originally Posted by DNSB

I've found a couple of issues with calibre removing unused CSS elements. Multiple abcdefg::hijkl CSS3 pseudo-elements on the same line for one.

Any other issues? The good thing is that you can view the changes and see what's been removed and if something is removed that you don't want removed, you'll know it and can deal with it.

Turtle91 · 06-18-2020, 09:50 AM

Quote:

Originally Posted by JSWolf

Any other issues? The good thing is that you can view the changes and see what's been removed and if something is removed that you don't want removed, you'll know it and can deal with it.

You can do that with the Sigil plugin as well. However, I haven't yet found a class that it has detected, or not detected, incorrectly.

JSWolf · 06-18-2020, 02:08 PM

Quote:

Originally Posted by Turtle91

You can do that with the Sigil plugin as well. However, I haven't yet found a class that it has detected, or not detected, incorrectly.

The only problem I see is that sometimes an eBook can have hundreds of unused classes and checking them can be annoying.

Turtle91 · 06-18-2020, 08:43 PM

True, but most of my books don't use that many different classes. I can usually remember the ones I have used and check to maker sure they are still there after the clean-up. I do a last minute look at all the pages in the book to make sure the styling still looks good. If I see a problem I revert back to the last saved version.

06-16-2020, 04:29 PM	#1
JJ Johnson Connoisseur Posts: 70 Karma: 2119794 Join Date: Feb 2020 Location: Colorado Device: Kobo Libra H20	Very basic ePub CSS? I have some ePub files that I've downloaded from a free book site that I'm trying to clean up with a python script. Basically just some global search/replaces using regular expressions, and then replacing the CSS file with my own. These will be loaded onto my Kobo Libra, converted to kepub, if that's relevant. Formatting in these files is extremely basic - chapters have a heading and paragraphs, seldom anything more. I'm looking for some basic guidelines to what works best on an ereader. Some specific questions: Default font size? Is 1em standard? What about line spacing? Should there be any page margins or padding? My Kobo has a (side) margin setting. If there's a standard, I'd want to use that and expect the Kobo's setting to work both with commercially published books and those that I modify. Paragraphs. Is there a standard for indents? I've seen 2em used. One thing I also notice in these files is that they specify two CSS files in the header. The first has most of the formatting. The second does nothing but set <body> top and bottom margins to 5pt. Is there any particular reason for doing this?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Basic CSS not working in Kindle iOS App	JohnnyW	Kindle Formats	14	09-19-2014 07:10 PM
Override ePub CSS with userStyle.css?	barium	Sony Reader Dev Corner	11	07-16-2011 03:25 PM
epub CSS versus "Regular" CSS	konrad	ePub	4	02-18-2011 09:29 AM
Basic CSS Font family question!	kjk	ePub	2	05-27-2010 01:28 PM
Basic CSS For Sony Reader	ExiledV20	Sigil	7	02-05-2010 02:38 AM

06-16-2020, 04:49 PM	#2
JSWolf Resident Curmudgeon Posts: 79,771 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	What is this free eBook site and what is the eBook you've downloaded? I an grab a copy and have a look at the code. As to defaults, there should be no font size set for the body font and there should be no margins and no line height (except if a large first letter or dropcap) is used. From your description of the second CSS file, it sounds like a Calibre conversion to ePub.

06-16-2020, 05:02 PM	#3
JJ Johnson Connoisseur Posts: 70 Karma: 2119794 Join Date: Feb 2020 Location: Colorado Device: Kobo Libra H20	Thanks. That's helpful. I'll see how that works. Something else is that paragraphs are formatted as divs. <div class="p">..</div> My OCD is telling me to just change it all to <p>...</p> Is there any reason that paragraphs need to be <div>, or even <p> with a class designation? I can understand when a specific formatting is desired. If I don't specify the indent or treatment of paragraphs, will the ereader generally apply its own formatting, or just leave them without any indent at all? They'd still be block elements, but would anything set them off?

06-16-2020, 05:10 PM	#4
JSWolf Resident Curmudgeon Posts: 79,771 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Normally <p> is used. I do convert those <div> to <p>. But you have to be careful as not all <div> would need to be converted. Some <div> may need to be left as a <div>. As for indents, I prefer a 1.2em indent. I don't like paragraph spaces. Those are my personal preferences.

06-17-2020, 01:10 PM	#6
Notjohn mostly an observer Posts: 1,519 Karma: 987654 Join Date: Dec 2012 Device: Kindle	Grab whatever you want from my style sheet, which is at https://notjohnkdp.blogspot.com/2013...yle-sheet.html Or grab the whole thing, and when you're done use Sigil to get rid of the ones you don't use (Sigil > Tools > Delete Unused Style Classes. Save the streamlined style sheet and use it on subsequent books.

06-17-2020, 02:14 PM	#7
hobnail Running with scissors Posts: 1,587 Karma: 14328510 Join Date: Nov 2019 Device: none	When I download an epub from Project Gutenberg I feel the need (compulsion) to "fix" its layout and formatting. I open it in Sigil, find the files that have the first and last chapters and use Sigil's merge function to turn them into one big file. Then I select and copy everything between the start and end body tags and paste that into a new Sigil instance, replacing that empty paragraph it provides. Looking at what that produces in Sigil's preview window it's by and large readable, the main offenders being a big space between paragraphs and no indentation; since I didn't copy over the original CSS file there's no styling other than what the previewer has built in. So I'd start with something like that; strip all class= lines and make all the tags bare. Then add some basic css file after deleting the original.

06-17-2020, 08:37 PM	#11
PeterT Grand Sorcerer Posts: 13,532 Karma: 78910202 Join Date: Nov 2007 Location: Toronto Device: Libra H2O, Libra Colour	A few years ago Pablo made a basic tutorials on creating an ePub including a basic discussion of CSS. See https://www.mobileread.com/forums/sh...19#post1503619

06-18-2020, 08:43 PM	#15
Turtle91 A Hairy Wizard Posts: 3,355 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	True, but most of my books don't use that many different classes. I can usually remember the ones I have used and check to maker sure they are still there after the clean-up. I do a last minute look at all the pages in the book to make sure the styling still looks good. If I see a problem I revert back to the last saved version.