• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

Scrollable Frame solution for EPUB Fixed Layout

Community Beginner ,
Jan 19, 2015 Jan 19, 2015

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:

  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

TOPICS
EPUB

Views

23.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

OK.

Question:  Why do you want to anchor the button?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 11, 2015 Feb 11, 2015

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

I’m not sure yet. Still experimenting.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Groups are okay. But groups that are pasted into another frame aren’t.

Probably the same bug affecting it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Ah! I did not dig deep enough by testing this…

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Hm.
I try and try, but cannot break it other than anchoring…

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

Copy link to clipboard

Copied

Create the button and paste it into a frame. Put that frame into a state of an MSO.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 11, 2015 Feb 11, 2015

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Apr 11, 2015 Apr 11, 2015

Copy link to clipboard

Copied

Papo,

I've got it working in 10.8

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2015 Jan 30, 2015

Copy link to clipboard

Copied

Briljant!

Thanks very much for sharing.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

Copy link to clipboard

Copied

Ok Frans

Just noticed, that ADE 4.0.3 is out. I'll try again…

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2015 Feb 12, 2015

Copy link to clipboard

Copied

Hm. Will not test.

Tech Specs say ADE 4.0.3 needs OSX 10.8 or higher.

Well…

Uwe

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2015 Feb 14, 2015

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?)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 07, 2015 Mar 07, 2015

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 07, 2015 Mar 07, 2015

Copy link to clipboard

Copied

‌Your CapsLock seems to be stuck...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 16, 2015 Mar 16, 2015

Copy link to clipboard

Copied

Awesome! Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines