Scrollable Frame solution for EPUB Fixed Layout

[jacobwod]

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:

1. 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])
2. Cut the big text frame, select the smaller container frame, and Edit->Paste into
3. Right click on the container, select Object Export Options, choose EPUB and HTML and enter "subchapter" as epub:type:
4. Open a text editor and create a new CSS file. For CSS code, see below
5. Export as Fixed layout EPUB. In the export dialog box, select the CSS tab and add the previously created CSS file
6. 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

[Sandee Cohen]

Not only can you make a scrolling frame, you can create workable hyperlinks in the frame

[Sandee Cohen]

I got the gradient feather to work fine as long as it's white with a gradient feather.

[elena.petrov]

Thank you so much, for this. Sounds really-really cool.

But can you please tell me what the text editor is and how to open it? I stuck at the fourth step

Very very grateful,

Elena

[cinziamarotta]

Great! Thank you so much.

[gemmab2320878]

Hi Jacob, this does work really well but can't get it to work horizontally, is there an idiot's guide somewhere to do this? Do I need to change the coding?

[BobLevine]

Universal Scrolling Frames | Ajar Productions

[gemmab2320878]

Thanks bob, I signed up for the newsletter but nothing happened?

[BobLevine]

Check your spam folder.

[mewgrasshopper]

Hello Bob,

I used Universal Scrolling Frames and it works great except when I am using a two state MSO each with a scrolling box. On Mac iBooks it works perfectly, but on iOS iBooks it's erratic. Sometimes one will work and with the other I can see the scrollbar indicator move but the content doesn't. I've tried rebuilding several times but there always seems to be an issue.

Should I simply avoid doing scrolling frames inside MSOs? Or maybe the technique described by the OP in this thread would work better...

[BobLevine]

Without seeing the files it's really difficult to answer that.

[mewgrasshopper]

OK, I made a simple test that shows the problem.

To reproduce: after the page loads, the initial scroll works fine.

Tap the yellow button to see the second state. Scrolls OK. Then use the pink button to go back to the original state, and the scrolling breaks. It appears that you are still scrolling the content from state 2 even though you are looking at a static state 1.

Thanks for any insight you can provide!

Dropbox - Archive.zip

[Laubender]

mewgrasshopper  wrote

… To reproduce: after the page loads, the initial scroll works fine.

Tap the yellow button to see the second state. Scrolls OK. Then use the pink button to go back to the original state, and the scrolling breaks. It appears that you are still scrolling the content from state 2 even though you are looking at a static state 1.

…

Hi,

tested your test2.epub with iBooks app v 1.2 on OSX 10.10.5.
I can confirm, that I see no problem with scrolling the frame after getting back to state 1 from state 2.

Cannot test currently on any iPad or other iDevice.

If there is a difference, I cannot see that we could do something about the problem.

Sorry. It might be a bug with iOS or a caching problem…

Regards,
Uwe

[mewgrasshopper]

Thanks Uwe, I should have mentioned again that it works fine for me too in iBooks on the Mac. It's only on iOS where there's a problem.

Maurice