Changing the stacking order of objects in an anchored group in an EPUB/HTML workflow

Branislav Milic

4

Once you anchor a group of objects into a text flow, it is impossible to change the stacking order of these objects–even via the Layers panel. But there’s a trick…

First, let’s see the problem: Draw a picture frame in which you import an image, and below the image draw a text frame with the caption:

The objects do not overlap on the page, but because you drew the text frame after drawing the image frame, this text frame is above the image frame in the stacking order. Just have a look in the Layers panel for confirmation.

Of course, in print publishing you never really worried about this situation because it makes no difference in a printed document. But when exporting the InDesign document to EPUB or HTML, the order in the Layers panel is important… and if you do not change the stacking order, the caption may precede the image in the reading order.

For example:

1. Select the main story of the document.
2. On the Articles panel (via the Window menu), click on the “Create New Article” button and give it a name; the article is created and the main text flow is automatically added.
3. Group the image and the caption.
4. Grab the little square in the upper right corner of the group and drag it in the main text flow: you have just created an anchored object.
5. Now choose File > Export, choose EPUB from the Format pop-up menu, and in General > Setup > Content Order choose “Same as Articles Panel”:
   
6. In the EPUB, you will notice that the caption appears before the image:

You may try going back to InDesign, opening the Layers panel, and changing the stacking order of the image caption and the caption frame. But unfortunately, it will not work — InDesign may let you select the sublayers, but it prevents you from dragging them up or down in the Layers panel!

Fortunately, there are two fixes: A tedious, slow method and a fast efficient method. The tedious workaround first:

1. With the Selection Tool (Black Arrow), select the anchored group by clicking on it just once.
2. Right-click > Anchored Object > Release.
3. On the Layers panel, change the stacking order of the objects within the layer.
4. Drag again the little square (located in the upper right corner of the group) in the text flow to recreate the anchored object once again.

Okay, now the fast method: One of the participants (a certain Pierre B.) at one of my recent EPUB trainings found a more direct solution that does not require first releasing the anchored object:

1. With the Selection Tool, double-click the image to select the picture frame inside the anchored group.
2. Right-click on the picture frame and, from the context menu, choose Arrange > Bring to front. (Or you can choose Bring to Front from the Object menu.)

The stacking order is now correct (picture frame above the text frame)…

… and you can verify it on the Layers panel.

Finally, export the file to EPUB or HTML, and you’ll see it works there, too.

Like so many tricks, this is so obvious… but only after you learn it once.