View Full Version : Tool to centralise css styles?


snarkophilus
06-26-2011, 08:57 PM
Hi folks,

I've got an epub that seems to have been created with or via Microsoft Word, and it has no single common CSS stylesheet. I'd like to edit some of the CSS but this is obviously a bit of a pain if you need to do it in a couple of dozen files. In this particular case, all the html files (with the exception of the cover page file) have the same identical 732 lines at the top of each file.

Is there a tool available that can take the common styles of multiple html files in an epub and "commonise" them into a single stylesheet and then insert a reference to that stylesheet into each html file?

I've also idly wondered about converting the epub to a different format (maybe mobi?) and then back to epub to see if that "fixes" things...

Thanks,
Simon.

Adjust
06-26-2011, 10:45 PM
have the same identical 732 lines at the top of each file.


Not sure what you mean here?

If you're talking about renaming styles in a text editor which does "regular expressions" would work

Find:
<p class="Somestylename">(.*?)</p>
Replace
<p class="anotherstylename">\1</p>

snarkophilus
06-26-2011, 11:06 PM
Not sure what you mean here?

The particular problem I want to start with is that the css in each html file has this sort of thing:

span.sgc-7 {font-size: 10.0pt;mso-ansi-language:EN-AU}
span.sgc-6 {font-size:10.0pt;mso-ansi-language:EN-AU}
span.sgc-4 {font-size:16.0pt}
span.sgc-3 {font-size:10.0pt}
span.sgc-1 {font-size:18.0pt}

and on my Sony Reader I get one font size regardless of the zoom level. I'm assuming that if I change the above to:

span.sgc-7 {font-size: 1em;mso-ansi-language:EN-AU}
span.sgc-6 {font-size: 1em;mso-ansi-language:EN-AU}
span.sgc-4 {font-size: 1.6em}
span.sgc-3 {font-size: 1em}
span.sgc-1 {font-size: 1.8em}

or something similar I'll then get something that plays happier with my Sony.

I can obviously use find/replace on all files in something like Sigil or notepad++. That however got me thinking that there might be a general solution of removing all the duplicate CSS in every html file and putting it in a single stylesheet.

Cheers,
Simon.

Adjust
06-26-2011, 11:35 PM
Oh...Ok

I guess you could run a search and replace on joust the Font size line"
Search
font-size: (.*?)
Replace
font-size: 1em

I don't know of another way, sorry

wannabee
06-27-2011, 02:47 AM
Lucky they are identical in each file. If I had that problem I would open one of the files and copy the opening CSS and paste it into the find field and write the link to the new CSS file in the replace field in notepad++ You can find and replace in all files in a directory. Brows to the package and replace. Make a new CSS file and update the manifest.

DaleDe
06-27-2011, 11:59 AM
Lucky they are identical in each file. If I had that problem I would open one of the files and copy the opening CSS and paste it into the find field and write the link to the new CSS file in the replace field in notepad++ You can find and replace in all files in a directory. Brows to the package and replace. Make a new CSS file and update the manifest.

Or if you do the same thing in Sigil itself you can avoid some work. The SGC entries are a giveaway that these were done in Sigil.

Open the CSS files in Sigil and copy and paste contents into the master CSS and then use the code view to update the CSS entry in the top of the xhtml files to point to the master. Sigil multiple files replace can be used to do this all at once. You can then remove the uneeded CSS files and then save the ePUB. All the manifest stuff will be fixed automatically.

Dale

Faster
06-27-2011, 02:24 PM
In Sigil, Code View:
First in one of the html files that has the CSS code, copy the code and paste into notebook.
Paste the following at the top of the notebook file:
@namespace h "http://www.w3.org/1999/xhtml";
Save the file as stylesheet.css.

Right click the Styles panel - Styles folder and select Add Existing items. Browse to and open stylesheet.css you've just created.

Back into Code View:
Select and copy the style information of the cover page file. Paste into notebook temporarily.
Use Find/Replace as follows:
Look in 'All HTML files'
Check 'Regular expression' and 'All'.

Find: (<style)[^</style>].*(</style>)
Repl: <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" />

Finally replace the original CSS into the cover page html.

charleski
07-01-2011, 04:08 AM
In Sigil, Code View:
First in one of the html files that has the CSS code, copy the code and paste into notebook.
Paste the following at the top of the notebook file:
@namespace h "http://www.w3.org/1999/xhtml";


Why????
This is completely unnecessary, you're merely using it to define a namespace prefix that isn't used and is the same as the default namespace. There's no point adding in code that's nothing more than padding.