Digital Publishing Suite 101: Keep Text Sharp in Raster Slideshows

One of my favorite new features in Digital Publishing Suite over the last year or so was the addition of raster/vector settings for PDF formatted overlays. Before that, all overlays were rasterized…even if the folio was created using the PDF format. Because of that, text contained in an overlay tended to look a bit pixelated, especially on a retina iPads.

In case you’re not sure what I’m referring to here, let’s take a quick look at how this works and then we’ll talk about the pros and cons of vector and raster overlays. In the screenshot below, I have an multi state object selected in InDesign and Folio Overlays panel open to the slideshow pane. From there I can choose whether to use raster or vector format.

With an MSO selected you’ll be able choose your slideshow options from the Folio Overlays panel

Black and white, or gray?

Seems pretty straightforward, right? If there’s text in the MSO we should choose Vector to keep it sharp. Well, maybe, but maybe not.

Here’s the issue. Vector overlays use PDF format to keep text sharp and they take a second or so to render if they’re simple. But if your slides are graphic intensive they can take several seconds to pop into focus. While that’s happening, your reader could become pretty annoyed so you’re left with a choice; use vector and deal with the rendering delays (and the lousy user experience) or choose raster and deal with the potentially pixelated text.

To give you an idea of what I’m talking about let’s see what the text looks like, on a retina iPad when Raster is chosen for the format:

Not real pretty as you can see. It would seem that choosing vector would a better way to go, but as I’ve already mentioned, any large images are going to take too long to render. The stock response that I’ve read and given in the past was to choose the lesser of two evils which was usually to deal with the poor text quality.

Not one to compromise, I started thinking about ways to overcome this and I finally came up with something that I’d like to share here.

The Workaround

We’ll start off with the same text frame but before we doing anything else, we’re going to cut it to the clipboard. Next, we’ll draw an empty graphic frame, a bit larger than the text frame we’ve cut. Make sure the new frame has no fill and no stroke and while it’s still selected choose Edit>Paste Into. As long as the frame was larger than the original text frame it will be pasted exactly where it was when you cut it. Finally, with that frame still selected, right click and from the contextual menu choose Fitting>Fit Frame to Content.

At this point you should have something that looks like this:

A quick look at the layers panel shows the graphic frame containing the nested text frame.

With that done and the frame still selected open the Scrollable Frame pane in the Folio Ovelays panel and choose the settings as shown in the following screenshot. The most important of these choices is Vector.

Because the scrollable frame is the same size as the content, nothing will scroll but we’ll still force the Folio Builder to turn it into a separate overlay and keep the text sharp.

The final step is to select the graphic frame and multi state object and choose the add object to visible state button on the bottom of the Object States Panel:

Now let’s take a look at the results on the iPad after updating the folio. For the purposes of this demonstration, I’ve left the original text and added the new text in the scrollable frame for comparison:

As you can see there’s a dramatic difference in quality here. I should note that before taking this screenshots I did zoom in, but that’s something your readers may do also. The results will certainly be dependent on your design and the fonts that you’ve chosen.

Is is worth the extra work? Well, only you can decide but at least now there’s a way to have your cake and eat it, too.

What do you think? Is this something you can see yourself using?