Extra CSS and class renaming

[fenuks]

Hi, I wrote recipe for page which has "aligncenter" class for image. I don't use its CSS (no_stylesheets = True), but I wrote extra_css = '.aligncenter {display: block; margin-left: auto; margin-right: auto;}'. Problem is that calibre changes class name from "aligncenter" to "aligncenter1", next class occurrence is renamed to "aligncenter2" etc.

I used debug option to check where renaming is done. Input and parsed html has correct class names, but processed html has changed class name, so my extra_css do not work and I'm not changing it. Is this some kind of bug or this is intended and how to make extra_css work?

Thanks.

[kovidgoyal]

extra css is applied before class names are changed. You need to override the particular style not just the class as otherwise classes are merged. So you need

text-align:justify

or whatever in your .aligncenter definition.

[fenuks]

Thank you for advice, Kovid. Unfortunately this don't solve my problem.

Let's say I have this tag:

<img class="alignright size-medium wp-image-48200" width="250" height="360" src="image-48200.png" alt="title" style="width: 250px; height: 360px;"></img>

Only alignright class has css which is

float: right;
margin: 0px 0px 5px 10px;

so my

extra_css = '.alignright {float: right; margin: 0px 0px 5px 10px;}'

It works, ebook-convert leaves alignright class and adds my custom css. But if I have next image in this or other article with same classes but other width or height attribute its class will be renamed to alignright{NUMBER}. I tried to remove width and height attributes by

remove_attributes = ['width', 'height']

and auto width and height to my extra_css. But if I remove these attributes calibre renames class name to sth like calibre2 and doesn't add extra_css.

There's one more problem. It seams that calibre preserves only first class name. If class string of an element will be "size-medium alignright wp-image-48200" instead of "alignright size-medium wp-image-48200" then in output ebook this element won't have alignright class as expected but size-medium.

Here's a full recipe if you want to test it yourself or found my explanation not clear enough:

Spoiler:

# vim:fileencoding=UTF-8:ts=4:sw=4:sta:et:sts=4:fdm=marker:ai
from calibre.web.feeds.news import BasicNewsRecipe
from calibre.ebooks.BeautifulSoup import Comment
from calibre.ebooks.BeautifulSoup import BeautifulSoup
import re

class FilmOrgPl(BasicNewsRecipe):
    title = u'Film.org.pl'
    __author__ = 'fenuks'
    description = u"Recenzje, analizy, artykuły, rankingi - wszystko o filmie dla miłośników kina. Opisy efektów specjalnych, wersji reżyserskich, remake'ów, sequeli. No i forum filmowe. Jedne z największych w Polsce."
    category = 'film'
    language = 'pl'
    cover_url = 'http://film.org.pl/wp-content/themes/KMF/images/logo_kmf10.png'
    ignore_duplicate_articles = {'title', 'url'}
    oldest_article = 7
    max_articles_per_feed = 100
    no_stylesheets = True
    remove_javascript = True
    remove_empty_feeds = True
    use_embedded_content = False

    remove_attributes = ['width', 'height', 'style']
    preprocess_regexps = [(re.compile(ur'<h3>Przeczytaj także:</h3>.*</body>', re.IGNORECASE|re.DOTALL), lambda m: '</body>'),]
    extra_css = '.alignright {float: right; margin: 0px 0px 5px 10px;} .aligncenter {margin: 0px auto; display: block;} .alignleft {float:left; margin-right:5px;}'

    keep_only_tags = [dict(attrs={'class':['content_recenzja']})]

    feeds = [(u'Recenzje', u'http://film.org.pl/r/recenzje/feed/'),
            #(u'Artyku\u0142', u'http://film.org.pl/a/artykul/feed/'),
            #(u'Analiza', u'http://film.org.pl/a/analiza/feed/'),
            #(u'Ranking', u'http://film.org.pl/a/ranking/feed/'),
            #(u'Blog', u'http://film.org.pl/kmf/blog/feed/'),
            #(u'Ludzie', u'http://film.org.pl/a/ludzie/feed/'),
            #(u'Seriale', u'http://film.org.pl/a/seriale/feed/'),
            #(u'Oceanarium', u'http://film.org.pl/a/ocenarium/feed/'),
            #(u'VHS', u'http://film.org.pl/a/vhs-a/feed/')
    ]
                
    def preprocess_html(self, soup):
        for c in soup.findAll('h11'):
            c.name = 'h1'
        for c in soup.findAll('h16'):
            c.name = 'h2'
        for c in soup.findAll('h17'):
            c.name = 'h3'
        for r in soup.findAll('br'):
            r.extract()
        for tag in soup.findAll('h8'):
            tag_index = tag.parent.contents.index(tag)
            tag.parent.insert(tag_index+1, BeautifulSoup('<br></br>'))
        return soup

[kovidgoyal]

class renaming is irrelevant. calibre does not care about class names. It merges styles using css selector specificity and once all the merging is done it then generates new class names for the merged styles.

If your extra css is not not being applied to the second image it is not because its class name is changed, it will be for some other reason. I dont have the time to look at it right now, but if you just want to hack it, simply add code to remove the classnames you dont want from the images' class attribute to postprocess_html in your recipe.

[fenuks]

I see. Changing classes in postprocess_html works but css is still not applied. I have to add inline style myself:

def postprocess_html(self, soup, first_fetch):
    for tag in soup.findAll(attrs={'class':re.compile('alignright')}):
        tag['class'] = 'alignright'
        tag['style'] = 'float: right; margin: 0px 0px 5px 10px;'
    for tag in soup.findAll(attrs={'class':re.compile('alignleft')}):
        tag['class'] = 'alignleft'
        tag['style'] = 'float:left; margin-right:5px;'
    for tag in soup.findAll(attrs={'class':re.compile('aligncenter')}):
        tag['class'] = 'aligncenter'
        tag['style'] = 'margin: 0px auto; display: block;'
    return soup