Fixed spacing in HTML/CSS without tables

[mmat1]

Originally Posted by democrite

Anyway, Digital Editions (and thus readers) don't like any of this very much so maybe I do have to restort to a table.

I'm sorry, but i made a mistake with my suggestion.

It should read:
.label { margin-left: -3em; float: left }
This should work with multiline.

Concerning your right aligned numbers to the right:
.lineno { float: right; text-align: right; }

[democrite]

Thanks mmat1. ADE likes that much better. Though the page numbers still don't work too well. Not as much of a big deal. It's possible having them in a separate floating paragraph might work but I haven't tried that yet.

[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?

[DaleDe]

Does ADE always start a new page, or only when the next table will not fit on the current page? If the latter then simply make smaller tables.

what does you code look like for the first solution?

Dale

[mmat1]

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?

You might try Pynch's method used in Joyce, Finnigans Wake Chapter 3

[RbnJrg]

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:

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:

<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

[Jellby]

Originally Posted by doubleshuffle

- 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.

Isn't that fixed by setting a width for the float? I think that's basically what Rubén's solution boils down to.

[doubleshuffle]

Wow, thanks guys for all the suggestions. I'll fiddle on a bit and report the results.

And I DID set a width for the float, Jellby; fully expected it to work, but it didn't. I only floated the sidenotes, though, not the body of the poem.

[Jellby]

Originally Posted by doubleshuffle

And I DID set a width for the float, Jellby; fully expected it to work, but it didn't. I only floated the sidenotes, though, not the body of the poem.

Did you set them as <div>s or as <span>s? If I remember correctly, inline elements (<span>s by default) don't take a width.

[doubleshuffle]

Originally Posted by Jellby

Did you set them as <div>s or as <span>s?

Tried both. Neither worked. Ruben's solution seems to work nicely. I'll test the other suggestions (Dale's shorter - which would mean single stanza - tables, and whatever Pynch did in Finnegans Wake) an report back; not tonight though...

[pynch]

The thing that did the trick for the Wake chapter is easy to miss in the css: I gave the body a left margin, and then set the left margin of the floating span to the negative value of that.