ai2html

ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.

Here are examples of how we’ve used the script at The New York Times and examples of how others have used it. Share your ai2html projects on Twitter, Delicious, etc. using #ai2html.

Table of contents

How to install ai2html

Download the latest version of the script here by clicking the link and saving the file to your computer.

Move the ai2html.js file into the Illustrator folder where scripts are located. For example, on Mac OS X running Adobe Illustrator CC 2014, the path would be: Applications/Adobe Illustrator CC 2014/Presets/en_US/Scripts/ai2html.jsx

How to use ai2html

  1. Create your Illustrator artwork.
    • Size the artboard to the dimensions that you want the div to appear on the web page.
    • Make sure your Document Color Mode is set to RGB.
    • Make sure your document is saved.
    • Use Arial or Georgia unless you have added your own fonts to the fonts array in the script.
  2. Run the script by choosing: File > Scripts > ai2html
  3. Go to the folder containing your Illustrator file. Inside will be a folder called ai2html-output. Open the html files in your browser to preview your output.

Frequently asked questions

Settings

There are several ways of customizing the output of the script:

Special text blocks

The script recognizes five special types of text blocks. The first line of the text block should begin with ai2html- followed by one of the following keywords: settings, css, js, html or text. This should be the only thing on the first line of the text block. The special text blocks can be placed anywhere in your Illustrator document, but note that if you place them on an artboard, their contents will be rendered in your output.

ai2html-settings

Most of the script’s options are set in the settings text block. When you run ai2html for the first time in your ai file, the script will place a settings text block to the upper left of all your artboards. Here is a description of the settings:

Options that are included in the settings text block by default:

Other options that can be added to the settings text block:

If you want to edit the script to change the default settings, you may find it helpful to make a copy of this Google spreadsheet which makes it easier to view and edit the settings.

ai2html-css

If you want to add some css that is always inserted into your html partial, include it in a text block somewhere in your Illustrator document, but not on an artboard. Make the first line of the text block read ai2html-css. The css will be added inside <style> tags so don’t include <style> tags in the text block.

ai2html-js

If you want to add some javascript that is always inserted into your html partial, include it in a text block somewhere in your Illustrator document, but not on an artboard. Make the first line of the text block read ai2html-js. The js will be added at the end of all the html for each artboard. You will need to include the enclosing <script> tags in the text block.

ai2html-html

If you want to add some html that is always inserted into your html partial, include it in a text block somewhere in your Illustrator document, but not on an artboard. Make the first line of the text block read ai2html-html. The html will be added at the end of all the divs for each artboard.

ai2html-text

You can store text into variables and insert them into your document using basic mustache or erb/ejs notation. Any variables in the ai2html-settings or in ai2html-text blocks can be used.

To assign text to a variable, create a text block somewhere in your Illustrator document, but not on an artboard. Make the first line of that text block read ai2html-text. Each subsequent paragraph should be in the format of variable_name: Lorem ipsum dolor.. Variable names should only be letters, numbers and underscores.

Now you can insert that text anywhere in your document by placing {{variable_name}} or <%=variable_name%> where you want that text to appear.

Note that you can pass mustache or erb/ejs notation untouched to your html partial as long as the variable names don’t match the variable names in the ai2html-settings or ai2html-text blocks.

Layers palette

Artboards palette

Attributes palette

Parameters can be attached to a text object and passed to the script using the notes field of the Attributes palette. The variables in the notes field should be in the format of key: value. There is currently only one text-object parameter that can be specified here:

Point text vs. area text

The script handles point text and area text slightly differently which has ramifications on how text wraps on your web page. Fonts never appear identically in Illustrator and in web browsers. For example, the versions of Arial in Illustrator, in Chrome on a Mac and in Internet Explorer on Windows are not exactly the same — so text that fits in a box in Illustrator may be longer on IE or shorter in Chrome.

Which attributes are converted to html and css

The script processes each text object in your Illustrator file and translates the object and text attributes into inline and css styles. Each point- or area-text object is converted into a <div>. Each paragraph is converted into <p> tags within the <div>.

How does ai2html work

The script renders text as absolutely positioned html elements. The remaining art is exported as an image that is placed underneath the text in the html. Artboards can be rendered as separate divs in a single file, or as separate files. The exported files are html partials, that is, everything is enclosed in a div that can be inserted into a page template. It is also possible to specify an html page template into which the script will insert the html partial so you can preview your artwork in the context of your site architecture and css.

Text styles are applied at the paragraph level. Each paragraph is given the character and paragraph attributes of the middle character of the paragraph. Other character styles within a paragraph are ignored — though we’re hoping to add this as a feature in the future. A work-around for this limitation is to enclose text in classed <span> tags and define styles for those classes in an ai2html-css text block (described below).

Paragraphs are styled using css classes that are consolidated across each artboard. This means that all paragraphs with the same style attributes are styled with a single css class. Text blocks in the output are ordered top-to-bottom, left-to-right so that the document is somewhat readable.

Limitations

What works well and what does not

Using fonts other than Arial and Georgia

If you want to use fonts other than Arial and Georgia, you can add them to the fonts array in the constants section of the script. You will need to know how Illustrator refers to the font. Enter this name as the aifont property.

You can find the names that Illustrator uses for all the fonts used in your document by choosing Find Font… from the Type menu. You can also use the aifontname script, which will tell you the fonts used for selected text blocks.

You will need to assign each Illustrator font correspond to a specific font-family, weight and style, which will be used by the script to write the css that will be applied to your text. For example, the Illustrator font name Arial-BoldItalicMT corresponds to this css: font-family: arial,helvetica,sans-serif; font-weight: bold; font-style: italic;

You may find it helpful to make a copy of this Google spreadsheet. The fonts worksheet can make it easier to create additional font objects to add to the array.

Contributing to this project

The Github repository for this site is available at newsdev/ai2html.

Thanks

Many thanks to Gregor Aisch, Derek Watkins, Josh Katz, K.K. Rebecca Lai, Tom Giratikanon, Matt Ericson, Jeremy Ashkenas and Alan McLean for their incredible contributions to this project, as well as to my colleagues in The New York Times Graphics Department for their patient guidance.

If you’re learning to write Javascript for Adobe Illustrator, John Wundes, has many wonderful scripts. explore.js is particularly helpful for understanding what attributes are attached to Illustrator objects.


Created by Archie Tse / The New York Times

Copyright (c) 2011-2015 The New York Times Company