Quote:
Originally Posted by doubleshuffle
OK, I'm probably insane, but I'd still like to know if there is any reasonable to way to get something like this (see attached pic) in epub. It's Coleridge's Rime of the Ancient Mariner, and it has got all those little sidenotes on the left that explain what's going on for those who can't be bothered to read the poem proper. Anyway, it looks very neat on the printed page.
The problem with coding it in epub is the varying length of those sidenotes. Some of them run for longer than a stanza, others are shorter.
In the earlier posts in this thread I have found two basic patterns for coding something like this, let's call them the float- and the table-approach. I've tried both, and have run into different kinds of problems with both:
- using the float-approach, it is impossible to get a regular straight left edge of the poem proper; lines will start too far to the left when the left-floating span is short, or too far to the right when it is long and gets close to the next one. I fiddled with inserted line breaks to adjust the length of the span, but the effect of course breaks down immediately if you change the font-size.
- the table approach (or the "fake table" Jellby suggested in post #5) works beautifully regarding the edges, but I have to start a new table with each new sidenote (or in the end for each stanza probably), and ADE starts a new page after each one, which of course I don't want. So it would solve all my problems if there was a way to tell ADE not to do that.
I know there are some real experts here - can it be done?
|
I think a two columns layout could solve your issues. And it works in ADE (except ADE 2.0), iPad and with the modern Kindle devices (those who support the .kf8 format, since you can't use this technique with K1 and K2).
In your .css stylesheet write the following:
Code:
h1 {
clear: both;
font-size: 1.4em;
font-family: sans-serif;
margin: 0;
padding: 1em 0;
text-align: center;
}
p {
font-size: 1em;
text-align: left;
font-family: serif;
margin: 0;
padding-bottom: 1em;
}
.col1 {
clear: both;
float: left;
width: 20%; /* of course, you can change the width here */
}
.col2 {
float: left;
width: 80%; /* of course, you can change the width here */
}
div.col1 p {
margin-left:0;
margin-right: 0.75em;
font-size: 0.8em;
font-style: italic;
}
div.col2 p {
margin-left: 0.75em;
margin-right: 0;
}
And in your .html file write something like:
Code:
<body>
<h1>PART THE FIRST</h1>
<div class="col1">
<p>This is the first side note, in this case a short one.</p>
</div>
<div class="col2">
<p>It is an ancient Mariner,<br />
And he stoppeth one of three.<br />
“By thy long grey beard and glittering eye,<br />
Now wherefore stopp'st thou me?</p>
<p>“The Bridegroom's doors are opened wide,<br />
And I am next of kin;<br />
The guests are met, the feast is set:<br />
May'st hear the merry din.”</p>
</div>
<div class="col1">
<p>This is the second side note; this is a larger side note than the first one and in this case also larger than one stanza.</p>
</div>
<div class="col2">
<p>He holds him with his skinny hand,<br />
“There was a ship,” quoth he.<br />
“Hold off! unhand me, grey-beard loon!”<br />
Eftsoons his hand dropt he.</p>
<p>He holds him with his glittering eye—<br />
The Wedding-Guest stood still,<br />
And listens like a three years child:<br />
The Mariner hath his will.</p>
</div>
</body>
This is how it looks in Sigil:
And this is how the epub looks in ADE:
You must enclose your side notes in a <div class="col1"> tag and your stanzas in a <div class="col2">. That's all. Below you can see the respective .epub and you'll be able to understand better what I want to say
Regards
Rubén