View Single Post
Old 04-10-2014, 12:31 PM   #9
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,823
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Maybe you could use svg images as raised caps. You'll need to create svg images for each raised caps but are very simple to write them. For example:

1. In the .css stylesheet goes:

Code:
h1 {
   font-size: 1.4em;
   text-align: center;
   margin-bottom: 2em;
}

p {
   font-size: 1em;
   text-align: justify;
   text-indent: 0;
   margin: 0;
}

p + p {
   text-indent: 1.2em;
}
2. In the Images folder of Sigil you need to have something like:

Code:
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="70" height="90">
    <defs>
       <style type="text/css">
         <![CDATA[
           @font-face {
              font-family: "Marnie";
              src: url("../Fonts/Marnie.ttf");
           }
         ]]>
       </style>
    </defs>
    <text x="0" y="90" style="font-size: 90px" font-family="Marnie">
       L
    </text>
</svg>
I saved the image above as "L.svg". All yours svg images will be the same except that you'll have to change the letter "L" for the letter you want.

3. In your .xhtml file you should have something like:

Code:
  <h1>This is the title</h1>

  <p><img alt="L" src="../Images/L.svg" />orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>
This works for .kf8 and also for ADE

Click image for larger version

Name:	Image1.png
Views:	429
Size:	107.4 KB
ID:	121508 Click image for larger version

Name:	Image2.png
Views:	465
Size:	85.5 KB
ID:	121509

However you can get a raised cap in ADE without need a svg image

Finally, a drawback I used as font-size in the svg images "pixel" as unit. That avoids that the raised cap changes its size when you change the device font-size. To achieve that, we would need to set the font-size in the svg images in "em" unit. In theory, svg supports "em" but I never could get that svg accepts "em" So, that is all we have.

Below you can check the respective epub.

Regards
Rubén

EDIT: I forgot to tell you that in Sigil you won't see the custom font in the svg images; that is a bug of Sigil (and some web browser like Firefox). However it will be displayed properly in Kindle.

EDIT II: By remembering a trick that I use with my svg fleurons, I could get that the "svg image raised-cap" changes its size when you change the device font-size. To do this, add the following class to your stylesheet:

Code:
.raised_cap {
   display: inline;
   width: auto;
   height: 4em;
}
and in the .xhtml file use:

Code:
  <h1>This is the title</h1>

  <p><img class="raised_cap" alt="L" src="../Images/L.svg" />orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>
Now you have what you want I made the respective changes in the epub attached to this post.
Attached Files
File Type: epub Raised Cap I.epub (35.0 KB, 300 views)

Last edited by RbnJrg; 04-10-2014 at 01:15 PM.
RbnJrg is offline   Reply With Quote