FAQ: How does the Graphic News ai2html script differ from that of the New York Times

The method used by Graphic News was pioneered by the New York Times. They recognized that by using different arboards graphic designers could create attractive responsive graphics and could avoid bespoke coding. They also had the altruism to make the AI2HTML script available to others. To meet the needs of an agency certain modifications have been made.

  1. GN responsives use two Artboards rather than 4. The largest, Artboard 1 corresponds to a standard two-column traditional print graphic.

  2. The GN AI2HTML script produces files to match GN filename conventions and embed code. It accommodates variables. These can be used to avoid editing text on multiple artboards, and reduce the need to segment text so that words in different font characteristics (regular, bold, italic) are in different strings.

  3. The responsive graphic can be proofed on a desktop because the html produced includes the CSS required to display the correct graphic at any given screen width. This eliminates the need for additional javascript to dynamically determine which image is shown and makes it easier for websites of all types to start using responsive infographics.

  4. The text is outlined before running the script to avoid uncontrollable text movement at intermediate screen widths. This enables the designer to use the same Character and Paragraph settings as they would in a print design. This also makes it much faster to make a print graphic from one of the Artboards.

  5. Before outlining the editable text is saved in a separate layer (The Translation Layer) screened from view by a background layer. If locked it is invisible to the AI2HTML script. Views are set up so that it is possible to toggle between the Translation View and the Text View, when exchanging editable text for outlined text.

  6. The layers used are identical to those used in GN print graphics to facilitate producing a print graphic from one of the Artboards.

Welcome to Graphic News

Please get in the habit of logging in when you arrive as some pages may soon be restricted. If you are new to Graphic News there is a Website Guide to help you find your way around.

November 24, 2017 — Ai2HTML screen graphics - The script has been updated to allow multiple screen graphics to be published on the same web page. Click here for instructions

November 24, 2017 — Training - mobile graphics- The GN AI2HTML method is very fast and easy. It allows designers with conventional design skills to produce responsive “mobile” friendly graphics to meet news deadlines. Contact helpdesk @ graphicnews.com if you would like to join our next training course.

If you need help or have questions at any time, please contact us