Overwrite CSS during conversion

[riothamus]

I think conversion is my best bet for what I want to do, but maybe there's a plugin or another calibre feature I could use.

I download fanfics via a couple of different methods. However, I like them to look the same format-wise. I've determined that manually editing each epub by replacing the CSS from an epub "template" (meaning it looks the way I want) will do the job, at least for the most part.

What I want to do is do a bulk conversion (ideally, or I guess single conversion if absolutely necessary) and do this type of CSS replacement. I've tried placing the wanted CSS in the extra CSS both converting from epub to epub and from mobi to epub but while there are some changes, it's still not the way I want it to look.

I did some looking around the forum and the extra CSS or manually editing the epub CSS were the only ways I found. If anyone has a suggestion I'd be grateful.

Thanks!
Riothamus

[JSWolf]

The only way to get your fanfics to look consistent is to hand edit the code yourself. Chances are the CSS will be different and changing with with a fixed CSS won't work as the class names would be different and you won't know what they do. So really get to learning HTML/CSS to be able to hand edit your fanfics.

[hobnail]

JSWolf's answer assumes that your CSS is using classes. My CSS only specifies html tags; e.g.,

body {
  font-size: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  width: auto;
}

body * {
  line-height: inherit;
}

p {
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-indent: 2em;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,h4 {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.bold_italic {
  font-weight: bold;
  font-style: italic;
}

img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border: none;
}

You can't merely append this to the existing CSS because the precedence rules state that when you have, for example,

<p class="calibre1">

the CSS for .calibre1 will have precedence over the CSS for the HTML p tag, even if the CSS for p is at the bottom of the file. So I do a select all in the stylesheet file and replace the original CSS with the above. There's CSS built into the Kobo that does a nice job as is so the above merely tweaks it (I think it's possible I could delete the two font-size lines).

My goal is to always have the same left and right margins, same line spacing, and same font size every time I open a book (in other words, they were set in the Kobo). Some things are lost with this, for example, spacing after chapter titles, particularly when fools used the p tag instead of one of the h tags.

The one thing I don't want to lose is the bold and italic stuff, so before nuking the book's CSS I search for classes with italic and bold and add those classes to the .bold and .italic (so that the CSS becomes something like ".bold,.calibre8,.calibre12 {"), and the ones that are both bold and italic are added to .bold_italic (and likewise underlined bold gets added to .bold_italic). The regular expression I use for searching for that stuff is "bold|italic|font-weight: [56789]"; some books use font-weight:400 to reset to normal, which isn't necessary with my scheme.

So the book's html and all of the classes, spans, and whatnot in the html are untouched. Some books will have spaces between paragraphs by using p tags around a space entity so when I see that nonsense I delete all of those with a global replace. Some use divs instead of ps for the paragraphs so I use Diap's toolbag plugin to replace the divs with ps.

Most of the time the epub was converted from the Kindle format. If it was an epub to begin with I do an epub to epub conversion so that calibre can clean the html, fixing inline styles and whatnot.

[JSWolf]

Originally Posted by hobnail

JSWolf's answer assumes that your CSS is using classes. My CSS only specifies html tags; e.g.,

body {
  font-size: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  width: auto;
}

body * {
  line-height: inherit;
}

p {
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-indent: 2em;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,h4 {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.bold_italic {
  font-weight: bold;
  font-style: italic;
}

img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border: none;
}

There's a problem with your CSS. Most eBooks do not specify a text-indent in <p>. So that means that in some cases, where there is a center, the center may be off to the right by the amount of the indent. Also, when the text is supposed to have no indent, it could have an indent. YOu also have to go through the CSS and make sure all centers and a text indent of 0 and that any code that assumes no text indent also have a text indent of 0.

Another thing that I see is not done (but if you like it, OK) is there is no widows and orphans of 1 to turn them off. Even if your Kobo has them off, if you ever read this eBook with something that has them on, they will be on.

Most of the time the epub was converted from the Kindle format. If it was an epub to begin with I do an epub to epub conversion so that calibre can clean the html, fixing inline styles and whatnot.

If the eBook is a KF8 eBook, I'll use KindleGen to convert to ePub and then I'll see how good or bad the code is. If it's bad enough, then I'll use Calibre to convert to ePub. If it's not bad enough, I'll work with the ePub from KindleGen. KindleGen takes the KF8's code and make and ePub out of it. It leaves the code as much alone as possible.