Hello, everyone. I'm hoping someone here can help me with this.
I have a book with chapters that start with illuminated letters and a paragraph of hand-drawn text that has been scanned in as a complete illustration.
For each letter, there's a "tail" that extends below the hand-drawn text for several lines into the set text.
In the print edition, the set text begins below the paragraph of hand-drawn text and wraps around this tail in a sort of sideways "L" shape.
Using the code below, I've got this working in iBooks and for KF8 (using Kindle Previewer), regardless of text size.
On Kindle Reader for Mac, however, you can change the width of the screen and the number of words per line. This means:
1. When you increase the number of words per line past a certain amount, the text begins to move up over the image of the capital. At its widest, it nearly reaches the top of the page.
2. Similarly, the vertical position of the text relative to the "tail" changes.
Is there any way to set this up so that it works in Kindle Reader for Mac/PC and for mobile devices?
Thanks in advance! This forum is the greatest!
I have a book with chapters that start with illuminated letters and a paragraph of hand-drawn text that has been scanned in as a complete illustration.
For each letter, there's a "tail" that extends below the hand-drawn text for several lines into the set text.
In the print edition, the set text begins below the paragraph of hand-drawn text and wraps around this tail in a sort of sideways "L" shape.
Using the code below, I've got this working in iBooks and for KF8 (using Kindle Previewer), regardless of text size.
On Kindle Reader for Mac, however, you can change the width of the screen and the number of words per line. This means:
1. When you increase the number of words per line past a certain amount, the text begins to move up over the image of the capital. At its widest, it nearly reaches the top of the page.
2. Similarly, the vertical position of the text relative to the "tail" changes.
Is there any way to set this up so that it works in Kindle Reader for Mac/PC and for mobile devices?
Thanks in advance! This forum is the greatest!
Code:
...
<style type="text/css" media="not amzn-mobi">
div.capital {
float:left;
margin-bottom:-45%;
margin-right: 100%;
margin-left: 5%;
max-width: 100%;
}
span.spacer {
float: left;
max-width: 100%;
height: 0em;
margin-right: 20%;
margin-bottom: 33%;
}
</style>
...
<body id="Dilemma" xml:lang="en-US">
<div style="page-break-inside:avoid;">
<div class="capital">
<img style="max-width:100%;height:100%;" src="image/Sideways-L_fmt.png" alt="Sideways L" />
</div>
<p class="p">
<span class="spacer">
<img src="image/spacer.gif" alt="spacer" />
</span>
Lorem ipsum ...</p>
</div>
<div>
<p class="p">Lorem ipsum ...</p>