Subscribe to feed

Archive for the ‘Techniques’ Category

ePub Update: Chapter sizes and centering text

Add your comment

Couple of updates as more is uncovered about the joys of eBooks and eBook development.

How big is too big?

Earlier I posted recommendations that you separate ePUB content into separate files to improve eReader performance.  Buried within some ePUB best practices I uncovered at the Adobe ePUB/InDesign site is a more definitive guideline:

  • keep chapters to under 300K (uncompressed)
  • keep images to under 10MB (uncompressed)

Apparently anything bigger upset the SONY eBook Reader.  And we wouldn’t want to do that.

How to centre centred text?

Another post rued an issue with iBooks where content styled as centred refused to appear as such if the iBooks settings  had justification:on.

Well that problem still exists, but there is a simple solution.  Simply place an empty <span> inside of each element styled with text-align:center.  Do so and iBooks will honour your settings.

This fix is one of many gems in the Pigs, Gourds and Wikis article: Beating iBooks Bugs.  The rest of the article is definitely worth a read too.

Share
Posted by steven on November 17th, 2010

Read More

Building ePUBs with InDesign: Just the Basics

1 Comment

The following started as a quick reference to the basic steps/techniques for creating an ePUB using InDesign 5.  However it’s turned into a mini-epic.  Hence you might prefer to download as a PDF, ePUB or InDesign project .  They won’t win any design awards but will get you started towards winning your own.
[Note: WordPress won't permit ePUB files to be uploaded (que?) There is a fix but it's hard. Instead, download the ePUB link here and remove the .ZIP extension]

Introduction

InDesign is a fantastically powerful tool for generating and organising publishing output that is completely wasted on ePUB development.  This is because the essential premise of an eBook is that the layout is fluid and controlled by the user and the device, not the publisher.

Having said that, InDesign has its benefits, particularly when dealing with extensively text documents, ie the more traditional book or longer format document.  This article covers some of the basic skills uncovered when toying with this powerful application.  It is by no means an InDesign user guide, but hopefully enough to get you publishing.

Which InDesign version?

This document, and my InDesign efforts, have centred on CS5. ePUB support has been available since CS3 but most reviews state iit only got serious from CS4.

Since this article is only about the basics of InDesign it should be applicable to both CS4 and CS5.

How InDesign organises your work

The basic building block in InDesign is a document.  Each time you create one you specify the page layout, then add your content (and extra pages as needed).  You can then publish in all formats, including ePUB.

Optionally you can collect documents into a single book.  In each book you specify the order that documents present in, and choose which document contains the “master” styles to be enforced across all the other documents.  InDesign takes care of applying those styles, making sure page numbers run across all documents, etc.

For ePUBs you can publish from inDesign at the document or book level.  So there’s no real need to go the book route (what do you care about running page numbers?).  The only real benefit is if you publish a book as an ePUB you get a table of contents that matches the document set it contains.  Plus, if your content is long, it does give you, and your target eBook reader, more manageable chunks to work with.

Creating documents and books

To create a document, simply select File > New > Document.  You’ll then get a dialog that has little bearing on any aspect of ePUB development.  As a result I recommend you ignore most if it.  Pick an A4 or A5 page layout for print so you just get some room to work without too many page breaks.

To create a book, select File > New > Book.  And then choose where to save it.

Once saved, what you’ve got is an empty book. To populate your book you then add your documents.  In the book panel, click the plus (+) button.  Then select the document(s) you want to include in your book.  Once selected they’ll be listed in the order added; you can drag and drop to set the required order.


The book panel will list all the documents in your book, and will automatically calculate the page numbers across all the content.  It also shows (by small icon on LHS) which document is picked as the master for your styles: more on that later.

Adding content to documents

InDesign gives you an extensive toolbar to add and manipulate content.  However if working mainly with text we only need a few.  And the real technique (and power of InDesign) is being able to add multiple pages of content in one go.

Now there is probably a better way to do this, but this worked for me.

  1. Get your required content into a text format.  It’s easy to export most documents into text.

  2. Open the document that the content is to be included in.

  3. Select File > Place

  4. In the dialog that appears, select your file, but make sure you have selected the Show Import Options checkbox.


  5. In the Import options, check the options for extra carriage returns match the format of your text import.  By default I found it better to always choose to remove returns at end of every line.  Also check the encoding matches the original.

    What you may find is that you need to trial different settings of these import options to get the best formatted input.  If you pick the wrong one just undo the placement and try again.

  6. Click OK to import your content. 


    You’ll get a floating cursor thingie you can use to drop your content into your document. Now here’s the clever part: press and hold Shift (so the cursor shows a snake-like icon) and then click in the top left corner of your page.

Clicking automatically creates a a text box on the current page and places your content in it. But pressing Shift tells InDesign to create as many pages as are needed to display all your content.


If you need to quickly review your content then use the Story Editor (Edit > Edit in Story Editor).  This gives a plain text view of all your content, allowing you to quickly scroll and edit without being distracted by styles and page breaks.  This is an excellent tool for fixing up unwanted paragraph breaks, repeated footer text included in the body, etc.

You can also use it as a quick way to run through content and apply styles – which we’ll describe next.

Applying styles to documents and books

By default all your content will come in as “Basic Paragraph” style.  You can view the available styles in the Paragraph Styles pane (if not visible choose Window > Styles > Paragraph Styles).

To add a style click the small add icon at the bottom of the pane.  You’ll then get an extensive dialog to tweak to your heart’s content (you can get to the same dialog for an existing style by just double-clicking on it).  InDesign does a decent job of converting your request to CSS when exporting the ePUB; just avoid settings around pagination (eg “start on next odd page”) as these are meaningless in electronic land.

To apply a defined style to content simply click your cursor in the paragraph and then select the required style from the list.  You can do this in both the document window and the story editor window.

If using a book, setup all your required styles in one document.   And then use the book features to apply those same styles across all documents in the book.

  1. In the book panel ensure the document with the required styles is selected as the style source.  It should have the boxy icon appearing in the left column in the book pane.

  2. Click the synchronise button (looks like two arrows attacking each other) at the bottom of the book pane.

Once synchronised, all the styles in your master document will now be available/updated in your current document.  You can then apply them to your content.  If already applied and you’ve made changes to the style, those changes will be automatically applied.

[Note: The same basic principles and features apply to character styles.  However since I've never worked on an ePUB that warranted them I'll leave that as an exercise to the reader].

Adding images

To add an image to a document you use the same Place menu option as for adding text.  The important point, however is to add the image within your text, not in a floating frame.

To add an image inline simply place your cursor where you want the image to appear (be thinking location in text – after this paragraph – not location on page).

Then choose File > Place and locate your image.

Since ePUBs are essentially web pages, use images in the standard web formats (GIF, JPG, PNG, SVG).  I’m sure InDesign can manage converting other formats but why bother if you can the appropriate conversion beforehand.

Publishing your ePub

To publish a document as an ePUB select File > Export for ePUB.


To publish a book as an ePUB select Export Book to ePUB from the book panel menu.

Once selected you get a standard dialog, and most of the options you can leave with their current defaults. The only item to check is the format (use XHTML). However if you make it to the advanced class then there is some useful options in here around re-using external CSS styles, and auto-generating contents.

What next?

Once your ePUB is published open it in your required device and test.  If there are any issues return to InDesign to fix up and re-publish.  A moment’s work.

If there are some fixes that are beyond InDesign then you’ll be pleased to know it generates some of the cleanest XHTML I’ve seen in a long time.  If needing to go “under the hood” you’ll have no problem figuring it out.

Conclusion

This article demonstrates the basic skills needed to generate an ePUB using InDesign.    As you can see, using it for ePUBs is a little like using an aircraft carrier as a harbour ferry.  Sure it will get you there but you’re not really using its full potential.  However it’s strengths in manipulating large text elements  make it a valuable publishing tool to have in your toolkit.

Useful resources

Adobe websites

The Adobe official website has plenty of resources, although most of the good stuff you can access directly from the InDesign help.

http://www.adobe.com/products/indesign/epub/howto/ – collection of authoring guides for ePUBs. Written for CS4 but mostly applicable for CS5 also:

  • How to export for ePUB from InDesign
  • Common questions about exporting EPUB files from InDesign
  • Working with images in InDesign for export to EPUB

http://www.adobe.com/products/creativesuite/design/crossmedia_resources/ebooks_software.
html – includes some more resources, including videos of the basics. Also of interest here is a topic on how to add the richer, interactive content (video, etc) directly in your publication.

Finally try the official blog. Search on ePUB to see what’s been published:
http://blogs.adobe.com/digitalpublishing/?s=epub

Other websites

http://threepress.org/ – is always a useful site for thoughts on ePUB, not just via InDesign. For example here’s a great article that explains all those ePUB publishing options I said you did not have to worry about.

http://www.pigsgourdsandwikis.com/ – is another great ePUB resource; so good she wrote the book on them. For example, here’s her list of 22 reasons why you need to edit the ePUB source after InDesign finishes its publication:

As a final suggestion, here’s an interesting article on the process of converting a regular book to an eBook. Less about the technical aspects, more about the suggested ways to adjust content and layout to respect the new approach.

Video

Follow the Adobe links above for access to a series of official videos. There’s also a vast collection of quick reference video content on Youtube. Just search for the topic you’re after.

Finally I’d also recommend the Instant InDesign prodcast (http://www.instantindesign.com/). Check out episodes 10 and 11 that dealt specifically with ePUBs.

Share
Posted by steven on November 5th, 2010

Read More

Stop this UI Madness: Confirming visible fields

Add your comment

Enough people.    Please stop building forms where I’m asked to confirm a field I can see quite clearly.  Like this example:

Or here’s another example. Which shows right and wrong use of duplicated fields and (horror or horrors) disables cut&paste.

The only requirement for a confirmation field is when entering a value that is not visible, i.e. a password.  For anything else I can see the value I’ve typed and “confirm” it’s correct without retyping.  Don’t make me repeat myself.

If worried about validity, beef up your error-checking.  Don’t delay me with pointless re-typing (or more usually, cut&pasting).

And another thing.  While making me repeat myself is bad enough, making me repeat myself and then disabling cut&paste in the repeated field gets you your own special corner of hell.

Share
Posted by steven on October 23rd, 2010

Read More

mysql concat does not like NULL values – use concat_ws instead

2 Comments

This just caused me several moments of pain. Here’s hoping I can remove that for you.

I was needing to update a VARCHAR column by incrementally adding values read from another source. Simplest SQL (I thought) was:

UPDATE table SET field = CONCAT(field, 'value ') WHERE id = ID;

All ran fine. But pretty much all of the fields came back NULL. And to find out you have to actually read the details in the mysql manual. A snip from the official write-up on concat:

CONCAT() returns NULL if any argument is NULL.

There’s the problem. Most/all my starting values were NULL. So concatenating actual values in the field did nothing as the NULL won.

The solution was very simple. Replace the CONCAT() function with CONCAT_WS() where the “ws” bit means “with separator”. Rather than just adding a space after the value in my example, specify the delimiter as the first parameter. This makes the revised SQL command:

UPDATE table SET field = CONCAT_WS(' ', field, 'value ') WHERE id = ID;

It’s a lot more forgiven with NULLs; again snipped from the manual:

  • If the separator is NULL, the result is NULL
  • CONCAT_WS() does not skip empty strings. However, it does skip any NULL values after the separator argument.

Now it does not matter if there are any NULL values involved. All just works.

Share
Posted by steven on September 24th, 2010

Read More

Single or multiple chapter files in your ePUB?

Add your comment

Up until now I’ve not thought it made much difference in your design whether you publish your ePUB as a single chapter (= single XHTML file) or multiple chapters (= multiple files). Granted you’d lose the ability to provide navigation by a table of contents. But for a book, particularly a fiction novel, how often would you need that? How often do you read a novel and wish you could jump straight to chapter 7?

Well it turns out there is a valid reason for separating your chapters. And that’s for performance. Apologies to whoever first reported this, but apparently when rendering an ePUB and determining pages the base unit to work with is the current chapter file. This means if your entire novel is one chapter that’s how much has to be massaged to work out the page numbers (total and current) each time you change the view or open/close the book.

That makes sense. Your E-Reader is going to have to work harder to know you’re on page 137 of 452, compared to page 23 of 34, in chapter 3.

As a result recommended you always produce your ePUBS with separate chapter files. And note you can do this without necessarily including them in the table of contents. Just ensure each chapter file is listed in content.opf but don’t add them to toc.ncx. The former gives you the navigation through the chapters (so click next at the end of chapter 5 to start chapter 6). The latter optionally gives you a table of contents presented depending on your reader.

How to split a single Indesign document into multiple chapter files

How to split a single Indesign document into multiple chapter files


And for bonus points, if you’re using InDesign there’s an option to automatically split your single document content into separate chapter files. It’s part of the Export to ePUB options:

Share
Posted by steven on September 7th, 2010

Read More

Issue with centre-aligned text in an ePUB on the iPad

10 Comments

For a while now been puzzled by an issue where centred text in an ePUB book was not appearing as such once the book was viewed on the iPad.

The following images show the issue in a test EBook generated initially in InDesign. All the items in the first (frontis) page should be centered, but aren’t. However the titles in each chapter (added using exactly the same styles!) appear fine.

 
To further confuse, testing the identical book in Adobe Digital Editions shows the required formatting.

So in the immortal words of developers everywhere, what the?

 
It turns out the problem is not in the CSS, or even in the ePUB. But with iBooks. And I thank the gurus at Pigs, Gourds and Wikis for pointing me in the right direction.

The solution is “Apple simple”, meaning its easy/obvious once you’ve been told where to look. But impossible to fathom before then.

 
Turns out iBooks has an “override” setting for justifying text. And this for some reason messes with my text-align:center. settings. The value can be changed within the Settings application. To get the centred text to appear as expected I needed to turn full justification off.
 
To demonstrate, following are the same pages from the start of the article, but now with the setting changed. Nothing was modified in the ePUB itself, only the iBooks configuration.
 

All is right with the world.

Share
Posted by steven on August 18th, 2010

Read More

iPad VGA Adapter selective with output – no iBooks

Add your comment

I just purchased the VGA adapter for the iPad so I could use it to present some content. However it works in a slightly misleading manner.

Not all iPad screen output is automatically pushed out to the device when plugged in. For example I navigate through my video files in iTunes on the iPad (external screen blank) until I click Play. Then the video appears (and works flawlessly) on the external monitor. But the iPad screen freezes and shows a still frame.

Similarly with iPhoto. I can navigate through images and folders only on the iPad. My pictures only appear on the external monitor when I start a slide show.

So those two limits are perhaps manageable. But the killer was iBooks. I had a presentation to give but not having Keynote installed on the iPad I instead exported as a PDF and added to iTunes for viewing via iBooks. However there’s no VGA ‘output’ for any content in iBooks. So the external monitor remained frustratingly black.

So short of buying Keynote for the iPad, my only other option would be to export as a movie and watch through iTunes. How painful is that!

Here’s hoping there’s a configuration setting I missed…….

Share
Posted by steven on July 23rd, 2010

Read More

Building and publishing an eBook on your iPad

2 Comments

When you start researching online how to publish an eBook, the focus is strongly on commercial release to the general public.

However, particularly in the corporate world, you may not want to make your book publically available. So how do you get all the benefits of an eBook on the iPad (and/or the excuse to buy an iPad for business use) but without releasing your internal documents to the world? After some research, trial and error, the process is really quite simple.

To have your very own library on your very own iPad just three steps are required:

  1. create a valid eBook
  2. drag that book into iTunes, and
  3. synchronise your iPad with your updated iTunes library.

Your personal eBook will then be available on your iPad, right there alongside, and indistinguishable in quality, your John Grisham collection. Or your Alice in Wonderland collection if still stuck in a region – like here in Australia – with no functioning iBooks store.

Step 1. Create a valid eBook

While this may appear daunting it’s really straightforward once you realise a few simple truths.

  • iBooks supports eBooks produced in the standard ePub format (read more on Wikipedia)
  • an ePub book is simple a zipped folder with a different extension (changes .zip to .epub)
  • within your eBook your content must be included as XHTML files, one file per chapter
  • accompanying your content are a variety of XML files that define the structure and order of your content

Sample ePub contents - just XHTML and XML files
And that’s it. You don’t need anything more complicated than a text editor and a folder zipping tool. It’s so simple I strongly recommend you (at least the first time) build one manually. It’ll give you a much better understanding of how it all comes together, and what options you have in defining and manipulating your content.

There are several tutorials online to help guide you through the process to build an eBook.  I recommend you follow this one from jedisaber. Download the sample file provided and follow the steps.

If your experience is the same as mine, most of the issues you’ll face when generating your first book will be in producing valid XHTML content. As such it’s recommended you build and validate this first. Issues I had included:

  • incorrect nesting of tags
  • not closing tags (particularly the img and br items)
  • missing attributes (particularly alt on all my images)

However use a decent XHTML validator (if not using Safari – which tests automagically – go for the master and use the one from W3C) and you’ll get through them.

Outside the XHTML the only other issue was in ensuring all the content files were encoded correctly:

Set encoding in BBEdit (OSX)
On the Mac I was using BBEdit. It gives you an option in the Edit Window to set the encoding: pick UTF-8. Note I also picked Windows CRLF because I was using a PC to package the book, more on that later.

Set encoding in Notepad (Win7)
On the PC I was using Notepad to edit. It allows you to set the encoding when saving. Again, choose UTF-8.

 
Once all your content is complete and valid, you can then compile your book in the folder you’ll then zip and rename to become the finished ePub. Follow the instructions (and sample) from jedisaber:

  1. ignore mimetype and META-INF (content does not need to change from one book to the next)
  2. load your valid content into OPS folder, documents and images (use subdirectory for your images if you set the URLs in your content to match)
  3. edit content.opf (XML file) to list all your content (and only your content – remove references to sample files not used). Make sure the URLs are correct, particularly if using subdirectories in OPS to organise your content
  4. edit toc.ncx (XML file) to list your content in the order to be navigated and with the section/chapter titles as you want them to be shown
  5. ZIP the folder
  6. Rename the folder from a .ZIP extension to a .ePUB extension

Be careful generating the ZIP version on a Mac using the built in compression tool. Not only does this incorporate all the hidden OSX files (DS_Store, etc) it also seems to put an extra folder layer in. I was only able to generate the correctly formatted ZIP file using Winzip on a PC.  This also allowed me to set the compression for the mimetype file to 0% as requested.

Note I managed to resolve the “extra folder” issue in OSX. Trick is not to choose your eBook folder to compress. Instead select the contents of that folder (should be three things: mimetype and META-INF and OEBPS folders) and compress them. You’ll get an Archive.Zip file you can then rename. This doesn’t resolve the potential issue with hidden files but I’ve not had any issues with ePUBs built this way since.

I then suggest you validate the eBook prior to the move into iTunes. Use the online threepress tool – it’s free. It may identify a few items you’ll need to return to your source to resolve. Just make the edits, rebuild/rename the ZIP and try again.

With that tool the only error I was not able to get rid of concerned the length of the first filename. I’m guessing this is because the requirement is for mimetype to be the first file in the ZIP file but I could not find any way to enforce this. However even with this error I did not get any issues with the subsequent steps so if you get this error, ignore it like I did.

If the book validates, then also consider testing it in a reader outside of iTunes. I used the bookworm from O’Reilly. Alternatively try Adobe Digital Editions, a free download so you can test your books without a web connection.

Step 2. Drag into iTunes

Simply open iTunes, select your Books folder, and drag your .epub file into the window. If all works well you should see your book listed, with its cover appearing in all its glory.

Note you cannot open/view/test the book from here. That only happens when you get it onto the iPad.

Step 3. Synchronise and launch on your iPad

When you sync your iPad just ensure its set to include all new eBooks. Your file will then get copied across and be ready for use. Congratulations!

Next steps

Using XHTML it’s straightforward to include text and images in your content. So feel free to improve on your content’s richness. Also consider adding a stylesheet (include in your content.opf file, as well as referenced in your XHTML) to further enhance the presentation.

You can easily add a nicer title/cover page so your book looks better on the shelf. Either build in XHTML or just create as a nice image and include.

From this foundation, the next step for me is to see if possible to include some richer media in the book. For example a video or audio snippet. We’ll see how that goes….

Resources

Note: All the online tools listed here require you to upload your content to their servers. Be mindful of how secure you want/need your content to remain before using any of these tools.

Share
Posted by steven on July 15th, 2010

Read More

Move over Pixar: Instant animated movie with Xtranormal State

1 Comment

Like a lot of people, I stumbled across this hilarious video lampooning the typical iPhone buyer (NSFW, language warning towards the end).

Once I stopped laughing I was curious about the tool used. The good news is the tool is great, fast, and free (ish).  It’s called State.

State works by simple animating chosen characters to reflect a written script that you enter.  It does the text-to-speech conversion for you.  Simple and effective approach.  But then what makes it even better is the ability to add gestures, facial expressions, camera moves, sound effects, etc through your script.  The beauty of this approach is you bang your words in and get the first draft almost as fast as you can type.  Then it’s up to you how much you gloss it up afterwards.  My first pass at a 1 minute teaser video for an internal newsletter took 20 mins (and that included learning how to use the tool).  Spicing it up added an hour.  And that was that.

Two versions: online or download exe
You can use State online or download the executable (Windows only).  Which to choose?

  • downloaded version only gives you a single scene and single character when installed.  After that it connects you to an online marketplace where you can purchase additional characters, scenes, voices, at  costs from USD $1 – $15 (July 2010).  For a conversation style you can download Sarah Palin and Larry King for free, which explains why they ended up in my first film.
  • online version gives you a lot more characters and scenes to choose from (although nothing with more than 2 characters).  But it only allows you to publish online (Youtube, Facebook, Twitter).  The downloadable version gives you additional options to export as MPG, MOV or AVI video files. 
  • even with the downloaded version you need to be online when working as it requires you to create and register into an account (this is what determines what bonus features you have).  To work offline what I needed to do was login while online, and then not logout/close-down when moving to offline time.
  • the online version was reporting serious delays in previewing content, due to high usage.  Not such a long wait with own copy.

Mainly for the ability to work offline I went for the downloaded version.  Worked fine once I got past the online-to-register issue.

Conclusion

State is a great tool if looking for something very quirky and engaging for some brief communication or announcement.  It will quickly get stale if overused.  So have fun with it now.

Share
Posted by steven on July 14th, 2010

Read More

iWorks Pages: Adding vertical column headings

Add your comment

Pages is a glorious tool for drafting documents, particularly if you’re sick of working on documents from people who think every possible style permutation is acceptable and to be added by editing font sizes and layouts directly.

However every now and then you find missing a feature you take for granted in the opposition.  One of those is vertically aligned column headings.

To add such headings in Pages:

  1. Generate your table to get an approximate size for your heading cell.
  2. Create a textbox the same size as the heading cell. Use the Metrics inspector to help size the box and change the rotation to 90 degrees (to read bottom to top) or 270 degrees (to read top to bottom)
  3. Enter the required text – note it will flip back to horizontal while you type.
  4. Apply the required styles and alignment so you’ve an accurate picture of how large it needs to be.- Check the wrap inspector to ensure the text box does not cause wrapping
  5. Drag the text box over the top of the column heading it is to provide
  6. Do some final edits to coordinate the size of the text box and the column.

And that’s it.

If needing to add vertical headings to multiple columns it’s easier to duplicate the first one (click Option-Drag) and edit, rather than creating several from afresh.

Share
Posted by steven on July 12th, 2010

Read More

« Older Entries
Newer Entries »