Quote:
Originally Posted by chaot
Some time ago @jbacelar gave me the link to an quite short book (edited by Rubén Jorge). At the time I hadn't had a further look on it.
What makes it special isn't the content itself, it is the HTML/CSS. So the title is perfectly chosen: Two Cols.
Today I would like to use this code for an annex with an extensive personal register.
The heading ''[Somebody ...] in Wonderland'' seems me to be program, as I am wondering - now: It doesn't function, at least not on my ereader.
It shows only two pages, the titlepage and a second one with two perfect columns (itself titled), but only the beginnings of these, never complete. By scaling the font-size of the ereader down I can read more, but never the whole, the end of the story.
I have, of course, to assume that Ruben, and others, have had tested the HTML/CSS on functionality.
Why it doesn't function with me!? |
Hi Chaot;
One of the posts where I wrote the solution you mention was this:
https://www.mobileread.com/forums/sh...21&postcount=5
If you read it carefully, you'll see that there I say that the code is for Kindle (with .kf8 support) and Ipad
So, for that reason it doesn't work for you in ADE.
However, and after reading the PM you sent me, I have just modified the original code so the two columns layout also can work under ADE. The code is the following:
1. In your .css stylesheet wrote the following:
Code:
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;
}
2. In your .xhtml file the text should be of the following way:
Code:
<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>
Here you can watch how it looks in ADE:
Below you can check the respective epub so you can understand better the code.
Regards
Rubén