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 How to use ai2html Frequently asked questions Settings Point text vs. area text Which attributes are converted to html and css How does ai2html work Limitations What works well and what does not Using fonts other than Arial and Georgia 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 a Mac running Adobe Illustrator CC 2015, the path would be: /Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js How to use ai2html 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. Run the script by choosing: File > Scripts > ai2html 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 Why not just export my Illustrator file as an image or an SVG? Text in images and SVGs scale as you scale the image — so your text becomes unreadable pretty quickly as the artwork scales down, or looks hilariously large as it scales up. By rendering the text as html, we can scale the “graphic” up and down, but keep the text readable at the same font-size and line-height. This is important because we are trying to reduce the number of versions of the artwork that we have to create in order to accommodate viewports that range from mobile phones up to giant desktop monitors. An example of this is here: http://nyti.ms/1CQdkwq Change your window size when you view the page and you’ll see the artwork scale but the text stays the same size. More examples here: https://del.icio.us/archietse/ai2html+responsive When Illustrator saves an SVG, every line of text is broken into separate SVG elements which makes editing the text very difficult. By having the text rendered in HTML, it is much easier for editors to go into the CMS and make edits without having to wade through a tangle of SVG code. Settings There are several ways of customizing the output of the script: Config files Special text blocks ai2html-settings ai2html-css ai2html-js ai2html-html ai2html-text Layers palette Artboards palette Attributes palette Config files The script will look for files named ai2html-config.json in two locations: the Illustrator scripts folder where the ai2html.js file is located and the folder containing your .ai file. Any settings contained in these files will override the default program settings, and will be overridden by any settings contained in the .ai file (see “Special text blocks” below). Configuration data should match the format of the defaultSettings object near the top of the ai2html.js file. 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 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: image_format Possible values: png png24 jpg svg Default: png You can specify more than one image format to be output by listing the desired formats separated by commas. This can be useful if you want to see which image format has the smallest file size. The first format in the list will be the only one referenced in the html. See example for SVG output. responsiveness Possible values: fixed dynamic Default: fixed dynamic responsiveness means that the ai2html divs will scale to fill the container they are placed in. fixed responsiveness means that the ai2html div will appear only at the size it was created in Illustrator and will not change sizes if the container it is placed in changes size. output Possible values: one-file multiple-files Default: one-file one-file output means that all artboards will be written into one html file. multiple-files output means that each artboard will be written to separate html files. html_output_path Default: /ai2html-output/ Use this if you want to redirect the output to a different folder. The path should be written relative to the location of the ai file. html_output_extension Default: .html Use this if you want to change the extension of the html partial. image_output_path Default: Use this if you want to change the path of the images that are placed behind the html text. This path should be written relative to the location of the html_output_path. image_source_path Default: if not set, image_output_path will be used In some scenarios the relative path between published html and images is different from how the files are stored. Use html_source_path to specify the location from where the images are loaded in the tags. This does not change where image files are stored. local_preview_template Default: Use this to specify a page template into which the html partial will be inserted to preview your artwork in the context of your site architecture and css. Sample templates can be downloaded from the ai2html Github repo. Any variables from ai2html-settings or ai2html-text blocks can be inserted into the templates using either mustache (eg. {{headline}} ) or ejs/erb (eg. <%=headline%>) notation. The ai2html partial can be inserted using the <%=ai2htmlPartial%> variable. png_number_of_colors Possible values: Any integer from 2 to 256 Default: 128 Use this to specify the quality of png or png24 images. jpg_quality Possible values: Any integer from 0 to 100 Default: 60 Use this to specify the quality of jpg images. headline leadin notes sources credit Possible values: Text with no line breaks These fields are used to populate fields in the local_preview_template and can be written to a “config” text file along with the html. The config file is written in yml can be used to pass parameters to a cms. Other options that can be added to the settings text block: max_width Possible values: Any positive integer Default: Specifying a max_width inserts a max-width css instruction on the div containing the ai2html partial. The width should be specified in pixels. create_config_file Possible values: true false Default: false Specify true if you want the script to also output a text file in yml format containing the parameters you want to pass to your cms. config_file_path Default: Example: /ai2html-output/config.yml Enter the full path to the file including the filename that you want the config file to be named. The path should be written relative to the location of the Illustrator file. png_transparent Possible values: yes no Default: no This option enables transparency for any png image that is output by the program. Note that specifying transparent pngs can result in a visible degradation in image quality. Using image_format: png24 can help prevent this. center_html_output Possible values: true false Default: true Specifying true on this option causes the ai2html div to be centered within the container it is placed in. use_2x_images_if_possible Possible values: yes no Default: yes Specifying yes on this setting tells the script to output images at double the resolution if possible. The script uses limits specified in this document to determine if the size of the image is too large to make it double resolution. clickable_link Default: Use this to wrap the entire graphic in an tag pointing to the given URL. testing_mode Possible values: yes no Default: no Specifying yes on this setting causes the text in the file to be rendered both on the image and in the html. This is useful for testing whether the placement of html text is consistent with the Illustrator file. render_rotated_skewed_text_as Possible values: html image Default: html Specifying image on this setting causes rotated and sheared text in the file to be rendered on the image instead of the html. See example. project_name Possible values: Any string Default: [ai file name] By default ai2html will use the filename of your Illustrator document as the project name but you can specify a project_name to overwrite this. The project name will be used to name the exported HTML and image files. 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