iBooks HTML Widget Boilerplate

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

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


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.


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



iBooks HTML Widget Boilerplate

这是一个HTML Widget的最小项目,可以嵌入iBook中的iBooks作者。

由作者 CoffeeScript:互动参考 ,现在可在iBooks商店购买。


由于为iBooks Author创建HTML小部件的推荐方法目前是在Dashcode中创建一个Dashboard小部件。这增加了很多令人分心的cruft,在Dashcode中工作正常的事情有可能停止在iBooks中工作。简而言之,将iBooks小部件视为网页而不是Dashboard小部件最好。


将此git repo克隆为具有 .wdgt 扩展名的目录。使用您选择的工具修改HTML,CSS和JavaScript,就像其他任何网页一样。

点击并拖动 .wdgt 文件到iBooks作者。就是这样!


请注意,当您将 .wdgt 拖动到iBooks Author中时,您只需获取一个预览图像即可。 iBooks除了 Default.png 之外,还没有从您的HTML小部件加载任何内容,直到用户点击它。

如果您只是删除 Default.png ,iBooks Author将自动生成一个预览,但它可能不会有你想要的比例,有些内容可能会溢出。我建议用一个很好的屏幕截图替换 Default.png ,并裁剪并缩放到正确的尺寸。您应该将此作为您的图书制作过程的最后一步,直到那时再执行 Default.png


打开 Info.plist ,为您的窗口小部件设置适当的宽度和高度。当在iPad上打开时,小部件将被缩放以适应屏幕,但将保持正确的宽度/高度比例。另请注意,您的标记中的1px是根据 Info.plist 维度的1px,不是设备屏幕上的实际像素。