MobileRead Forums - View Single Post - EPUB 3 multi column text reading order across pages for 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.