[Plugin] RemoveInLineStyles Plugin

[KevinH]

Hi All,

This "edit" plugin will search for and remove all inline styles (style attributes in xhtml tags) and replace them with the equivalent class stored in an external stylesheet.

Please note there is now a related css companion plugin called FixHeadStyles creted bu Doitsu that will extract style tag contents and make them into external css stylesheets. Please see the Sigil Plugin Index for a link to it.

Updated: May 31, 2021
Current Version: "0.3.1"

Requires: Python 3.4 or Later and Sigil 1.0 or later

See the attached: RemoveInLineStyles_v031.zip

For Sigil Versions before Sigil-1.0
please see the attached older version RemoveInLineStyles_v021.zip

How it works:
It will parse all existing stylesheets using cssutils (part of the official internal Python 3 requirements included with Sigil) to create a list of all stylesheet file names and class names currently being used to prevent name collisions.

Then it will parse each and every xhtml file, examining each tag and if a style attribute is present, it will remove it, look in the current list of newly created rules to see if an exact match exists and if not add a new class name with that new rule. The correct class attribute is then added to replace the removed style attribute. Note that for safety, inline styles used inside svg or mathml elements/regions are not touched.

If inline styles are found, an external link to the newly created external stylesheet will be inserted into the head element just before the closing head tag.

No changes will be made if no inline styles are actually found in the xhtml file and no new css stylesheet will be created unless at least one inline style is found someplace in the ebook.

This code should be safe to use if no external stylesheets already exist or if there is no mixing of existing css rules and inline styles for the exact same element.

Warnings
1. Please note, any styles inside the style tag in the head tag will be ignored.
2. Should not be used on code that mixes css rules with inline styles at the same time as the authors intent with the inline style may be to overrule anything previous because inline styles have higher specificity.


Problems / Bug Reports / Suggestions for Improvements
If you do run into problems with this plugin, please report them here including a small sample of the problem xhtml/css code, along with information on your platform, Sigil version, etc. And I will try to quickly fix any bugs or issues you run into.

Hope this helps!

KevinH

[DiapDealer]

Oh, this will come in extremely handy (speaking for myself, anyway). Thanks!

[KevinH]

Update to version v021 in first post of this thread. RemoveInLineStyle will now simply ignore inline styles used inside svg elements/regions and math elements/regions for increased safety.

Kevin

[odamizu]

Originally Posted by KevinH

This "edit" plugin will search for and remove all inline styles (style attributes in xhtml tags) and replace them with the equivalent class stored in an external stylesheet.

[kovidgoyal]

@KevinH: Perhaps you should add a note that this plugin can destroy your styles, since there is no way to robustly convert an inline style to a class based style. The CSS selector specificity will always be wrong. For example

#test {
color: red
}


<span id="test" style="color:green">test</test>

will render green before this plugin runs and red after it runs.

This is because in the CSS cascading spec the specificity of an inline style declaration is always higher than the specificity of any selector based rule.

[Doitsu]

Originally Posted by kovidgoyal

Perhaps you should add a note that this plugin can destroy your styles, since there is no way to robustly convert an inline style to a class based style. The CSS selector specificity will always be wrong.

You're certainly raising a valid point, however, the ePubs for which this plugin was primarily intended are not very likely to contain id selectors and many web designers don't recommend using id selectors.

[kovidgoyal]

It has nothing to do with id selectors, here's an example without id selectors

p span.test {
color: red
}

<p>
<span class="test" style="color:green">test</span>
</p>

The point is that there is no way to map the specificity of an inline style to a selector based style robustly. Which means that the CSS cascade before and after the plugin runs is different.

[KevinH]

Good point! In both cases there are existing style sheets and are mixing in inline styles. Even if I add the new general class to a style sheet so it is found second, it won't have higher specificity.

I will add that to the warnings (now added).

I will modify the code to allow the user to abort if inline styles are used with existing style sheets already included. Or I guess I could map styles sheet classes to xhtml lines and if a rule already exists for that element, leave it alone.

Thanks for the heads up!

[KevinH]

Kovid,

As I walk the xhtml, if I can detect if a rule already exists for an element that *also* specifies an inline style, could I not add an "id" attribute and then remove the inline style and add it as a new rule to the new stylesheet but with that id selector. That should match the highest specificity rule but be come after the original definition. That should work for both your examples.

Or are there other cases that would still make this approach unsound.

KevinH

[kovidgoyal]

There is no easy way to solve this (I considered implementing this for the calibre editor a long time ago, and decided not to, because it cannot easily be made robust) -- if you use id selectors, your selector can still be trumped by another id selector that is more specific, for example, if it also has a class or a descendant selector and so on (say #xxx.yyy or p#xxx or p > span#xxx)

See https://css-tricks.com/specifics-on-...le-header-id-0 for a good overview.

What you can do do is go over all rules in all stylesheets, find the highest specificity selector that applies to the element in question, then if:

1) The selector has an id, simply merge the rules from the inline style block into that rule, taking care, in particular of shorthand properties
2) The selector does not have an id -- create a new id based selector by giving the element a random id if it does not already have one

You can refine this process by adding a few more if statements to (2) so that you use class based selectors more often.

And note that even this process is not quite bulletproof there are a few edge cases I have not mentioned -- left as an exercise to the reader.

[KevinH]

I think the only safe thing is to check if any existing class / selector match at all for an element that also has an inline style, we simply leave the inline style untouched.

[FDPuthuff]

Thank you sir.
I'll play with this and see how it can help me.

[slowsmile]

@KevinH... A way out for you might perhaps be to just rename your new "inline classes" to your own convention e.g. sgc1, sgc2 etc while at the same time moving them to the CSS. I don't know if this is useful to you but you can certainly do this using the Tidy dll(I've used the Tidy dll like this in my HTML2Epub plugin) and just moved the new classes from the top of the html file to the CSS using my own code. I think you have to set the 'css-prefix' Tidy flag for this feature to work. If you created your CSS classes this way there would hopefully be no style name clashes. The only downside perhaps is that the Tidy dll is quite a large file.

[Sarmat89]

The plugin is not quite compatible with the newer Sigil: it places the resulting file in the root directory, but inserts a "../Styles/" path reference to the HTML files.

[KevinH]

Thanks! I forgot to update it. I will do that now.