a few extra css questions

[marbs]

a) how do you get the text to wrap the image?
i tried extra_css="img{align:left;}. no go.

b)i have a recipe that each article is a bunch of tables. i only keep a few of the tables. some of the tables have <table style="float: right;" class="book_table"> as the tag. if i do not remove the "style" attribute, the tables are warped. if i remove "style" then the columns have ero space between them. how can this be fixed?

[kovidgoyal]

a) Depends on the actual markup, there's no one size fits all answer

b) replace style with css to set column spacing

[marbs]

a)ill check the original html and get back to you.

b)and how do i do that?

[kovidgoyal]

google table css, it's pretty simple, I just dont recall it off the top of my head

[boocko]

I try do download some pages using
ebook-convert page.recipe dir --test -vv

In the recipe file, I have
extra_css = .....css....

The html page is downloaded into the folder dir, but in the HTML I cannot find the css I put in the file. It is not in css file nor in <style> tag just before the body.

What am I missing? Where and when is extra_css put into?

[marbs]

Kovid, worked like a charm. thanks.

boocko, what are you trying to do? what is happening exactly?

[boocko]

I'm trying to insert custom CSS into downloaded pages, but it doesn't work.
I put extra_css into recipe, I download the page, but I can't find the css in the downloaded code. I want to do exactly the same thing as in manual:

Specify any extra CSS that should be addded to downloaded HTML files It will be inserted into <style> tags, just before the closing </head> tag thereby overriding all CSS except that which is declared using the style attribute on individual HTML tags. For example:

But I can't make it work. I have tested also the included recipes, e.g. cnn.recipe, which includes a lot v extra_css like this:

ebook-convert cnn.recipe cnn --test -vv

The output is saved into folder cnn. I look into the folder. The extra_css is not in the stylesheet.css, nor in any html page. The only style in the HEAD (according to the manual, this is where extra css should go) is

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
</style></head>

I am a bit confused.

[marbs]

post your full code and explain exactly what you want to do.

[boocko]

I don't know hot to explain it more exactly...

OK, make an empty folder, TEST. Copy there any recipe, e.g. cnn.recipe file, that is in Calibre directory under resources\recipes. You can open the file and see, that it includes a LOT of extra_css:

extra_css = '''
.cnn_strycntntlft{font-family :Arial,Helvetica,sans-serif;}
h2{font-family :Arial,Helvetica,sans-serif; font-size:x-small}
.cnnTxtCmpnt{font-family :Arial,Helvetica,sans-serif; font-size: x-small}
.cnnTMcontent{font-family :Arial,Helvetica,sans-serif; font-size :x-small;color:#575757}
.storytext{font-family :Arial,Helvetica,sans-serif; font-size:small}
...

Then go to command line in TEST folder, and run:

ebook-convert cnn.recipe cnn --test -vv

You will find a new folder called CNN. In the folder, there is downloaded HTML structure.
I'm trying to find out, where in this HTML structure the above quoted extra_css were inserted. According to the manual, it should be somewhere there, but I can't find it.

[marbs]

if you write extra_css = 'h2{font-family :Arial,Helvetica,sans-serif; font-size:x-small}' in you code, then the <h2> tag in the article will get these attributes.

if you want to edit an other tag, add in like i wrote above.

what i am trying to say is, what is the specific recipe you are working on and what exactly do you want done there? is it to change the font of some tag? the width of a table?

[boocko]

Ok, I think I figured this out. Calibre merges extra_css into stylesheet.css and also renames it, e.g. style=''calibre7", that's why I didn't find my styles so easily.

I must also research what happens if I redefine the style (does my style replace the old one or a merge is done?) and how no_stylesheets influences these procedures. Calibre sometimes keeps the names of the original styles (sanitized, e.g. without underscores _), sometimes not.

Is there a chapter in manual about this, how CSS is handled exactly?

[kovidgoyal]

calibre follows (for the most past) the normal CSS cascading rules.

[fredz]

Same problems for me. I try to change existing recipes to force fonts and justification and it is very strange :

On command line, if I use for example the folowing extra_css attribute :

extra_css = '''
@font-face { font-family: "Fontin"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/Fontin-Regular.ttf) }
p { text-align: justify; }
@font-face { font-family: "Fontin"; font-weight: bold; font-style: normal; src: url(res:///Data/fonts/Fontin-Bold.ttf) }
'''

The html produced with ebook-convert my.recipe
produces that on the html style sections :

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
@font-face {
font-family: "Fontin";
font-weight: normal;
font-style: normal;
src: url(res:///Data/fonts/Fontin-Regular.ttf)
}

@font-face {
font-family: "Fontin";
font-weight: bold;
font-style: normal;
src: url(res:///Data/fonts/Fontin-Bold.ttf)
}
</style>

(the p { text-align: justify; } rule is not included)

I have tried several variants, and it still don't work

I am playing with "rue89" recipe, included in calibre distribution :

feeds = [(u'La Une', u'http://www.rue89.com/homepage/feed')]

no_stylesheets = True

preprocess_regexps = [
(re.compile(r'<(/?)h2>', re.IGNORECASE|re.DOTALL),
lambda match : '<'+match.group(1)+'h3>'),
(re.compile(r'<div class="print-title">([^>]+)</div>', re.IGNORECASE|re.DOTALL),
lambda match : '<h2>'+match.group(1)+'</h2>'),
(re.compile(r'<img[^>]+src="[^"]*/numeros/(\d+)[^0-9.">]*.gif"[^>]*/>', re.IGNORECASE|re.DOTALL),
lambda match : '<span style="font-family: Sans-serif; color: red; font-size:24pt; padding=2pt;">'+match.group(1)+'</span>'),
(re.compile(r'\''), lambda match: '&rsquo;'),
]

def preprocess_html(self,soup):
body = Tag(soup, 'body')
title = soup.find('h1', {'class':'title'})
content = soup.find('div', {'class':'content'})
soup.body.replaceWith(body)
body.insert(0, title)
body.insert(1, content)
return soup

remove_tags = [ dict(name='div', attrs={'class':'content_top'}),
dict(name='div', attrs={'id':'sidebar-left'}), ]


I've tested with last calibre version (0.7.29) on osx, but also with an older linux version (0.6.13).


I'm lost.


(at the beggining, I started to find how to overwrite the stylesheet.css file included with "news" epubs (generated with "fetch news"), but it is not possible. It would be much simpler to do like this anyway : if I could have my personnal "stylesheet.css" in my home folder in place of the default, it would be perfect)