Skip to content

edwilde/iBooks-HTML-Widget-Boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Scrolling iBooks HTML Widget Boilerplate

This is a basic project for a Scrolling HTML Widget that can be embedded in an iBook with iBooks Author.

Why?

Because the recommended approach for creating an HTML widget for iBooks Author is currently to create a Dashboard widget in Dashcode. This adds a lot of distracting cruft, and things that work fine in Dashcode have a tendency to stop working in iBooks. In short, it's better to treat an iBooks widget as a web page rather than as a Dashboard widget. The scrolling functionality seems to be missing from the default implementation of widgets in iBooks.app (although not in iBooks Author), so has been re-created with javascript.

Usage

Clone this git repo as a directory with a .wdgt extension. Modify the HTML, CSS, and JavaScript with the tools of your choice, just as you would any other web page.

Click-and-drag the .wdgt file into iBooks Author. And that's it!

Preview image

Notice, however, that when you drag the .wdgt into iBooks Author, you just get an image that says "Preview." iBooks doesn't load anything from your HTML widget other than Default.png until the user taps it.

If you just delete Default.png, iBooks Author will generate a preview automatically, but it probably won't have the proportions that you want, and some of the content may overflow. I recommend replacing Default.png with a nice screenshot of the widget, and cropped and scaled to the right dimensions. You should probably make this the last step in your book production process, and do without Default.png until then.

Widget dimensions

Open up Info.plist to set the appropriate width and height for your widget. When opened on the iPad, the widget will be scaled to fit the screen but will maintain the correct width/height proportion. Also note that 1px in your markup refers to 1px according to the Info.plist dimensions, not the actual pixels on the device screen.

Currently, HTML widgets can only be viewed in landscape orientation, so you'll probably want a size of 1024x768 adjusted slightly for the title, caption, and background margin that you can customize from the Widget inspector in iBooks Author like so:

Widget layout settings in iBooks Author

License / Credits

Based on work by the author of CoffeeScript: An Interactive Reference, now available in the iBooks store.

License - http://trevorburnham.mit-license.org/

About

A basic scrolling HTML widget compatible with iBooks Author

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%