Scrollable Frame solution for EPUB Fixed Layout
Hi,
I have found a solution (or, rather a hack) which allows us to create scrolling frames for EPUB Fixed Layouts.
You can find the exported EPUB, as well as my InDesign file on my Dropbox: EPUB scroll.
This solution has some weak points and has only been tested in iBooks on an iPad with iOS 8, but here's how it works:
- Create two text frames (one as big as your text requires, and one which will be the container [tip: make the container a bit wider than the text frame])
- Cut the big text frame, select the smaller container frame, and Edit->Paste into
- Right click on the container, select Object Export Options, choose EPUB and HTML and enter "subchapter" as epub:type:
- Open a text editor and create a new CSS file. For CSS code, see below
- Export as Fixed layout EPUB. In the export dialog box, select the CSS tab and add the previously created CSS file
- Done!
CSS code:
div[*|type = "subchapter"] {
position: relative;
}
div[*|type = "subchapter"] > div {
overflow: auto;
}
As you see, steps 1 and 2 are essentialy the same as for creating a scrollable frame folio overlay.
It’s not perfect, and this solution is just a proof-of-concept, but it should get you going.
An obvious problem is that we use basic HTML scrollbar, which is not being displayed in e-book readers such as iBooks on the iPad. Hence, the user has now idea how long the scrollable content stretches. This could probably be solved with a more complex, JS-based solution.
Also, the gradient feather at the bottom (which is intended to create a "fade-out effect) seems not to export well. This one should be easy to solve, placing another rectangle with a gradient in it. But I’m not sure if transparency exports well, and haven’t tested it.
Feel free to use, and improve, this hack!
Thanks,
/Jacob
AdChoices