Using widgets in iBooks Author

HTML5 widgets are placed on pages using iBooks Author. My example book, "Balloon ABC,"  is vertically oriented with a full page animation that plays when each page is tapped. One full page widget is placed on each page. Because this is a picture book, the first page is the chapter head. Subsequent pages are pages within the chapter. To the user it appears that it is just 29 pages without chapters.

Setting Up Layouts

To start, open the "layouts" section in iBooks Author by going to view/show layouts. For my book, I wanted to set up the "chapter text" layout and the "page" layout so there's a live area that won't be covered by the widget. A non-retina vertical screen is 768 pixels x1024 pixels. There's a 20 pixel header at the top of each page which is a "dead" area that contains information about the wi-fi status, the time and the battery status. If you make a widget at the full, "live" image area on an ibook page (768x1004), it is impossible to access the table of contents because the widget lays on top of the navigation and makes it inaccessible. One solution is to create a 20 pixel band at the top of the page. In this case, I made the band black and added the word "index." Now you just need to make sure the widget is placed below the index band. That way, viewers can access the table of contents by tapping the index band. I made an identical layout for "chapter text" and "page" to eliminate the impression that the book consists of chapters.

The "chapter text" and "page" layouts were both set up to have an "index" band at the top

Modifying the Widget

Now you are ready to drag the HTML5 widgets onto their respective pages and use the "inspector" to make adjustments to the widgets. This is what the page looks like when you first drag a widget onto a page:

As you can see, the widget is too small, not in the right position and has a bunch of default text around it. You use the "inspector" to whip the widget into shape. I have found it best to follow this order of adjustments: in the" layout" menu of the "widget inspector" (which is the far right menu item at the top of the "inspector,") uncheck title and caption. That gets rid of all that default text. Uncheck background and set the margin to 0pt. Then select the interaction menu option and set to "plays on page." You can, of course, have the widget play full screen. What happens in that case is the widget expands to fill the screen. The person reading the book must then close out the widget before moving to the next page. I wanted the transition from static page to animation to next page to be as seamless as possible, so I chose to play the animation as if it's a part of the page. Go back to the "layout" menu and turn off background and set the margin to 0pt once again. For some reason iBooks Author reverts to the original background and margin settings (is this a glitch in iBooks Author?).

Sizing and Positioning the Widget

Now go to the metrics inspector (the ruler icon) and set the size and position of the widget.  In the case of my vertically-oriented book the widget was designed to be 768 pixels x 984 pixels. This size was chosen to take into account the 20 pixel header at the top of each page and the 20 pixel index band added just below the header (1024-20-20=984 pixels high.)

Pay close attention when you set the size and position of the widget. You are setting the size and position of both the animation and the default image, though this may not be apparent the first time you use the metrics inspector. The first time the widget is selected you will see selection indicators at the top of the widget but the "file info" box in the "inspector" will be empty. Avoid tapping the widget again with the mouse because you are setting the position of the animation at this point. In my case, I set the size to 768 x 884 and position to 0x and 20y, moving the widget down to expose the index band.

If you tap the widget with the mouse once again, the "file info" will display "Default.png" Now you are setting the position of the default image (the static image when you first come to the page). I wanted the default image and the animation to be perfectly aligned so if the settings are the same as before (768 x 984 at 0x and 20y) then all is well. If not, you will need to set those to match if you want the default image and the animation to be aligned. If the widget does not play at the proper position and size, I have found it's easier to delete the widget and start over rather than try to fix it by re-entering values.

Setup for a Horizontal Book

Note that horizontal books would have a live area of 1024x748. As with vertical pages, there is a non-live 20 pixel header band at the top of each page.  Again, a piece of the live real estate would have to be exposed so the reader can access the table of contents. Using a similar treatment as the vertical page discussed above, a band could be added at the top to allow access to the navigation. If a 20 pixel high index band is at the top of the page, the widgets would have a dimension of 1024x728 and they would be placed 0x, 20y (768-20-20=728 pixels high.)

Proofing and Publishing

When all the widgets have been placed and positioned, the enhanced iBook could be previewed in iBooks on a Mac although enhanced ebooks are primarily intended for iPad viewing. It's best to connect an iPad to the computer and preview it on the iPad. Once everything is working, the book can be submitted to the iBookstore.