EPUB 3 multi column text reading order across pages for epub

laksathish · 09-30-2013, 07:26 AM

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

DomesticExtremis · 10-01-2013, 12:21 AM

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.

laksathish · 10-01-2013, 03:51 AM

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.

Sathish

Click image for larger version

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

Click image for larger version

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

test_copy.epub

RbnJrg · 10-01-2013, 08:07 AM

Quote:

Originally Posted by laksathish

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.

laksathish · 10-01-2013, 09:14 AM

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

RbnJrg · 10-03-2013, 11:45 AM

Quote:

Originally Posted by laksathish

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

)

Syniurge · 10-04-2013, 12:19 PM

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

RbnJrg · 10-04-2013, 02:07 PM

Quote:

Originally Posted by Syniurge

That only works with Sigil, Calibre, Chrome and other Webkit-based apps.

He want the multi-column layout for iPad, a webkit based device.

Katja_hbg · 11-24-2016, 03:43 PM

I face same issue i.e. columns are continue on next page instead of break. Also the "test_copy.epub" show same result as in the screen from Satish but to be honest I am using Kobo Aura One.

At the end I like to see two columns vertical page by page.
Currently the columns either flow to next page or too many columns side by side which leads into loosing text.

I have no clue about CSS. But after reading a lot in this forum I put additional CSS information in Calibre as follows:
p,div,span,body{margin: 0;}
p,div,span,body{-epub-writing-mode: vertical-rl;}
body{height: 1400px; width: 1000px; -webkit-column-count: 2; -webkit-column-width: 45%;-webkit-column-gap: 10%;}

- vertical without columns is perfect
- columns with or without vertical are not proper

fbrzvnrnd · 11-25-2016, 03:22 AM

I made some test, some times ago, and I see the e-reader APP support for columns in multiple pages and reflow is bad, bad, bad.

RbnJrg · 11-25-2016, 05:27 AM

Quote:

Originally Posted by Katja_hbg

I face same issue i.e. columns are continue on next page instead of break. Also the "test_copy.epub" show same result as in the screen from Satish but to be honest I am using Kobo Aura One.

At the end I like to see two columns vertical page by page.
Currently the columns either flow to next page or too many columns side by side which leads into loosing text.

I have no clue about CSS. But after reading a lot in this forum I put additional CSS information in Calibre as follows:
p,div,span,body{margin: 0;}
p,div,span,body{-epub-writing-mode: vertical-rl;}
body{height: 1400px; width: 1000px; -webkit-column-count: 2; -webkit-column-width: 45%;-webkit-column-gap: 10%;}

- vertical without columns is perfect
- columns with or without vertical are not proper

The issue of the OP was with an epub3 and you, in Kobo, are working with an epub2 ebook, so "-webkit-column-count" won't work. Try using .kepub instead of .epub.

davidfor · 11-25-2016, 07:02 AM

Quote:

Originally Posted by RbnJrg

The issue of the OP was with an epub3 and you, in Kobo, are working with an epub2 ebook, so "-webkit-column-count" won't work. Try using .kepub instead of .epub.

The extension should be ".kepub.epub".

Katja_hbg · 11-25-2016, 12:18 PM

Sorry to miss to mention that.
On calibre I use additionl css and convert to epub. But while sending they are changed i.e. on my kobo are kepub.epub.

AlanNL · 11-13-2018, 05:18 AM

How can this be made functional on the kobo glo?

09-30-2013, 07:26 AM	#1
laksathish Junior Member 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

10-01-2013, 03:51 AM	#3
laksathish Junior Member 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. Sathish test_copy.epub

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Multi-Column Reading on Kindle DX?	ppk812	Kindle Developer's Corner	5	01-11-2013 05:39 PM
Convert PDF to EPub or LRF puts pages out of order	Timber	Conversion	3	12-29-2011 06:57 AM
Multi-level TOC broken in epub->epub conversion	siebert	Conversion	14	03-09-2011 05:38 PM
Troubleshooting Reading PDFs with column text on Kindle	DaAfroSheenQueen	Amazon Kindle	3	12-10-2010 12: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 10:03 AM

10-01-2013, 12:21 AM	#2
DomesticExtremis Addict Posts: 243 Karma: 359054 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.

10-01-2013, 09:14 AM	#5
laksathish Junior Member 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

11-24-2016, 03:43 PM	#9
Katja_hbg Groupie Posts: 167 Karma: 158116 Join Date: Oct 2015 Device: Kobo Glo HD (landscape), Kobo Aura One	I face same issue i.e. columns are continue on next page instead of break. Also the "test_copy.epub" show same result as in the screen from Satish but to be honest I am using Kobo Aura One. At the end I like to see two columns vertical page by page. Currently the columns either flow to next page or too many columns side by side which leads into loosing text. I have no clue about CSS. But after reading a lot in this forum I put additional CSS information in Calibre as follows: p,div,span,body{margin: 0;} p,div,span,body{-epub-writing-mode: vertical-rl;} body{height: 1400px; width: 1000px; -webkit-column-count: 2; -webkit-column-width: 45%;-webkit-column-gap: 10%;} - vertical without columns is perfect - columns with or without vertical are not proper

11-25-2016, 03:22 AM	#10
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	I made some test, some times ago, and I see the e-reader APP support for columns in multiple pages and reflow is bad, bad, bad.

11-25-2016, 12:18 PM	#13
Katja_hbg Groupie Posts: 167 Karma: 158116 Join Date: Oct 2015 Device: Kobo Glo HD (landscape), Kobo Aura One	Sorry to miss to mention that. On calibre I use additionl css and convert to epub. But while sending they are changed i.e. on my kobo are kepub.epub.

11-13-2018, 05:18 AM	#14
AlanNL Junior Member Posts: 4 Karma: 10 Join Date: Feb 2016 Device: Kobo glo hd	How can this be made functional on the kobo glo?

Advert

Advert