Our office uses GoogleDoc spreadsheets as a way of collaborating internally and with the different language services. We use them to help manage the translations for app and website navigation across more than 60 languages. And we’re encouraging newsrooms to use the spreadsheets with TimelineJS to create interactive timelines. Recently we experimented with using TabletopJS and Google spreadsheets to help facilitate the translations for an interactive project.
For the 60th anniversary of Joseph Stalin’s death, we partnered with Radio Free Europe / Radio Liberty (RFERL) to create a page that looked at his life and legacy. The project needed to be capable of being translated into multiple languages.
It’s a fairly straightforward task to translate text. It’s more of a challenge to translate graphics. For this project we tried a number of different approaches:
- We used static images of graphics without any text and kept the text in the surrounding HTML.
- We inserted SVG graphics. SVG is an XML-based way of creating vector graphics. In order to translate the graphic, the editors had to manually dig through the XML tags and translate each one.
- We experimented with different charting services.
- And finally we created a simple interactive graphic with RaphaelJS that used a Google spreadsheet for the data and labels.
The map of the former USSR showed over 20 years of forced migrations where millions of people had to leave their homes. Over a million of them died in the process.
Building the Graphic
The spreadsheet includes the year, population, number of people and the reason they were forced to move. The spreadsheet also includes a column for the map locations and navigation terms.
Once we had the graphic working in English, it was a fairly straightforward task to support additional translations.
We shared the spreadsheet with the different language services. They duplicated the main sheet of spreadsheet, naming each new sheet with the name of the language. As long as the column headers and the organization of the data remained consistent between the pages, we could redirect TabletopJS to the Belarusian, Persian or Romanian sheet. We then used jQuery to replace the graphic text with the appropriate translation to create a Belarusian, Persian or Romanian map.
Why This Helps
Graphics can be difficult to translate for several reasons. The data may be stored in a database with limited access. It may be buried in a dense nest of code and tags. It may be hidden inside of a third party tool like Flash. Or it could be part of a flat, static image file. These methods all require additional time and technical skills to help translate.
By using a GoogleDoc spreadsheet:
- We’re separating the data from the presentation
- We’re sharing the data in a format that people are likely familiar with
- And when you combine it with TabletopJS, you have a quick and easy way of connecting the data with the graphic.
- – - – -
Do you publish content in multiple languages? How do you handle graphics? Post in the comments section below or tweet us @BBGinnovate.
- – - – -
(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)
Latest posts by Brian Williamson (see all)
- Illustrating “Wild Pigeon,” an allegory of government repression - August 18, 2014
- Creating responsive graphics and streamlined images for VOA’s World Cup coverage - August 14, 2014
- Creating Jon Stewart Moments with TV News Archive and KettleCorn - January 23, 2014
- Journalism stories transformed into interactive videos with KettleCorn - December 4, 2013
- KettleCorn: A journalist’s tool for enhancing interactive audio and video stories - October 25, 2013