Inline css not handled correctly by HTML to epub?

kiwidude · 04-03-2011, 10:19 PM

I've got some single html files which have the css embedded within a style tag at the top, rather than a separate css file. I drop it into Calibre and it converts to a zip, everything still fine. However when I then convert to EPUB, Calibre seems to not find the css class (or at least some of them), and this results in the content being wrapped in <span> type tags with no class.

If however I take the time to move the style css into a separate .css file with a <link> element to it, and repeat the whole process, Calibre does the desired nice conversion, and those same span tags now have a class specified.

Is this expected behaviour or should I open a ticket?

EDIT: Of course I run the latest Calibre from source, currently 0.7.53

ldolse · 04-03-2011, 11:27 PM

I don't think that's expected, I rarely use inline css, but when I have it's always worked fine. I noted you qualified that 'some of them' were not found - was there something different about the classes that failed?

theducks · 04-03-2011, 11:31 PM

Quote:

Originally Posted by kiwidude

I've got some single html files which have the css embedded within a style tag at the top, rather than a separate css file. I drop it into Calibre and it converts to a zip, everything still fine. However when I then convert to EPUB, Calibre seems to not find the css class (or at least some of them), and this results in the content being wrapped in <span> type tags with no class.

If however I take the time to move the style css into a separate .css file with a <link> element to it, and repeat the whole process, Calibre does the desired nice conversion, and those same span tags now have a class specified.

Is this expected behaviour or should I open a ticket?

EDIT: Of course I run the latest Calibre from source, currently 0.7.53

is there a 'case' issue with the styles declarations and their usage?

kiwidude · 04-04-2011, 04:03 AM

@idolse - I said "some of them" as a qualifier because I didn't check all the styles to see which did/didn't appear.

Here is the original stylesheet that is inlined. The span.small-caps and span.largecap were the two that I initially noticed:

Spoiler:

Code:

<style type="text/css">
<!-- body { font-family: "Times New Roman", serif;  margin-left: 10%; margin-right: 10%; }

h1 { font-size: 280% ; 
     text-align: center ; 
     margin-top: 1em ; 
     font-weight: 700 ; 
     text-align: center }  
h2   { font-size: 205% ; 
     font-style: italic; 
     margin-top: 0em ;  
     text-align: center ; } 
h3 { font-size: 150% ;  
     font-weight: 700 ; 
     margin-top: 0em ;
     text-align: center ; }
h4 { font-size: 150% ;
     font-style: italic;
     font-variant: small-caps ;
     margin-top: 0em ;
     text-align: center ;}
h5 { font-size: 120% ; 
     font-weight: 700 ;
     text-align: center ; }
p {margin-top: 0.25em ;
   margin-bottom: 0.25em ;
   text-indent: 1.3em ;
   line-height: 1.1em ;
   text-align: left; }

p.first {margin-top: 0.25em ;
   margin-bottom: 0.25em ;
   text-indent: 0em ;
   line-height: 1.1em ;
   text-align: left; }

p.center {
        text-align: center; }

p.indent {
        margin-left: 6%;
        text-indent: 0em; 
        margin-bottom: 1.1em ;
        margin-top: 1.1em;
        }

div { margin-top: 1.1em ;
      margin-bottom: 1.1em ; }
div.indent { margin-left: 6%; 
      width: 80% ; 
      text-indent: 0em; }
div.right { text-align: right; }
div.center { text-align: center; }
div.left { text-align: left; }

div.letter_body p { 
          text-align: left; 
          text-indent: 0em; 
          margin-left: 16% ;
          margin-right: 18% ;
          margin-bottom: 0em ;
          margin-top: 0em; 
          }
div.letter_end p { 
          text-indent: 1em;
          margin-left: 55% ;
          margin-bottom: 0em ;
          margin-top: 0em;
          }
div.poetry p {
          text-align: left;
          text-indent: 0em;
          margin-left: 15% ;
          margin-right: 0.5em ;
          margin-bottom: 0em ;
          margin-top: 0em;
          width: 70%;
          font-style: italic;
          font-size: 95% ; }

.sub { font-size: 50%; vertical-align: sub; line-height: 35%; }  

span.small-caps { font-variant: small-caps; }
span.largecap { font-size : 165%; font-weight : bold; width : .50em;  } 
span.memo { font-family: arial, sans-serif ; 
           font-weight: bold ; 
           font-size: 100% ; }
hr { margin-top: 2em; 
          page-break-before: always;
          width:50%;  }

      em { color: black}
      quojust have to read {color: red}
a:link { color: red; } 
a:visited { color: blue; } 
a:hover { color: purple; } 
a:active { color: lime; } 

ol { list-style-position: outside; }
.fl {text-indent: 0em; }
a {text-decoration: none; color: black; }

.nava {
  font-family: verdana, sans-serif;
  border-style: solid; 
  border-width: thin;
  border-color: blue; 
  font-size : 150%; 
  font-weight: 900; 
  padding: .02em .05em }
.nava:hover {
  background-color: rgb(254,204,255);
  color: blue;
}
   -->

</style>

Here is an example paragraph before conversion from further down the doc:

Code:

<p class="first"><span class="largecap">W</span><span class="small-caps">hen all Siniava’s troops had surrendered</span>, Kieri Phelan’s troops assumed...

After conversion with an inline stylesheet the start of that paragraph looks like this:

Code:

  <div class="center">
    <p class="center1"><span>W</span><span>hen all Siniava’s troops had surrendered</span>, Kieri Phelan’s troops assumed...

With this stylesheet in the converted EPUB:

Spoiler:

Note that it also affects how "well" the document is split etc in terms of chapter breaks. You end up with both lost styles and a document that needs a lot more manual cleanup work to get split as one chapter per file etc.

If instead I move all that css above into a separate .css file linked before importing, this is the result after conversion of that same paragraph:

Code:

  <div class="letterbody">
    <p class="first1"><span class="largecap">W</span><span class="small-caps">hen all Siniava’s troops had surrendered</span>, Kieri Phelan’s troops assumed...

With this now being the stylesheet (note the extra styles at the end):

Spoiler:

Code:

@namespace h "http://www.w3.org/1999/xhtml";
.calibre {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0
    }
.calibre1 {
    height: 475px;
    width: 289px
    }
.calibre10 {
    display: block;
    font-size: 1.375em;
    font-weight: 700;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center
    }
.calibre11 {
    color: black;
    cursor: inherit;
    text-decoration: none
    }
.calibre12 {
    display: block;
    margin-bottom: 0.2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.2em;
    text-align: justify;
    text-indent: 1em
    }
.calibre13 {
    color: black;
    font-style: italic
    }
.calibre2 {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.calibre3 {
    display: block;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center
    }
.calibre4 {
    display: block;
    font-size: 1.375em;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center
    }
.calibre5 {
    border: 1px inset;
    color: gray;
    display: block;
    height: 2px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    width: 50%
    }
.calibre6 {
    display: block;
    font-size: 1.125em;
    font-weight: 700;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.67em;
    text-align: center
    }
.calibre7 {
    display: block
    }
.calibre8 {
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.calibre9 {
    height: 31px;
    width: 88px
    }
.center {
    display: block;
    margin-bottom: 1.1em;
    margin-top: 1.1em;
    text-align: center
    }
.center1 {
    display: block;
    line-height: 1.1em;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.25em;
    text-align: center;
    text-indent: 1.3em
    }
.first {
    display: block;
    line-height: 1.1em;
    margin-bottom: 0;
    margin-left: 16%;
    margin-right: 18%;
    margin-top: 0;
    text-align: left;
    text-indent: 0
    }
.first1 {
    display: block;
    margin-bottom: 0.2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.2em;
    text-align: justify;
    text-indent: 0
    }
.indent {
    display: block;
    margin-bottom: 1.1em;
    margin-left: 6%;
    margin-top: 1.1em;
    text-indent: 0;
    width: 80%
    }
.largecap {
    font-size: 1.375em;
    font-weight: bold;
    width: 0.5em
    }
.letterbody {
    display: block;
    margin-bottom: 1.1em;
    margin-top: 1.1em
    }
.nava {
    border-color: blue;
    border-style: solid;
    border-width: thin;
    color: blue;
    cursor: pointer;
    font-family: verdana, sans-serif;
    font-size: 1.375em;
    font-weight: 900;
    padding-bottom: 0.02em;
    padding-left: 0.05em;
    padding-right: 0.05em;
    padding-top: 0.02em;
    text-decoration: underline
    }
.right {
    display: block;
    margin-bottom: 1.1em;
    margin-top: 1.1em;
    text-align: right
    }
.small-caps {
    font-variant: small-caps
    }

ldolse · 04-04-2011, 04:11 AM

This looks like a bug with the class names changing like that. But I've seen things that sort of look like bugs with css normalization actually not be bugs in the past.

Was the div with class="center" in your original code, or is this created where Calibre split the files?

Also were there any settings in extra css, or was that empty?

Smallcaps isn't really supported in the epub spec, so there is a small possibility there is also some special casing code coming into play here.

kiwidude · 04-04-2011, 04:38 AM

Quote:

Originally Posted by ldolse

Was the div with class="center" in your original code, or is this created where Calibre split the files?

The div was not in the original code. As for the split points, I won't say they were random because it did choose some chapters to split on, just not on every chapter.

Quote:

Also were there any settings in extra css, or was that empty?

No extra css, never have got my head around how that works to get it to do what I want and always end up in Sigil instead.

I will raise a ticket and attach the document to it.

ldolse · 04-04-2011, 05:46 AM

Agree that a ticket is probably the best approach - if you didn't have anything in extra css that basically confirms you weren't throwing any special wrench in the gears (extra css is usually the cause when I've done this sort of thing to myself). The fact that the css class names were changing/being moved around along with the actual contents of the class changing seems to indicate a bug.

kovidgoyal · 04-04-2011, 09:59 AM

If you're seeing a difference when the css is inline vs. in a separate file there are two likely candidates:

1) A parsing problem inline css is first parsed by an XML parser and then by a css parser

2) A cascading issue, the inheritance rules for css are slightly different in these cases.

04-03-2011, 10:19 PM	#1
kiwidude Calibre Plugins Developer Posts: 4,636 Karma: 2162064 Join Date: Oct 2010 Location: Australia Device: Kindle Oasis	Inline css not handled correctly by HTML to epub? I've got some single html files which have the css embedded within a style tag at the top, rather than a separate css file. I drop it into Calibre and it converts to a zip, everything still fine. However when I then convert to EPUB, Calibre seems to not find the css class (or at least some of them), and this results in the content being wrapped in <span> type tags with no class. If however I take the time to move the style css into a separate .css file with a <link> element to it, and repeat the whole process, Calibre does the desired nice conversion, and those same span tags now have a class specified. Is this expected behaviour or should I open a ticket? EDIT: Of course I run the latest Calibre from source, currently 0.7.53 Last edited by kiwidude; 04-03-2011 at 10:22 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
epub code snippets (html / css)	zelda_pinwheel	ePub	196	10-09-2016 04:21 AM
HTML/CSS for (German) s p a c e d o u t emphasis	frabjous	Workshop	21	05-16-2011 04:52 PM
Another ePub does not display correctly.	KjellM	EPUBReader	7	07-16-2010 03:31 AM
HTML and CSS for Dummies	weedfreak	Sigil	17	01-07-2010 09:34 PM
Problems generating ePub from HTML/CSS	AlexBell	Calibre	3	07-17-2009 05:10 AM

04-03-2011, 11:27 PM	#2
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	I don't think that's expected, I rarely use inline css, but when I have it's always worked fine. I noted you qualified that 'some of them' were not found - was there something different about the classes that failed?

04-04-2011, 04:11 AM	#5
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	This looks like a bug with the class names changing like that. But I've seen things that sort of look like bugs with css normalization actually not be bugs in the past. Was the div with class="center" in your original code, or is this created where Calibre split the files? Also were there any settings in extra css, or was that empty? Smallcaps isn't really supported in the epub spec, so there is a small possibility there is also some special casing code coming into play here.

04-04-2011, 05:46 AM	#7
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	Agree that a ticket is probably the best approach - if you didn't have anything in extra css that basically confirms you weren't throwing any special wrench in the gears (extra css is usually the cause when I've done this sort of thing to myself). The fact that the css class names were changing/being moved around along with the actual contents of the class changing seems to indicate a bug.

04-04-2011, 09:59 AM	#8
kovidgoyal creator of calibre Posts: 43,843 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	If you're seeing a difference when the css is inline vs. in a separate file there are two likely candidates: 1) A parsing problem inline css is first parsed by an XML parser and then by a css parser 2) A cascading issue, the inheritance rules for css are slightly different in these cases.

Advert

Advert