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

21.3K

Likes

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
Adobe Community Professional ,
Jan 19, 2015 Jan 19, 2015

Copy link to clipboard

Copied

Nice.

I don’t see the lack of a scrollbar as that big a deal. In fact, with DPS, I typically turn them off anyway and use other visual cues such as end of story dingbats.

Likes

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 ,
Jan 19, 2015 Jan 19, 2015

Copy link to clipboard

Copied

Hi Jacob and Bob,

Very very cool!

Tested on Mac [iBooks, ADE and Readium] and iPad [iBooks] - It works fine!

Tested with other readers on iPad but inconclusive!

I've tested the solution with horizontal scroll (text on several columns/image). We have to play differently with the finger but I totally like it!

Thanks a lot, Jacob. 

EPUB scroll_MA8.jpg

Likes

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 ,
Jan 23, 2015 Jan 23, 2015

Copy link to clipboard

Copied

A cool use of Jacob's Scroll tip! 

See:  Dropbox - Obi-wan_Kenobi_ePub-FXL_010_002.epub

Capture d’écran 2015-01-24 à 00.58.18.png

Likes

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 ,
Nov 02, 2015 Nov 02, 2015

Copy link to clipboard

Copied

Hi, when I have exported my epub into an ipad, the scroll bar seems to disappear but it appears just fine when I export on a mac in iBooks

How can I fix this seeming as though it worked for you?

Thanks

Likes

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
Adobe Community Professional ,
Nov 02, 2015 Nov 02, 2015

Copy link to clipboard

Copied

‌You can't, this is normal behaviour. You need to give readers a clue on tablets that they can scroll.

Likes

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 ,
Sep 20, 2016 Sep 20, 2016

Copy link to clipboard

Copied

Hi Obi,

Can I ask how you got it to work horizontally? Is there an idiot's guide anywhere? Do I need to change coding on css file? Many Thanks

Likes

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
Explorer ,
Jan 20, 2015 Jan 20, 2015

Copy link to clipboard

Copied

Great work and thanks for sharing!

Likes

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 ,
Jan 27, 2015 Jan 27, 2015

Copy link to clipboard

Copied

Hi,

thank you for this solution is really perfect.

But I made a series of tests, and this solution only works on iOS 10.10 ... and does not work on 10.9.5 ... !!!! I exported the epub thy remonstration on my MacBook Pro's on 10.9.5 and iBooks 1.0.1, it does not work, then it works great on iOS 10.10 and iBooks 1.1. Y-he has a problem with me, or it only works with CSS Yosemite.

In addition, have you a solution for horizontal sroll because I tried it and it not working at all .... sometimes difficult text, email is very difficult to move it.

Good day.

Papo

Likes

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
Adobe Community Professional ,
Jan 29, 2015 Jan 29, 2015

Copy link to clipboard

Copied

@Papo – then I would suggest not a scrollable frame, but an MSO you can click through showing the whole text.

1. Do some text frames the same size

2. Thread all the text frames to one story

3. Align the text frames

4. Make a MSO out of it:

The text frames are still threaded and text can easily flow between them.

5. Do some navigation buttons to control the MSO states:

"Go To First State", "Go To Next State", "Go To Previous State" etc.

Later you can change the text (add or remove, do different formatting) flowing in that story through the states.

A very flexible solution. Ok, it's not a scrollable frame, but something like that…

Uwe

Likes

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 ,
Jan 29, 2015 Jan 29, 2015

Copy link to clipboard

Copied

Thank you Uwe,

I look and hold you aware of your solution in an environment EPUB

Patrick

Dr Patrick Dhont

Le 29 janv. 2015 à 11:52, Laubender <forums_noreply@adobe.com> a écrit :

Scrollable Frame solution for EPUB Fixed Layout

created by Laubender <https://forums.adobe.com/people/Laubender> in InDesign EPUB - View the full discussion <https://forums.adobe.com/message/7143179#7143179>

@Papo – then I would suggest not a scrollable frame, but an MSO you can click through showing the whole text.

1. Do some text frames the same size

2. Thread all the text frames to one story

3. Align the text frames

4. Make a MSO out of it:

The text frames are still threaded and text can easily flow between them.

5. Do some navigation buttons to control the MSO states:

"Go To First State", "Go To Next State", "Go To Previous State" etc.

Later you can change the text (add or remove, do different formatting) flowing in that story through the states.

A very flexible solution. Ok, it's not a scrollable frame, but something like that…

Uwe

If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7143179#7143179 and clicking ‘Correct’ below the answer

Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:

Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7143179#7143179

To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"

Start a new discussion in InDesign EPUB by email <mailto:discussions-community-indesign-indesign_epub@adobe-v7.hosted.jivesoftware.com> or at Adobe Community <https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=14&container=5001>

For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624 <https://forums.adobe.com/thread/1516624>.

Likes

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 ,
Jan 29, 2015 Jan 29, 2015

Copy link to clipboard

Copied

Hi,

@ Patrick, I've tested Jacob's very clever solution with a vertical/horizontal scroll on several machines, e.g. a MAC OSX 10.9.3, with iBooks 1.0.1.

It works totally fine for me!  Sorry for you!  

However, I believe that a tablet, not a desktop computer is here the perfect support!

@ Uwe, you're right: it's not a scroll. MSO and animations can be other options! 

Likes

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 ,
Jan 29, 2015 Jan 29, 2015

Copy link to clipboard

Copied

Hi,

@Obi-van,

thank you for your reply.

Is it possible to have your record (InDesign and epub), so I tested on my machine because I tested it last night on another machine (iOS 10.9.5) and iBooks 1.0.1 I still have the problem then it mmême walking on Yosemite and iBooks 1.1.

Thank you for your help

Patrick

Likes

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 ,
Feb 05, 2015 Feb 05, 2015

Copy link to clipboard

Copied

Hi,

@Obi-wan, and thank you for your answer, but 2 other computers I have the same problem, and horizontal I find that it does not work or not well.

Will you documenst the sources of your tests so I can try.

thank you for your help.

Patrick

Dr Patrick Dhont

Le 29 janv. 2015 à 12:45, Obi-wan Kenobi <forums_noreply@adobe.com> a écrit :

Scrollable Frame solution for EPUB Fixed Layout

created by Obi-wan Kenobi <https://forums.adobe.com/people/Obi-wan+Kenobi> in InDesign EPUB - View the full discussion <https://forums.adobe.com/message/7143299#7143299>

Hi,

@ Patrick, I've tested Jacob's very clever solution with a vertical/horizontal scroll on several machines, e.g. a MAC OSX 10.9.3, with iBooks 1.0.1.

It works totally fine for me! Sorry for you!

However, I believe that a tablet, not a desktop computer is here the perfect support!

@ Uwe, you're right: it's not a scroll. MSO and animations can be other options!

If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7143299#7143299 and clicking ‘Correct’ below the answer

Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:

Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7143299#7143299

To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"

Start a new discussion in InDesign EPUB by email <mailto:discussions-community-indesign-indesign_epub@adobe-v7.hosted.jivesoftware.com> or at Adobe Community <https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=14&container=5001>

For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624 <https://forums.adobe.com/thread/1516624>.

Likes

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 05, 2015 Feb 05, 2015

Copy link to clipboard

Copied

‌Hi Patrick,

I'm going to dropbox the source files (soon)!

Likes

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 10, 2015 Feb 10, 2015

Copy link to clipboard

Copied

Hi I have the vertical version working fine, but its not working horizontally for me, I see a scroll bar when the page first loads and if I'm quick I can scroll that, but I can't scroll the actual frame. Did you do anything different to make it work horizontally?

Likes

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 10, 2015 Feb 10, 2015

Copy link to clipboard

Copied

Hi,

Done very quickly but scrolling works [MAC : iBooks, ADE and Readium + IPAD: iBooks]. Does not work on IPAD with ADE and Google Play Books].

ID file + ePub file:  Dropbox - FXL_Scroll 2

Likes

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 10, 2015 Feb 10, 2015

Copy link to clipboard

Copied

Thanks for supplying these so quickly, I'll give it a go

Likes

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 Beginner ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Thanks Obi-wan Kenobi‌ for the horizontal version. I tried it out on an iPad recently, and now I understand what you mean by saying "we have to play with the finger differently"! In iBooks on the iPad, it seems that scrolling left/right invokes the default previous/next page commands. So, as you said, user has to scroll up/down to make the frame scroll left/right. That's a bit weird, and I have no idea how come it works that way... but it does.

Unfortunately, there might not be any easy solution for horizontal scrolling for e-readers that use that gesture for changing page. Perhaps this is the very reason why Adobe hasn't yet came up with a way to make scrollable frames for FXL - the results are just not consistent across different environments.

But as I said: it's just a simple hack and I'm happy that some of you found it useful!

/Jacob

Likes

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
Adobe Community Professional ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

@Jacob – I'm enthustiac of using your "hack" in converting DPS projects to Fixed Layout EPUB. One single piece of a puzzle to close the gap between what is possible with DPS vs. Fixed Layout EPUB. And in case of Scrollable Frames this gap was huge…

There are other things, that should be weeded out.
Eg. a bug with buttons that control MSOs (MultiStateObjects) on the spread. If a button is anchored to a text frame "inside" of a state of an MSO, it cannot work its "Go To State"-Actions to other MSOs or even the very MSO it is sitting in. But this is off-topic here. However, a subject for a different thread concerning DPS vs. EPUB and the rules for making a transition…

Uwe

Likes

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

Hi Uwe, Interested! Can you show something about this! Thanks.

Likes

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
Adobe Community Professional ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Hi, Obi-wan!
To show this bug, I'll upload a movie together with the InDesign CC 2014.1 files and an exported Fixed Layout EPUB to my Dropbox and will post the download link. Give me half an hour, please…

Uwe

Likes

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
Adobe Community Professional ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Btw. Everyone not using DPS, but only Fixed Layout EPUB possibly would not recognize this as a bug, but merely as a feature restriction…

Uwe

Likes

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

Answer to Post #19:  

Likes

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
Adobe Community Professional ,
Feb 11, 2015 Feb 11, 2015

Copy link to clipboard

Copied

Be patient…
The file is uploading.

Uwe

Likes

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