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-30-2013, 08:26 AM   #1
laksathish
Junior Member
laksathish began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Jul 2013
Device: Kindle Fire 8.4.3, iPad3
EPUB 3 multi column text reading order across pages for epub

Hi all

I am creating multi column epub3 free-layout. My multicolumn div running text across multiple pages, it works fine. My problem column reading order, the column 1 text flows across 4 pages then then second column starts in 1st page.

The wrong reading order i am getting now in IPad I-books

Page 1
text flow point 1 text flow point 7
text flow point 2 text flow point 7
text flow point 3 text flow point 8

Page 2
text flow point 3 text flow point 9
text flow point 4 text flow point 10
text flow point 5 text flow point 11

Page 3
text flow point 6 text flow point 12
text flow point 7 text flow point 13

Can anyone know how to fix this issue

Thanks in advance
laksathish is offline   Reply With Quote
Old 10-01-2013, 01:21 AM   #2
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 165
Karma: 321698
Join Date: Nov 2012
Device: default
What should it look like?
Can you post the html/css - it would be easier than trying to guess
the result your are trying to achieve.
DomesticExtremis is offline   Reply With Quote
Old 10-01-2013, 04:51 AM   #3
laksathish
Junior Member
laksathish began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Jul 2013
Device: Kindle Fire 8.4.3, iPad3
hi Thanks,

Please see the screenshot, where you can find the content sequence is flow into next page and not within the page.

Also attached CSS/html coding for reference.

THanks in advance.

SathishClick image for larger version

Name:	Photo.jpg
Views:	173
Size:	553.0 KB
ID:	112471

Click image for larger version

Name:	Photo_1.jpg
Views:	122
Size:	590.3 KB
ID:	112472

test_copy.epub
laksathish is offline   Reply With Quote
Old 10-01-2013, 09:07 AM   #4
RbnJrg
Evangelist
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: 485
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by laksathish View Post
hi Thanks,

Please see the screenshot, where you can find the content sequence is flow into next page and not within the page.

Also attached CSS/html coding for reference.

THanks in advance.

SathishAttachment 112471

Attachment 112472

Attachment 112473
EDIT: THE STEP 4 WAS MODIFIED; NOW IS CORRECT

Hi laksathish;

The problem with your design is that you don't have set a "height" for the page Since you use inline styles, do the following:

1. Open your test_copy.epub in Sigil
2. Select the text.xhtml page
3. Active the "code view" mode
4. Replace the tag

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
with

Code:
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 500px">
Also do the same with <body>, replace it with

Code:
<body style="height: 500px">
Finally, change the properties for the div.mcol selector to these ones:

Code:
div.mcol {
  height: 500px;
  -webkit-column-count: 2;
  -webkit-column-width: 45%;
  -webkit-column-gap: 10%;
}
Maybe instead of 500px you can use 520px or even more, I don't know exactly what is the number you must use since I don't have an iPad. But in Sigil looks fine

Try this code and tell us your results.

Regards
Rubén

EDIT: Also you can use the property "-webkit-column-break-after: avoid;" with "h" tags to maintain headers together with the text below.
Attached Thumbnails
Click image for larger version

Name:	MultiColum.jpg
Views:	89
Size:	105.7 KB
ID:	112494  
Attached Files
File Type: epub test_copy.epub (2.0 KB, 54 views)

Last edited by RbnJrg; 10-03-2013 at 12:41 PM.
RbnJrg is offline   Reply With Quote
Old 10-01-2013, 10:14 AM   #5
laksathish
Junior Member
laksathish began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Jul 2013
Device: Kindle Fire 8.4.3, iPad3
hi,

Thanks, actually it is working fine in any browser or sigil, but not displaying in iPad as showing in the browser view.

Could some one help me on this with your experience.

Thanks,
Sathish
laksathish is offline   Reply With Quote
Old 10-03-2013, 12:45 PM   #6
RbnJrg
Evangelist
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: 485
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by laksathish View Post
hi,

Thanks, actually it is working fine in any browser or sigil, but not displaying in iPad as showing in the browser view.

Could some one help me on this with your experience.

Thanks,
Sathish
Hi Sathish;

Please, try the new "test_copy.epub" I have uploaded in my previous post. I edited it and now is correct; maybe this time things can work (let's hope so )
RbnJrg is offline   Reply With Quote
Old 10-04-2013, 01:19 PM   #7
Syniurge
Enthusiast
Syniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a TexanSyniurge might easily be mistaken for a Texan
 
Posts: 47
Karma: 18498
Join Date: Jul 2009
Location: France
Device: PRS-650
Quote:
-webkit-column-count
That only works with Sigil, Calibre, Chrome and other Webkit-based apps.

For EPUB 3 the correct way is to use the CSS 3 properties column-count, column-width, etc.

Also you can use either column-count or column-width, the first one if you want a fixed number of columns no matter the size of the screen/window and the second one (without column-count) if you want the number to vary and fit the width of the screen, but its value should be in em or ex rather than %. The second one is better if you want your epub to remain readable on small readers

Last edited by Syniurge; 10-04-2013 at 01:22 PM.
Syniurge is offline   Reply With Quote
Old 10-04-2013, 03:07 PM   #8
RbnJrg
Evangelist
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: 485
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Syniurge View Post
That only works with Sigil, Calibre, Chrome and other Webkit-based apps.
He want the multi-column layout for iPad, a webkit based device.
RbnJrg is offline   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
Multi-Column Reading on Kindle DX? ppk812 Kindle Developer's Corner 5 01-11-2013 06:39 PM
Convert PDF to EPub or LRF puts pages out of order Timber Conversion 3 12-29-2011 07:57 AM
Multi-level TOC broken in epub->epub conversion siebert Conversion 14 03-09-2011 06:38 PM
Troubleshooting Reading PDFs with column text on Kindle DaAfroSheenQueen Amazon Kindle 3 12-10-2010 01:24 PM
New hack PRS-505: multi status line with %read, time&pages reading, pages per minute. Car105 Sony Reader Dev Corner 5 01-03-2010 11:03 AM


All times are GMT -4. The time now is 07:44 PM.


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