Я хочу рассказать вам о том, как при помощи Inkscape и инструментов рабочего стола GNOME можно создавать локализованную графику.

Перед началом работы

Стоит помнить, что переводы всегда будут разной длины. То, что на упрощённом китайском будет выражено кратко и лаконично, на бразильском португальском может занять целое предложение. Поэтому у рисунков должен быть определённый запас свободного места вокруг слов. В SVG вы можете определить область завёрстанного текста. В Inkscape это делается текстовым инструментом: просто щёлкните им по холсту и потащите, рисуя рамку, введите текст и отцентрируйте его.

По ходу действия мы создадим файлы .po для перевода, чтобы не нужно было вручную открывать и менять весь SVG каждый раз. Если вы работаете с сообществом переводчиков, этот способ намного удобнее, чем если бы вы заставляли их править руками XML или пользоваться Inkscape.

Отлично, поехали

Предположим, у нас есть графика для веба, презентация, реклама, диаграмма — да что угодно. Нам необходимо перевести её на 23 языка малой кровью.

Помните: следует избегать дублирующегося текста.

Вероятно, вам захочется использовать отбрасываемую тень, размытую маску или любой другой эффект над или под текстом. Если так, используйте для создания эффекта клоны (<use>), а не копии. Тогда, получив переводы от сообщества, вам не придётся по новой вбивать их и применять эффект.

На помощь приходит xml2po

gnome-doc-utils — отличная штука. Разработчики GNOME, честь им и хвала, создали инструмент, позволяющий вытащить текстовые строки из вашего документа XML и превратить их в переводимый файл PO.

Вот тестовый файл, на основе которого написана эта статья. Убедитесь в том, что выбрали в меню браузера пункт «Сохранить ссылку как…».

Теперь введём вот такую команду для создания файла перевода из нашего SVG:

  xml2po -a -o en-US.po chrome.svg

Создаём файлы переводов

Полученный файл мы просто берём и копируем в новые, для каждой локали:

   cp en-US.po as-IN.po
   cp en-US.po bn-IN.po
   cp en-US.po de-DE.po
   cp en-US.po es-ES.po
   cp en-US.po fr-FR.po
   cp en-US.po gu-IN.po
   cp en-US.po hi-IN.po
   cp en-US.po it-IT.po
   cp en-US.po ja-JP.po
   cp en-US.po kn-IN.po
   cp en-US.po ko-KR.po
   cp en-US.po ml-IN.po
   cp en-US.po mr-IN.po
   cp en-US.po or-IN.po
   cp en-US.po pa-IN.po
   cp en-US.po pt-BR.po
   cp en-US.po ru-RU.po
   cp en-US.po si-LK.po
   cp en-US.po ta-IN.po
   cp en-US.po te-IN.po
   cp en-US.po zh-CN.po
   cp en-US.po zh-TW.po

Переводим файлы PO

Обычно переводчики пользуются KBabel или GTranslator (сюда можно добавить и poedit — прим.пер.), которые в данном случае помогут быстро перевести текстовые строки файла SVG.

Предупреждение. Глубина положения текста в стопке объектов в SVG отражается на порядке следования строк в файлах PO, из-за чего вы можете спутать логические переходы от строки к строке. Текст в самом низу стопки объектов появляется первым в созданном файле PO.

Предупреждение для переводчиков

Строка “image/svg+xml”, которую вы видите вверху каждого файла перевода, помещается в него программой по ошибке и не должна переводиться, иначе конечный файл SVG перестанет быть корректным.

Время «влить» переводы обратно в SVG

Как только переводы готовы, пора перенести их в файлы SVG — каждый перевод в свой файл, именованный по обозначению локали.

   xml2po -a -p en-US.po chrome.svg > chrome-as-IN.svg
   xml2po -a -p as-IN.po chrome.svg > chrome-as-IN.svg
   xml2po -a -p bn-IN.po chrome.svg > chrome-bn-IN.svg
   xml2po -a -p de-DE.po chrome.svg > chrome-de-DE.svg
   xml2po -a -p es-ES.po chrome.svg > chrome-es-ES.svg
   xml2po -a -p fr-FR.po chrome.svg > chrome-fr-FR.svg
   xml2po -a -p gu-IN.po chrome.svg > chrome-gu-IN.svg
   xml2po -a -p hi-IN.po chrome.svg > chrome-hi-IN.svg
   xml2po -a -p it-IT.po chrome.svg > chrome-it-IT.svg
   xml2po -a -p ja-JP.po chrome.svg > chrome-ja-JP.svg
   xml2po -a -p kn-IN.po chrome.svg > chrome-kn-IN.svg
   xml2po -a -p ko-KR.po chrome.svg > chrome-ko-KR.svg
   xml2po -a -p ml-IN.po chrome.svg > chrome-ml-IN.svg
   xml2po -a -p mr-IN.po chrome.svg > chrome-mr-IN.svg
   xml2po -a -p or-IN.po chrome.svg > chrome-or-IN.svg
   xml2po -a -p pa-IN.po chrome.svg > chrome-pa-IN.svg
   xml2po -a -p pt-BR.po chrome.svg > chrome-pt-BR.svg
   xml2po -a -p ru-RU.po chrome.svg > chrome-ru-RU.svg
   xml2po -a -p si-LK.po chrome.svg > chrome-si-LK.svg
   xml2po -a -p ta-IN.po chrome.svg > chrome-ta-IN.svg
   xml2po -a -p te-IN.po chrome.svg > chrome-te-IN.svg
   xml2po -a -p zh-CN.po chrome.svg > chrome-zh-CN.svg
   xml2po -a -p zh-TW.po chrome.svg > chrome-zh-TW.svg

Теперь у вас есть каталог с файлами SVG, аналогичными исходному, но с переводами.

Экспортируем в растр

Если вы работаете в среде, где конечным файлом является PDF, этот шаг можно пропустить. При использовании FOP для создания PDF файлы SVG лучше всего прокручивать через Batik, чтобы векторной, а не растровой графики в конечном файле было как можно больше.

Итак, если следующим шагом должен быть экспорт для веба или просто передача данных на машину, где нет ПО, читающего файлы SVG, созданные Inkscape, эта команда для вас:

  for i in *.svg;do inkscape -e "${i/.svg/.png}" "$i" ;done

Каждый найденный в текущем каталоге файл SVG будет преобразован в файл PNG с таким же именем.

Сжимаем файлы PNG

Разумеется, в вебе каждый байт на счету Программа pngcrush оптимизирует размер каждого файла PNG, не потеряв ни единого ценного пиксела:

  for i in *.png;do pngcrush -brute -d tmp "$i" ;done; mv -f tmp/* .; rm -rf tmp

В этом случае pngcrush максимально жестоко (-brute) утюжит каждый найденный файл, переложив его (-d) в новый каталог (tmp), а по завершении всего цикла переносит получившиеся файлы обратно и удаляет этот временный каталог.

Эту команду необязательно вводить каждый раз. Достаточно создать файл, скажем, run_pngcrush.sh, командой chmod +x добавить ему бит исполняемости и ввести в него тот же код, предварив вызовом интерпретатора Shell:

#!/bin/sh
 for i in *.png;do 
     pngcrush -brute -d tmp "$i" ; 
 done; 
 mv -f tmp/* .; rm -rf tmp

Тогда в каталоге с файлами SVG достаточно будет просто запустить этот сценарий командой ./run_pngcrush.sh.

Вот что у нас получится в итоге:

Преимущества использования этой техники

В том случае, когда вы создаёте технические иллюстрации или диаграммы, вам может понадобиться изменить оригинал (в нашем случае — en-US). Но строки не «поплывут»: xml2po обновит (ключ -u) файлы переводов, не обращая внимания на добавленные объекты, изменённый стиль и любые изменения такого рода. Это особенно ценно в реальной жизни, поскольку менеджерам свойственно просить о смене размера иллюстраций или изменении цвета на васильковый (знаменитый cornflower blue). Подробнее об автоматизации таких вещей — в следующей статье.

Пример использования

Энди использовал эту технику для создания локализованных логотипов Open Font Library:

Автор: Andy Fitzsimon
Оригинал: http://andy.brisgeek.com/archives/45
Лицензия: CC-By-SA 3.0
Перевод и лёгкая доработка: Александр Прокудин