Scrollable Frame solution for EPUB Fixed Layout
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
@Obi-wan – Here comes the link to a zip file containing the listed documents:
https://www.dropbox.com/s/yphul6ph6cketr8/MSOplusButton-CC-2014.1.zip?dl=0
MSOplusButton-CC-2014.1.zip
MSOplusButton-CC-2014.1.epub
MSOplusButton-CC-2014.1.indd
MSOplusButton-CC-2014.1.mov *
* In the movie you can see the difference between the buttons' action:
Fixed Layout EPUB Preview Panel vs. DPS Content Viewer
The actions will work for DPS workflow. Not so in EPUB.
Also tested this with Readium EPUB Reader plugin with the Google Chrome Browser.
Tried to test with ADE 4.0 and 4.0.2 as well, but every time I tried to open the EPUB in ADE, ADE crashed!
So be careful.
InDesign CC 2014.1, OSX 10.7.5
Uwe
Copy link to clipboard
Copied
I want to add, that the SWF Preview Panel will also show the bug: The disfunctional button, I mean…
Uwe
Copy link to clipboard
Copied
OK.
Question: Why do you want to anchor the button?
Copy link to clipboard
Copied
By anchoring a button inside a state of an MSO I have access to all MSOs on the spread.
With a button inside a state only loosely positioned (not anchored), the button can only see the very same MSO it sits in.
Those are the rules with DPS.
And if we do a transition from DPS to EPUB, I have to redo the document, because of that bug.
It's not that I have planned or calculated that bug in by beginning that DPS project…
So the situation is already there. It's not that I want it.
Uwe
Copy link to clipboard
Copied
Uwe,
I don't think we can do a smooth transition from DPS to EPUB!
All I see, viewing dps files is that, "thinking different", we often can do the same things with FXL ePub!
For instance, how do you manage vertical scrolling simulating a page to page vertical transition?
Copy link to clipboard
Copied
I strongly disagree. With the exception of scrollable frames, there’s a
very good translation with the exception of this bug which I’ve confirmed
is a bug.
I suggest anyone interested in seeing this fixed as quickly as possible
report it as well. It’s not just anchored buttons either, it’s buttons
that have been grouped as well.
Copy link to clipboard
Copied
@Bob – you have my sentiments!
"Grouped buttons" are also a problem?
Wow. Did not realize that…
Grouped inside states of MSOs?
Grouped inside nested MSOs?
Grouped elsewhere?
Grouped in groups, deeper nested?
Uwe
Copy link to clipboard
Copied
I’m not sure yet. Still experimenting.
Copy link to clipboard
Copied
Groups are okay. But groups that are pasted into another frame aren’t.
Probably the same bug affecting it.
Copy link to clipboard
Copied
Ah! I did not dig deep enough by testing this…
Uwe
Copy link to clipboard
Copied
Hm.
I try and try, but cannot break it other than anchoring…
Uwe
Copy link to clipboard
Copied
Groups are okay. But groups that are pasted into another frame aren’t.
Probably the same bug affecting it.
@Bob – do you have an example for buttons not working in a nested frame (other than anchored)?
I cannot see this bug in situations like that.
If a text frame is at play and the button is anchored, yes I can see this bug:
Either if the button is anchored directly in the text frame or as part of a group or another element that is anchored in a text frame.
I really tried hard constructing nested objects with buttons and MSOs.
Btw. If the MSO itself is anchored to a text frame with a button inside, the button will work in EPUB and DPS Content Viewer as well.
Uwe
Copy link to clipboard
Copied
Create the button and paste it into a frame. Put that frame into a state of an MSO.
Copy link to clipboard
Copied
@Bob – I think, I misunderstood you.
If I paste a button into a frame and put that frame into a state of an MSO, *now* the button is not working.
You have to add the action to the button again. After you have done this, the button is working for EPUB.
Uwe
Copy link to clipboard
Copied
Have you tried using an invisible box as a button and putting this on the top layer in the layers panel?
Copy link to clipboard
Copied
Papo,
I've got it working in 10.8
Copy link to clipboard
Copied
Briljant!
Thanks very much for sharing.
Copy link to clipboard
Copied
By the way, bringing the topic back to scrollable frames: in the releases iOS Digital Editions 4 for iPad etc. this scrollable frames do NOT work! They do in the desktop version of DE4 and in iBooks on iOS but not in DE4 for iOS...
Copy link to clipboard
Copied
@Frans – Do you mean Adobe's Digital Editon 4 for iOS?
Don't know, if it's superior to the desktop version for OSX.
I would not trust it.
Eg.: ADE 4.0.2 (for desktop) is crashing, if I open an FXL EPUB with some MSOs and some buttons anchored to text frames.
InDesign CC-2014.1 / ADE 4.0.2 / OSX 10.7.5
Uwe
Copy link to clipboard
Copied
Ok Frans
Just noticed, that ADE 4.0.3 is out. I'll try again…
Uwe
Copy link to clipboard
Copied
Hm. Will not test.
Tech Specs say ADE 4.0.3 needs OSX 10.8 or higher.
Well…
Uwe
Copy link to clipboard
Copied
i meant DE for iOS, the iPad app does not support the scrollable frames as suggested here in any way... (Is this HTML or CSS related, anyone knows?)
Copy link to clipboard
Copied
HI THERE,
THIS WORKS NOW WITH THE LATEST IN DESIGN EDITION, BUT WHEN I EXPORT TO EPUB FOR ANDROID THE INTERACTIVITY SEEMS TO BE LOST - IT WORKS FINE WHEN I PREVIEW ON DESKTOP THOUGH!
ANYONE KNOWS HOW TO FIX THIS? IT CANNOT BE THAT IT ONLY WORKS FOR IPAD AND NOT THE OTHER OPTIONS!...
THANKS
CR
Copy link to clipboard
Copied
Your CapsLock seems to be stuck...

Copy link to clipboard
Copied
Awesome! Thanks.

