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

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 03-20-2017, 12:05 PM   #1
chaot
Head of lunatic asylum
chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.
 
chaot's Avatar
 
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!?
Attached Files
File Type: epub Two Cols.epub (4.3 KB, 23 views)

Last edited by chaot; 03-20-2017 at 01:55 PM. Reason: add: to be
chaot is offline   Reply With Quote
Old 03-20-2017, 02:16 PM   #2
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,594
Karma: 11012356
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
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
DaleDe is offline   Reply With Quote
Old 03-21-2017, 09:39 AM   #3
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by chaot View Post


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">&nbsp;</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">&nbsp;</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:

Click image for larger version

Name:	Image1.png
Views:	24
Size:	98.8 KB
ID:	155765 Click image for larger version

Name:	Image2.png
Views:	37
Size:	196.1 KB
ID:	155768

Below you can check the respective epub so you can understand better the code.

Regards
Rubén
Attached Files
File Type: epub Two Cols Improved.epub (4.2 KB, 20 views)

Last edited by RbnJrg; 03-21-2017 at 09:54 AM.
RbnJrg is online now   Reply With Quote
Old 03-21-2017, 09:46 AM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 46,850
Karma: 35378405
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
But, there isn't a way to have the text flow from one column to the other if that's what you want.
JSWolf is online now   Reply With Quote
Old 03-21-2017, 09:57 AM   #5
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
But, there isn't a way to have the text flow from one column to the other if that's what you want.
In epub2, no (you can do it in epub3). The two colums layout is to use -like the example- with a book in two languages. Also as alternative to a table.
RbnJrg is online now   Reply With Quote
Advert
Old 03-21-2017, 10:05 AM   #6
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 46,850
Karma: 35378405
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Yes, an alternative to a table is a great use for this.
JSWolf is online now   Reply With Quote
Old 03-21-2017, 11:36 AM   #7
patrik
Addict
patrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of lightpatrik is a glorious beacon of light
 
Posts: 202
Karma: 12330
Join Date: Jan 2010
Device: Kobo Aura HD
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.
patrik is offline   Reply With Quote
Old 03-21-2017, 12:27 PM   #8
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by patrik View Post
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.)
You are welcome and glad that the code can be usefull for you too. Yes, the second column also can be floated to right, no problem with that.

Regards
Rubén
RbnJrg is online now   Reply With Quote
Old 03-21-2017, 12:31 PM   #9
chaot
Head of lunatic asylum
chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.
 
chaot's Avatar
 
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!?

Click image for larger version

Name:	Personenregister.png
Views:	47
Size:	229.2 KB
ID:	155769
Personenregister
chaot is offline   Reply With Quote
Old 03-21-2017, 01:03 PM   #10
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by chaot View Post
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!?

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;
}
2. In the .xhtml file:

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>
Here you can see how it looks in Sigil:

Click image for larger version

Name:	Image1.png
Views:	26
Size:	114.9 KB
ID:	155771

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).
RbnJrg is online now   Reply With Quote
Old 03-21-2017, 02:06 PM   #11
chaot
Head of lunatic asylum
chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.chaot will give the Devil his due.
 
chaot's Avatar
 
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).

chaot is offline   Reply With Quote
Old 03-21-2017, 02:38 PM   #12
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 46,850
Karma: 35378405
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Never use webkit columns. They don't work everywhere. So what you do is just cause more hassle when they don't work.
JSWolf is online now   Reply With Quote
Old 03-21-2017, 04:20 PM   #13
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
Never use webkit columns. They don't work everywhere.
I agree, they don't work everywhere. But if the OP plans to build his ebook for the Kindle plataform only, then that code will help him.
RbnJrg is online now   Reply With Quote
Old 03-21-2017, 05:56 PM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 46,850
Karma: 35378405
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by RbnJrg View Post
I agree, they don't work everywhere. But if the OP plans to build his ebook for the Kindle plataform only, then that code will help him.
But, if the OP is trying to build an eBook for sale, the two columns very well may not work with Mobi. Also, if someone who buys this eBook wanting to convert it to ePub will find it may not work will not buy any more of the OP's books.

So overall, it's a lose-lose situation.
JSWolf is online now   Reply With Quote
Old 03-21-2017, 06:42 PM   #15
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 767
Karma: 2641675
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
But, if the OP is trying to build an eBook for sale, the two columns very well may not work with Mobi.
That's right; the two columns won't work with .mobi. As I said before, only with .kf8

Quote:
Also, if someone who buys this eBook wanting to convert it to ePub will find it may not work will not buy any more of the OP's books.

So overall, it's a lose-lose situation.
Well, if someone buys an ebook for Kindle, I suppose that he want to read it on a Kindle If after that, the purchaser want to convert the .kf8 to .epub and the .epub doesn't work, it's not the fault of the author; he prepared the ebook for the Kindle plataform and the ebook was bought in Amazon.
RbnJrg is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 09:12 AM.


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