I have recently been working on a proof of concept to see if an iBook would work for a project. Even though iBooks are not an open file format, we decided that we liked all the interactive widgets inside iBooks Author and we are using that to build an iBook. iBooks Author is free and they recently came out with an upgrade. Part of the book I am working on has links to pdfs so the reader can click on the link and read the pdf hosted on a website. But if the Internet cuts out, or if you are reading this iBook without wi-fi, you can’t view these pdfs. I wanted to embed a pdf so you have access to that item without an Internet connection, but you unfortunately can’t just drag and drop a pdf onto iBooks Author. You can do it, but it will only render the first page of the pdf.

What I had to do was create an HTML widget and essentially I can use HTML code to display the pdf. I built my widget based off this great project in GitHub by Trevor Burnham called the iBooks HTML Widget Boilerplate. Since iBooks Author is only for Mac, you’ll be working on a Mac to create this widget. Some sites say you can download Dashcode from the Apple Developer’s site,, but you really don’t need it with this template. All you need is an HTML editor (TextEdit works fine) and an image editor to create the widget image.

Here’s the steps I took to create my widget -(Note: I kept all the files the same name in the folder I downloaded from the site (as in I renamed my widget icon default.png and replaced the default.png in the Widget Boilerplate folder and I did the same for the main.html file)):

  • I copied my pdf into the Widget Boilerplate folder
  • I edited my widget image and renamed it default.png and copied and replaced the default image inside the folder
  • I opened main.html in TextEdit (set your preferences to ignore rich text so you can edit this file in plain text)
  • I deleted everything in the body and put this JavaScript in between the head tags (this is code for redirecting to a page or in this case, a file):<script type=”text/javascript”>
    <!–
    window.location = “my_pdf_file_name.pdf
    //–>
    </script>
  • Once you are finished editing the files, add the extension .wdgt to the entire folder. This will make the folder contents a widget.
  • Open iBooks Author and drag and drop this widget into your iBook. To edit the size and text, use the iBooks Author Inspector and choose the widget section.

If you need to go back in and tweak your iBooks HTML widget, delete the extension from the widget (go into the info of the widget, i+Command and delete it in the name) and you’ll see your folder with all it’s files.

Also remember to optimize your pdfs so they look great but are a low file size. The more you add to the iBook, the bigger the file size is and that effects load times for the iBook.

*One thing about this template, it’s best if the widget is viewed in the horizontal position. My iBook is in the vertical  position (portrait) but the widget works fine (I just have some white space at the top and bottom when scrolling through the pdf).

Helpful Links:

Trevor Burnham’s iBooks HTML Widget Boilerplate project on GitHub (download the zip file to begin):

https://github.com/TrevorBurnham/iBooks-HTML-Widget-Boilerplate

JavaScript redirect code:

http://www.quackit.com/javascript/javascript_redirect.cfm

Advertisements