Columns

[darkpoet]

Anybody know how to do columns in EPUB?

So I'm handmaking an epub book that uses a lot of "parallel passages" - ie. quoting one work on the left with notes on the right... something that looks very ugly if done in a linear way...

I've tried two methods on my PRS-505 and both roughly got the same result.

Table Method:

<table rules="cols" width="100%">
<tr><td>
 <p class="text">
        <i>Gautama's Words.</i>
      </p>
      <p class="text">
        Beloved, popular, respected among his fellows, victorious over
        discontent * and lust; over spiritual danger and dismay;
        will bestow upon him the ecstasy of contemplation; † will
        enable him to reach with his body, and remain in, those stages of
        deliverance which are incorporeal and pass beyond phenomena;
      </p>
</td><td>
<p class="notes">
        <i>Parallel Passages.</i>
      </p>
      <p class="footnote">
        * "Were mankind murderous or jealous upon you my brother, my
        sister? I am sorry for you, they are not murderous or jealous upon me,
        all has been gentle with me, I keep no account with lamentation (what
        have I to do with lamentation?)" [193: 71]. "The holy breath kills
        lust, passion and hate" [M. C. L. infra].
      </p>
      <p class="footnote">
        † "Yet O my soul supreme! Knowest thou the joys of pensive
        thought? Joys of the free and lonesome heart, the tender, gloomy
        heart?" [193: 147].
      </p>
</td></tr>
</table>

This is the easiest method to code into XHTML... since the class values aren't lost within the table... but the passage runs beyond the bottom margin of my 505... and doesn't re-appear after turning the page...

Apparently using table is frowned upon by the CSS gurus, so I tried using DIVs, giving the left column a "float:left" class... but it also breaks after turning the page.

As a sidenote, by the looks of it, I would rather figure out the table method, as it also automatically balances the columns, while the CSS method requires me to specify a width for the floating column...

[darkpoet]

I've pared down the original a bunch to show what's going on... jump to page 3 and on page 4 you can compare to it's linear counterpart. If anybody cares, it's Bucke's Cosmic Consciousness... a public domain book.

I also include a screenshot from the PDF of the page in question...

Anybody who has an advice... please...

[Jellby]

This is one of the things XHTML+CSS cannot easily do (yet). For the record, LaTeX has a hard time here too, it's far from trivial to do it in a robust way.

I would probably try something like:

<div class="block">

<div class="text">
<p>Beloved, popular, respected among his fellows, victorious over
discontent * and lust; over spiritual danger and dismay;
will bestow upon him the ecstasy of contemplation; † will
enable him to reach with his body, and remain in, those stages of
deliverance which are incorporeal and pass beyond phenomena;</p>
</div>

<div class="notes">
<p>* "Were mankind murderous or jealous upon you my brother, my
sister? I am sorry for you, they are not murderous or jealous upon me,
all has been gentle with me, I keep no account with lamentation (what
have I to do with lamentation?)" [193: 71]. "The holy breath kills
lust, passion and hate" [M. C. L. infra].</p>

<p>† "Yet O my soul supreme! Knowest thou the joys of pensive
thought? Joys of the free and lonesome heart, the tender, gloomy
heart?" [193: 147].</p>
</div>

</div>

with:

div.block {
  display: table-row;
}
div.text, div.notes {
  display: table-cell;
  width: 50%;
}

That would let you "easily" change the format from tabular to something else. Note, too, that <p></p> elements cannot have other block elements inside in XHTML.

[HarryT]

It's a shame. It's really, really useful layout for things like plays. It's something that, at the present time, PDF is probably the best answer for.

[darkpoet]

Whooboy, I've wasted dozens of hours on this peculiar puzzle and I finally have an answer. Most of my problem lay with the rendering of tables, columns, whatever... I tried a billion solutions, starting with Jellby's and evolving, simplifying, and more... all with similar results. A column that was too long could not be mixed with a floating column that was also too long. One of them would cut.

I reconsidered the intention of the text. Footnotes are often treated as afterthoughts when really they should be considered as another form of embedding.

So, I interspersed the footnote text into the text itself, using SPAN (similar as DIV but is allowed with a P... as so:

<p class="text">
<i>Gautama's Words.</i>
<span class="notes"><i>Parallel Passages</i></span></p>

<p class="text"><br />

<span class="notes">* "Were mankind murderous or jealous upon you my
brother, my sister? I am sorry for you, they are not murderous or jealous 
upon me, all has been gentle with me, I keep no account with lamentation 
(what have I to do with lamentation?)" [193: 71]. "The holy breath kills lust, 
passion and hate" [M. C. L. infra].</span>

Beloved, popular, respected among his fellows, victorious over discontent * 
and lust; over spiritual danger and dismay; will bestow upon him the ecstasy 
of contemplation; †

<span class="notes">† "Yet O my soul supreme! Knowest thou the joys of 
pensive thought? Joys of the free and lonesome heart, the tender, gloomy 
heart?" [193: 147].</span>

will enable him to reach with his body, and remain in, those stages of 
deliverance which are incorporeal and pass beyond phenomena;

</p><br class="clear" />

In most of it, the footnote SPAN directly follows the original footnote symbol, excepting the first due to the quirk of the floating span.

The important bits of the CSS:

.text
	{
	width: 95%;
	font-size: 0.90em;
	margin-left: 2.5%;
	margin-right: 2.5%;
	margin-top: 0.75em;
	margin-bottom: 0;
	text-indent: 1.5em;
	text-align: justify;
	}

.notes {
	width: 55%;
	float: right; 
	font-size: 0.85em;
	margin-left: 2%;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	text-indent: 1.5em;
	text-align: justify;
}
.clear { clear: both; }

The most important bit of the CSS is that the width of the notes had to be more than half of the margins, even due to the cumulative effect of the font-size (the .text class is set to 0.90em so .notes class is set to 85% of that 90%)...

The effect is a lot like the original book... Since some areas do not have parallel text/footnotes, the text is free to expand to the right margin. Compare:





I just don't know if I have the patience to do this through the whole book. There are hundreds of sections like this and doing this feels like mutilating the text and profaning the point of using XML.

[Jellby]

It does look (unexpectedly) good

I guess, if I get it right, you could have a narrower width for the notes if you add "clear: right" to their style.

One wishes there was a way to have some vertical space between text and footnotes, but not between notes and notes (and the + CSS selector is no use, because the notes are not defined consecutively). By the way, no need to define the "width: 95%" for the text, you have the margins, the width is the rest.

As for "profanating XML", I don't see a problem, you enclose the footnotes in tags and place them (in the source) where they belong with respect to the main text...

[pdurrant]

Originally Posted by darkpoet

So, I interspersed the footnote text into the text itself, using SPAN

I've just played with this a bit myself. I'm very impressed with what you came up with.

I tried to find some way to restrict the main text to a left column, but failed miserably. I also failed to find any way to give space before & after runs of notes without giving space between notes..

I would suggest that changing the text-indent for the notes to -1em would give a better effect, leaving the note characters to the left of the text.

[wallcraft]

Have you considered adding a different colour for the notes, which would make the main text easier to distinguish on a colour display? Some neutral colour like green perhaps. Or you could go with a 75% grey (or a colour that maps to 75% grey) for the notes which would work even on an EInk display.

[darkpoet]

I tried adding some top/bottom indent/buffer but it simply added too much space when the notes ran together... As I said, the margins could - nay, should - be altered depending on the number of footnotes. For Shakespearean vocabulary notes, perhaps only 15% would be needed...

And indeed, a -1em indent and a 2.5em margin looked fantastic when I tried it. I kept my current formatting to maintain the feel of the old book. Anyway, if I change my mind, it's a tiny edit to the stylesheet.

Changing the color of the notes for display is great idea... perhaps a Dark Green? I was considering adding a MEDIUM tag to the stylesheet to alter this for display anyway but swapping the color is easier and possibly more effective...

These suggestions are exactly why I posted my results... I just hope my almost 20 hours of experimentation and frustration will help someone else out