03-20-2017, 12:05 PM | #1 |
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
HTML/CSS for two columns 'seems' not to function
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!? Last edited by chaot; 03-20-2017 at 01:55 PM. Reason: add: to be |
03-20-2017, 02:16 PM | #2 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
This is typical for a table in many readers. It the table is too long to fit on a page then the rest of the content is lost. The iPad included iBooks has a feature where you can click on the page and then you can scroll the whole thing like a browser. Some other ePub 3 readers support similar results. One thing you can do is to provide a false separator as an invisible line to allow the document to page to the rest of the table. In this case I would place separators between each paragraph to keep things aligned. read table in our wiki.
Dale |
Advert | |
|
03-21-2017, 09:39 AM | #3 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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; } 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> Below you can check the respective epub so you can understand better the code. Regards Rubén Last edited by RbnJrg; 03-21-2017 at 09:54 AM. |
|
03-21-2017, 09:46 AM | #4 |
Resident Curmudgeon
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
But, there isn't a way to have the text flow from one column to the other if that's what you want.
|
03-21-2017, 09:57 AM | #5 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
Advert | |
|
03-21-2017, 10:05 AM | #6 |
Resident Curmudgeon
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Yes, an alternative to a table is a great use for this.
|
03-21-2017, 11:36 AM | #7 |
Guru
Posts: 647
Karma: 4566069
Join Date: Jan 2010
Location: Sweden
Device: Kobo Forma
|
I just want to say that I learn so much from these snippets (even if the topic itself wasn't a problem for me at this time). Thanks Rubén and everyone else for contributing!
BTW, could you do a "float: right;" for col2? (I didn't see any difference when I just tested.) Last edited by patrik; 03-21-2017 at 11:42 AM. |
03-21-2017, 12:27 PM | #8 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Regards Rubén |
|
03-21-2017, 12:31 PM | #9 |
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
It’s just one of those things!
I need it for an extensive ''personal register''. As you see down left (Ascher, Leo) it continues top right (Asch, Schalom) - 14 pages all together. Any idea to do the job the best possible way!? Personenregister |
03-21-2017, 01:03 PM | #10 | |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
I'm afraid you want the text flows from one column to the other. Sorry, you can't get that with ADE under epub2, only ADE under epub3. However, if you plan to build your ebook for Kindle (Kindle with support for .kf8) you could get the layout with the text flowing from one column to another. The code for that would be: 1. In the .css stylesheet: Code:
#container { -webkit-column-count: 2; -webkit-column-rule-width : 1px; -webkit-column-rule-style : solid; -webkit-column-rule-color : black; } h1 { -webkit-column-break-inside: avoid; } p { margin: 0; padding: 0; text-align: justify; } Code:
<body> <div id="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p> </div> </body> Of course, the line in middle of both columns can be elimined and the space between columns can be adjusted. But as I said before, this is only for Kindle (.kf8 Kindles); with ADE you need to work under epub3 (and the code would be a bit different). |
|
03-21-2017, 02:06 PM | #11 |
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
Since I don't know at the moment how I will best fix it, for sure I will take your code to the stylesheet, wrapped in smart comment tags (for any time coming).
|
03-21-2017, 02:38 PM | #12 |
Resident Curmudgeon
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Never use webkit columns. They don't work everywhere. So what you do is just cause more hassle when they don't work.
|
03-21-2017, 04:20 PM | #13 |
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
03-21-2017, 05:56 PM | #14 | |
Resident Curmudgeon
Posts: 73,645
Karma: 127837858
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
So overall, it's a lose-lose situation. |
|
03-21-2017, 06:42 PM | #15 | ||
Wizard
Posts: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
|
||
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
i cant see html or css | AnisioLemos | Sigil | 12 | 12-15-2016 07:12 PM |
HTML and CSS for Dummies | Sablerose | Workshop | 21 | 01-21-2014 03:48 AM |
Nesting Function arguments in custom columns | da_jane | Calibre | 1 | 11-21-2012 02:48 PM |
CSS/HTML question | ElMiko | Sigil | 54 | 10-23-2012 12:39 PM |
HTML and CSS for Dummies | weedfreak | Sigil | 17 | 01-07-2010 09:34 PM |