Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-02-2009, 08:50 AM   #1
darkpoet
ePub Headbanger
darkpoet doesn't litterdarkpoet doesn't litter
 
darkpoet's Avatar
 
Posts: 43
Karma: 166
Join Date: Aug 2009
Location: Korea
Device: Sony PRS-505
Columns

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:

Code:
<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 is offline   Reply With Quote
Old 09-02-2009, 09:15 AM   #2
darkpoet
ePub Headbanger
darkpoet doesn't litterdarkpoet doesn't litter
 
darkpoet's Avatar
 
Posts: 43
Karma: 166
Join Date: Aug 2009
Location: Korea
Device: Sony PRS-505
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...
Attached Thumbnails
Click image for larger version

Name:	CCsample.png
Views:	2174
Size:	207.9 KB
ID:	35303  
Attached Files
File Type: epub Columns Test.epub (18.4 KB, 346 views)
darkpoet is offline   Reply With Quote
 
Enthusiast
Old 09-02-2009, 09:28 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,166
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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:

Code:
<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:

Code:
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.
Jellby is offline   Reply With Quote
Old 09-02-2009, 11:28 AM   #4
HarryT
eBook Enthusiast
HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.HarryT ought to be getting tired of karma fortunes by now.
 
HarryT's Avatar
 
Posts: 63,621
Karma: 41565251
Join Date: Nov 2006
Location: UK
Device: PW2, iPad Retina Mini, iPhone 4, MS Surface Pro, Onyx T68, N7,
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.

Last edited by HarryT; 09-02-2009 at 11:32 AM.
HarryT is online now   Reply With Quote
Old 09-09-2009, 09:39 AM   #5
darkpoet
ePub Headbanger
darkpoet doesn't litterdarkpoet doesn't litter
 
darkpoet's Avatar
 
Posts: 43
Karma: 166
Join Date: Aug 2009
Location: Korea
Device: Sony PRS-505
Thumbs up

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:

Code:
<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:

Code:
.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.
Attached Thumbnails
Click image for larger version

Name:	ColumnsScreen.jpg
Views:	2162
Size:	148.6 KB
ID:	35669  
Attached Files
File Type: epub Columns Test.epub (18.4 KB, 228 views)
darkpoet is offline   Reply With Quote
Old 09-09-2009, 11:36 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,166
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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...
Jellby is offline   Reply With Quote
Old 09-09-2009, 05:06 PM   #7
pdurrant
The Grand Mouse
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 31,846
Karma: 88206086
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Quote:
Originally Posted by darkpoet View Post
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.
pdurrant is offline   Reply With Quote
Old 09-09-2009, 05:40 PM   #8
wallcraft
reader
wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.
 
wallcraft's Avatar
 
Posts: 6,979
Karma: 5183568
Join Date: Mar 2006
Location: Mississippi, USA
Device: Kindle 3 and Fire
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.
wallcraft is offline   Reply With Quote
Old 09-09-2009, 10:17 PM   #9
darkpoet
ePub Headbanger
darkpoet doesn't litterdarkpoet doesn't litter
 
darkpoet's Avatar
 
Posts: 43
Karma: 166
Join Date: Aug 2009
Location: Korea
Device: Sony PRS-505
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
darkpoet is offline   Reply With Quote
Reply

Tags
columns, epub, sony reader

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Two columns display in the viewer? again...? pollito pito Calibre 1 12-11-2010 11:29 PM
Custom Columns - the Future? Starson17 Calibre 2 07-13-2010 09:56 AM
Several Extremely Wide Columns SteveK Calibre 2 06-11-2010 11:14 PM
User Defined Columns jjansen Calibre 3 03-17-2010 05:33 PM
Additional Columns dvs0826 Calibre 3 08-22-2009 06:43 PM


All times are GMT -4. The time now is 06:25 AM.


MobileRead.com is a privately owned, operated and funded community.