View Single Post
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,601
Karma: 2092290
Join Date: Oct 2010
Location: Australia
Device: Kindle Oasis
@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