View Single Post
Old 12-26-2012, 06:16 AM   #3
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 554
Karma: 2587520
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
well, now, don't I feel foolish!

Sigil makes my drop-cap invisible, also Calibre reader. There is just a blank square where it should show.

I just learned that ADE for desktop shows it.
I don't have my Sony reader with me, so can't check there, and I'm at work with no access to Sony Reader or any other pc reader apps.

So maybe it is a QT-webkit thing. I have got so used to Sigil always displaying valid formatting, so I don't know if this styling is on shaky ground.

The CSS for the image float is borrowed from your Tom Sawyer, the code for the drop-cap is pretty standard.

Code:
/* IMAGE FLOAT */
div.chapterhead img {
  width: 100%;
  max-width: 600px;
}
div.chapterhead div {
  text-align: left;
  margin: 0 3px 0 0;
}
div.chapterhead div.picture {
  width: 100%;
  max-width: 600px;
  height: 4em;
  margin: 0 0 -3em 0; 
  overflow: visible;
  text-indent: 0;
}
div.picture {text-indent: 0;}
div.chapterhead div.top,
div.chapterhead div.bottom {
  /* hide as much as possible */
  position: relative;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
div.chapterhead div.top {
  float: none;
  width: 100%;
  margin-bottom: -1em;
}
div.chapterhead div.bottom {
  float: left;
  clear: both;
}
div#pt1ch01 div.bottom {
	width: 16.66%; /*100*/
max-width: 100px;
}

/* DROP CAP*/

.capLetter{
font-family: serif;
font-style: normal;
font-weight: bold;
font-size: 450%;
height: .9em;
float: left;
margin: -.15em 0.15em -.2em 0em;
}
span.leadmid {
margin-left: -.65em;
}


/*THE HTML */


<h4 class="disp0" id="p1c1">1. Burzee</h4>

<div class="chapterhead" id="pt1ch01">
<div class="picture">
<p class="ind0"><img alt="CHAPTER FIRST. Burzee" src="../Images/pt1ch01-a.jpg" /></p>
</div>a

<div class="top"><img alt="" src="../Images/auxt-ch01.png" /></div>

<div class="bottom"><img alt="" src="../Images/auxb-ch01.png" /></div>

</div>


<p><span class="capLetter">H</span><span class="leadmid">A</span>VE you heard of the great Forest of Burzee? Nurse used to sing of it when I was a child.</p>
GrannyGrump is offline   Reply With Quote