Adding a Scrolling Frame in FXL and Publish Online

• Tweet
• Email
• Sumo

• Tweet
• Email

At the InDesign Conference in Denver last month, Chad Chelius demonstrated how to add a scrolling sidebar to the Fixed-Layout EPUB exported from InDesign. This is one of my favorite iBooks Author widgets – it allows for a practically unlimited amount of text to be included in a small space on a page. As a bonus, Chad’s solution also works in Publish Online, the new InDesign-to-Web export. I asked Chad to write up his method. Here it is.

The Fixed-Layout EPUB format (FXL) has grown in popularity since InDesign started supporting it in full force with the 2014 release of Creative Cloud. With animations, audio, video, buttons, and multi-state objects, it offers almost as much as DPS and, in the case of animations, even more! One feature that a lot of users have been missing, however, is the ability to add scrollable frames when exporting to FXL out of InDesign. Many users of DPS used these heavily because it maximizes screen real estate by allowing you to scroll content within a limited area. Well, I’m here to tell you that it is in fact possible to create scrolling frames in both FXL and Publish Online!

Adding Scrolling frames for FXL

This technique was originally posted on the InDesign forums by Jacob Wodzynski. It’s a great solution, and I’m using it with some additional tweaks that I made. Essentially, I simplified the CSS code. Setting up scrolling frames for export to FXL and Publish Online is virtually the same as it is for DPS output.

You need two frames in InDesign. One frame is the container or viewport, if you will, and the other houses the content that scrolls within the container. I typically make the content frame about 10px smaller than the container frame to leave room for the scroll bar that appears to the right of the scrolling frame. This prevents the scroll bar from overlapping any of the content.

Next, you need to cut (Edit> Cut) the frame containing the content (the one on the right in the figure above), then select the container frame (the frame on the left) and choose Edit > Paste Into. This places the content frame within the containing frame (just like an image appears when you place it). Select the content frame and reposition so that the upper left corner of both frames align, or set the x and y coordinates of the content frame to 0.

Next, select the container frame and choose Object > Object Export Options. Under the EPUB and HTML tab, click on the epub:type drop-down menu and choose Document Divisions > subchapter, then click Done. This adds an attribute of epub:type with a value of subchapter to the Div that is created in the HTML of the FXL EPUB.

Finally, we need to create a very basic .css file to include when we export to the FXL file. Create a new text document using your text editor of choice and add the following code:

div[*|type = "subchapter"] > div {
overflow: auto;
}

Save the file with a .css extension. I called mine scrollframe.css.

This code targets the child div of the subchapter in the resulting FXL file, and enables the overflow property. This is essentially the content frame in the InDesign file.

The last step is to export the InDesign document as a Fixed-Layout EPUB file.

The important step here is to go to the CSS section of the EPUB – Fixed Layout Export Options dialog box and click the Add Style Sheet button. Choose the .css file you just created, then click OK to export the EPUB.

Open the FXL EPUB in the reader of your choice that supports the FXL format and test the scrolling frame. You should see that the content scrolls within the container as expected.

Making It Work with Publish Online

After performing the steps above, I got excited and used the Publish Online feature in InDesign to generate the file as HTML. I was disappointed when the scrolling frame didn’t work. I was expressing my disappointment to my friend Justin Putney of AJAR Productions, and he said that there’s no reason we shouldn’t be able to get it to work with Publish Online. So after some testing and a few e-mails back and forth, we figured it out.

The setup is exactly the same. You need two frames in InDesign: a container frame and a content frame. The epub:type attribute doesn’t get passed on to Publish Online, however, so you need to take a few additional steps.

First, create an Object Style and apply it to the container frame:

1. Create a new Object Style and in the definitions for the Object Style, give the style a name (I called mine Scroll).
2. Next, click on Export Tagging (in the Basic Attributes section of the Object Style Options dialog box).
3. Choose div from the tag drop-down menu in the next dialog box, and enter Scroll (or whatever name you desire) in the Class field.
4. Click OK and, again, make sure that you apply this style to the container frame.

Next, we need to add some CSS that will tell these frames what to do. Copy the following code to your clipboard:

<style>.Scroll > div { overflow:auto; -webkit-overflow-scrolling:touch; }
.Scroll > div::-webkit-scrollbar { -webkit-appearance:none; width:7px; } /*add back scrollbar for webkit*/
.Scroll > div::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); }</style>

NOTE: See update at end of post for revised code. 

The first line enables the overflow option for any child div whose parent contains the .scroll class applied. This was accomplished when we applied the object style to the container frame. The remaining code enables the scroll bar for webkit browsers that hide the scroll bar.

Since there are no options to add CSS when using Publish Online, you must add this CSS to the InDesign document. Insert it onto the page on which the scrolling frame appears:

1. Choose Object > Insert HTML.
2. Paste the above code into the Edit HTML dialog box and click OK. You can position the resulting frame anywhere on the page.

That’s it! Click the Publish Online button. Once the assets are uploaded, you’ll be provided with a link that will take you to the online version of your document.

To see a working example, take a look at this sample that I uploaded. The scrolling frame is on page 7 (About the Photographer) of the document.

With a little bit of basic CSS knowledge, you too can incorporate scrolling frames in your FXL and Publish Online content.

UPDATE

As Justin mentioned in the comments below, our fix didn’t make the article deadline but here is a screen capture of the updated code that allows the scrolling frame to work with Publish Online on an iOS device.

Sandee Cohen and Laura Brady mentioned the fact that you don’t get a hand when hovering over the scrolling frame like you do with DPS folios. This is a limitation of how these scrolling frames work in HTML. You’ll need to actually use the scrollbar instead of clicking on the frame itself.

<style>.Scroll > div { overflow:auto; }  
.Scroll > div::-webkit-scrollbar { -webkit-appearance:none; width:7px; } /*add back scrollbar for webkit*/
.Scroll > div::-webkit-scrollbar-thumb { border-radius:4px; background-color:rgba(0,0,0,.5); }</style>

And here’s how it looks in Object > Insert HTML.

Chad Chelius is an Adobe Certified Instructor, author and consultant. He teaches clients around the world how to use and make the most of Adobe software and speaks at various industry conferences. Based in the Philadelphia area, you can learn more about him here and  follow him on twitter.