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

October 12, 2017: The Index and Website Guide have been improved to give greater accessibility


October 12, 2017: The results of a search can now be displayed one graphic at a time. So to run through the latest graphics, select the language flag on the top bar, and then the display option you want


November 1, 2017: The bulk of our Olympics graphics package will be available. Some already released


Please get in the habit of logging in when you arrive as some pages may soon be restricted


If you need help or have questions, please contact us

Cookies