Column
This article talks about the use of multiple columns in an eBook. It is targeted at ePub and KF8 file formats. It is based on a solution posted in the MobileRead forum
Contents |
[edit] Overview
There are times when a document needs to be two or more columns wide. An example is where a comparison between two languages is desired. They can be placed side by side. One way to do this is with a table that has two columns but this is fraught with problems when the table exceeds the length of the page. The article on tables has more on this use. The second method is presented on this page. It depends on the ability to float information left or right in a page. The float CSS property is often used to allow text to wrap around an image in document but can also be used to allow text to wrap around other text and multiple floats can be stacked left to right in a document.
[edit] Example
[edit] CSS
This is an example of CSS:
h1 { clear: both; font-size: 1.4em; margin: 0; padding: 1em 0 2em; text-align: center; } h2 { font-size: 1.2em; margin: 0; padding: 1em 0 2em; text-align: center; } p { font-size: 1em; text-align: justify; margin-bottom: 0em; } .col1 { float: left; width: 50%; } .col2 { float: left; width: 50%; } div.col1 p { margin: 0; margin-right: 0.75em; } div.col2 p { margin: 0; margin-left: 0.75em; } .clear { line-height: 0.5em; clear: both; margin: 0; padding: 0; }
[edit] XHTML
The eBook xhtml file would look like:
<body> <h1>Alice's Adventures in Wonderland<br/> Alicia en el País de las Maravillas</h1> <div class="col1"> <h2>CHAPTER I<br/> Down the Rabbit-Hole</h2> </div> <div class="col2"> <h2>CAPÍTULO I<br/> En la Madriguera del Conejo</h2> </div> <p class="clear"> </p> <div class="col1"> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p> </div> <div class="col2"> <p>Alicia empezaba ya a cansarse de estar sentada con su hermana a la orilla del río, sin tener nada que hacer: había echado un par de ojeadas al libro que su hermana estaba leyendo, pero no tenía dibujos ni diálogos. «¿Y de qué sirve un libro sin dibujos ni diálogos?», se preguntaba Alicia.</p> </div> <p class="clear"> </p> <div class="col1"> <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> </div> <div class="col2"> <p>Así pues, estaba pensando (y pensar le costaba cierto esfuerzo, porque el calor del día la había dejado soñolienta y atontada) si el placer de tejer una guirnalda de margaritas la compensaría del trabajo de levantarse y coger las margaritas, cuando de pronto saltó cerca de ella un Conejo Blanco de ojos rosados.</p> </div> ... ... </body> </html>
[edit] Limitations
This solution makes use of the float property and may behave differently is some readers. Making col2 float right instead of left may work better in some cases. Note this will work in ADE and will work in KF8 but not in pure MOBI.
This solution is for pure parallel data. It does not work when trying to flow the data from one column to another. There are ePub 3 solutions for flowing but not for ePub 2. Often the reader itself will support 2 column mode particularly in landscape more.
[edit] Other Column methods
The articles below also provide methods of doing columns:
[edit] For more information
Thanks to RbnJrg for this solution. see MobileRead forum for comments and for a download of a working ePub.
