The best way to make your exported in5 content match your InDesign layout is to export with Text Rendering set to Images.


There are several reasons that text as images can more accurately reproduce your layout than either of the HTML text options:

  • HTML text usually takes up more space.
  • HTML text doesn't have the same equivalents for all of the available print options that can modify the appearance of text.
  • Tables handle text differently from text in a text field, so HTML text in a table will almost always take up more space than in the layout.
  • Browsers struggle to render content that is a fraction of a pixel, so some rules may not appear if they are too thin.
  • Text wrap only works under certain conditions with live text in HTML:
  • HTML text can change in appearance due to style overrides.


Text that takes up too much space or has moved


For text that is taking up more space than in the InDesign layout or has moved from its position in the layout, try the following:

  • Set Text Rendering to Images in the Basic section of the Export HTML5 with in5 dialog (in5 > Export HTML5 with in5...) or Pixel perfect in the Easy Export Wizard (in5 > Easy Export Wizard...).
  • Keep your Text Rendering set to either of the HTML text options for all of your document with the exception of the expanded or moved text by doing either of the following:

    • Use Object Export Options

      1. Select the text frame.

      2. Go to Object > Object Export Options.

      3. Select the EPUB and HTML tab.

      4. Set Preserve Appearance From Layout to Rasterize Content.

      5. Set the Format (PNG will maintain transparency).

      6. Set the Resolution to 150 for High Definition or 72 for Standard.

      7. When you export (in5 > Export HTML5 with in5...), go to the Advanced section of the export dialog

      8. Set Image Quality to Use Object Export Settings.

        For more information on converting text to images including how to set the Object Export Options as an Object Style, see How to Control Image Quality.

        The following video shows how to apply an Object Style to multiple objects at once:

        or

    • Use Render Groups as Images (which will turn any other group in your document into an image)

      1. Group the content that you want to turn into an image (if there's nothing to group with it, you can use an invisible rectangle--one with no stroke and no fill)

      2. When you export (in5 > Export HTML5 with in5...), go to the Advanced section of the export dialog
        Select Render Groups as Images


Text that appears different from the layout


When you export HTML text and the text looks different from how it was set in the layout, the text likely has style overrides.

You can view them in your InDesign layout by going to the Character Styles panel menu or the Paragraph Styles panel menu and selecting Toggle Style Override Highlighter. When that option is enabled, text that is formatted with overrides to the styles appear highlighted in cyan.


If you export with in5 and Text Rendering is set to Images, the style overrides shouldn't be an issue.


However, when you export with Text Rendering set to either of the HTML text options, in5 uses the Character, Paragraph, and Object Styles to create the CSS. If there are overrides, then in5 goes through a series of checks to try to "guess" what the style should be. These overrides can cause unintended results. So if you'd like to export with HTML text and the HTML text styles aren't rendering as expected, clear any style overrides.


Here's a video that shows how to clear the style overrides:


For more information about Text Rendering, please see Controlling Text Rendering.