Today's Course Outline

1. Rendering text as images
2. Rendering live text
3. A note about font licensing
4. Rendering text as SVG
5. Choosing the right option for your project

Rendering text as images

The fastest and easiest way to match your InDesign layout is to render text as images (in5's default Text Rendering option).

Here are the options in the Easy Export dialog.

Here are the options in the full export dialog.

In this case, the HTML output will be almost identical to the InDesign layout.

Since the text is rendered as an image, it is no longer selectable or searchable. However, in5 will automatically include up to 255 characters of the text content in the alt attribute for screen reader accessibility and search engine optimization (SEO). You can also manually set alt text.

Rendering live text

You can also render live text which is searchable and selectable. There are 2 different live text options* available:

• HTML with Web-Safe Fallback Fonts
• HTML with Local Font Embedding

* These appear as a single option, Editable in the Easy Export Dialog. If you have a license copy, the Easy Export option using embedded fonts. If you're running the demo, it uses web-safe fonts.

Fallback Fonts

Fallback fonts create the smallest file size of any output option. The text is stored as plain characters and the rendering of the fonts is offloaded to the viewer's device. Since there's no way to guarantee which fonts the viewer has installed, a series of "fallback" options are included in the Cascading Style Sheet (CSS) styles.

The term web-safe refers to a common list of fonts that are installed on almost every device.

Here's a live example of in5 output using the Fallback Fonts option. Try selecting the text.

In this case, the Baskerville font family was used for the bullet points. Based on the characteristics of that font family, in5 generated the following CSS:

font-family: Baskerville, Georgia, serif;

If the viewer doesn't have Baskerville, then Georgia will be displayed. If Georgia isn't available, then the default serif typeface will be used.

While this option is extremely lightweight, it has the most potential to deviate from the original layout.

Local Font Embedding

What if you want selectable, live text and you want to use the fonts from your InDesign document?

If you choose the Local Font Embedding option, in5 will automatically copy fonts into the output and write @font-face rules.

The text won't render exactly as it does in InDesign, but it will be reasonably close.

Open Type formats (.otf files) seem to work well on most devices. If you'd like in5 to generate CSS for multiple font formats—such as those generated by Font Squirrel—to increase device support, you can simply place the files into the same folder as the original font and make sure they have the same name.

For example, if your main font was named myCustomFont.otf and was located in the myfonts folder, in5 would automatically search for any other files named myCustomFont in the myfonts folder. Supported file formats include:

• .otf
• .ttf
• .eot
• .woff
• .svg

Local Font Embedding sounds like the perfect option, right? Why would you choose any other option? Font licensing.

Most fonts were licensed prior to the introduction of font embedding on the web, so the fonts on your computer may not support embedding files to the web (or apps).

The easiest way to get around doing a lot of research about font licenses is to use free typefaces from Google Fonts.

Rendering text as SVG

Rendering text as Scaleable Vector Graphics (SVG) is similar to rendering text as images.

Some of the appearance can be lost with SVG (e.g., paragraph rules), but SVG has one big advantage: scaleability.

Crisp, clean scaling is particularly useful on High Definition (aka Retina) displays.

in5 offers options (in the Advanced section of the dialog) to render text images at higher resolutions, but with higher quality images comes larger file sizes. This is not the case with SVG, which is made of mathematical points, rather than pixels.

Choosing the right option for your project

This table matches the project priority to the different Text Rendering options.

*Another thing to consider is the type of document you're exporting and how long your text frames are. For example, if your document was designed for a tablet and has smaller blocks of text, you have more flexibility.

If you have a document with long, flowing stories, rendering text as live HTML could have a large impact on your layout, even if you choose to embed local fonts.

The reason is that each browser renders text differently—differently from other browsers, and differently from InDesign. In short text frames, these differences may not be noticeable, but in a long block of text, little differences (i.e., where each line breaks) can add up to big differences when the text reaches the bottom of the page.

In such a case, rendering text as images is probably the best option because it will preserve the appearance of the long text blocks.

We would not recommend SVG in cases where there are long blocks of smaller text, because it will require a lot of data to store all the points and curves of each text character. With large amounts of text, SVG file sizes can get quite large.