Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Conversion

Notices

Reply
 
Thread Tools Search this Thread
Old 04-03-2011, 10:19 PM   #1
kiwidude
calibre/Sigil Developer
kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.
 
Posts: 4,224
Karma: 1334002
Join Date: Oct 2010
Location: London, UK
Device: Kindle Paperwhite 3G, iPad 3, iPad Air
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.
kiwidude is offline   Reply With Quote
Old 04-03-2011, 11:27 PM   #2
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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?
ldolse is offline   Reply With Quote
Old 04-03-2011, 11:31 PM   #3
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,630
Karma: 5628865
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by kiwidude View Post
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?
theducks is offline   Reply With Quote
Old 04-04-2011, 04:03 AM   #4
kiwidude
calibre/Sigil Developer
kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.
 
Posts: 4,224
Karma: 1334002
Join Date: Oct 2010
Location: London, UK
Device: Kindle Paperwhite 3G, iPad 3, iPad Air
@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:

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 {
    color: inherit;
    cursor: inherit;
    text-decoration: inherit
    }
.calibre11 {
    font-style: italic
    }
.calibre2 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.67em;
    text-align: center
    }
.calibre3 {
    display: block;
    font-size: 1.375em;
    font-weight: bold;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.83em;
    text-align: center
    }
.calibre4 {
    display: block;
    font-weight: bold;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.33em
    }
.calibre5 {
    border: 1px inset;
    color: gray;
    display: block;
    height: 2px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em
    }
.calibre6 {
    display: block;
    font-size: 0.875em;
    font-weight: bold;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.67em
    }
.calibre7 {
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.calibre8 {
    height: 31px;
    width: 88px
    }
.calibre9 {
    display: block;
    font-size: 1.125em;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.center {
    display: block
    }
.center1 {
    display: block;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em
    }


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
    }
kiwidude is offline   Reply With Quote
Old 04-04-2011, 04:11 AM   #5
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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.
ldolse is offline   Reply With Quote
Old 04-04-2011, 04:38 AM   #6
kiwidude
calibre/Sigil Developer
kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.kiwidude ought to be getting tired of karma fortunes by now.
 
Posts: 4,224
Karma: 1334002
Join Date: Oct 2010
Location: London, UK
Device: Kindle Paperwhite 3G, iPad 3, iPad Air
Quote:
Originally Posted by ldolse View Post
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.
kiwidude is offline   Reply With Quote
Old 04-04-2011, 05:46 AM   #7
ldolse
Wizard
ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.ldolse is an accomplished Snipe hunter.
 
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.
ldolse is offline   Reply With Quote
Old 04-04-2011, 09:59 AM   #8
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,924
Karma: 5035037
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.
kovidgoyal is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
epub code snippets (html / css) zelda_pinwheel ePub 179 10-05-2012 06:37 PM
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


All times are GMT -4. The time now is 12:00 AM.


MobileRead.com is a privately owned, operated and funded community.