Versiona gràfics SVG en diferents idiomes còmodament i a l’estil de gettext
Descripción de una solución basada en expresiones regulares desarrollada para facilitar la traducción de gráficos SVG a diversos idiomas
Vull compartir-vos SVG Translation Mill (repositori a github: https://github.com/toniserna/svg-translation-mill.git)
un lot de dos bash scripts desenvolupats per jo mateix.
Si prefieres leer en castellano puedes hacerlo en el blog de informatica.escuelaedib.com
SVG Translation Mill es capaz de “moler” cualquier Scalable Vector Graphic y ayudarte en el proceso de traducirlo al idioma que te apetezca, tanto si lo vas a traducir personalmente como si vas a pedir ayuda a otra persona para que lo traduzca. En éste último caso las ventajas de usar este sistema son muchísimo mayores.
SVG Translation Mill és capaç de “moldre” qualsevol Scalable Vector Graphic i ajudar-te en el procés de traduir-lo a l’idioma que et vingui de gust, tant si l’has de traduir personalment com si necessites a demanar ajuda a una altra persona perquè el tradueixi. En aquest últim cas els avantatges d’usar aquest sistema són moltíssim més significatius.
La idea de fer aquestes utilitats vé de quan vaig posar en contacte en René Mérou (H) amb un amic indonesi que s’oferí a traduir el seu mapa conceptual del Programari Lliure a l’indonesi. En comptes de fer-li arribar la versió en anglès del seu diagrama, li va distribuir un arxiu de text .po amb les cadenes a traduïr. Fa poc em vaig trobar amb una necessitat similar, vaig cercar, fins i tot vaig demanar-li a en René com gestionava aquest procés (encara no ho he aclarit). Com que no vaig trobar el que volia vaig pensar que si duplicava una feina que ja existeix com a mínim hauria après moltes coses en el procés, sembla que és així i si em donau la vostra opinió encara n’aprendré més.
SVG-TRANSLATION-MILL Licensed under: GPLv3
El problema
Si topes amb un gràfic vectorial SVG interessant, diem que es tracta d’un mapa conceptual, una infografia, el diagrama temporal del fil d’esdeveniments de Pulp Fiction o el que sigui, pot ser que et resulti interessant traduir-lo a un altra llengua.
Sense cap ajuda addicional, la traducció s’ha de fer sobre una còpia del document original mitjançant un editor capaç de manejar aquest format, per exemple Inkscape i altres. El que hauràs de fer és anar text per text (uns poden ser grans, altres minúsculs) i sense deixar-te’n cap, traduir-los directament amb el teu programa de disseny vectorial.
Aquest escenari es torna molt més incòmode si has de gestionar diverses traduccions d’un mateix gràfic i has de menester demanar ajuda a una altra persona per a la tasca de traducció. Primer hauràs assegurar-te que l’altre té instal·lat un editor de gràfics vectorials compatible amb SVG. Segon, ha de saber usar-lo mínimament, sinó l’estaries obligant a fer un esforç addicional que no té res a veure amb la seva tasca: traduir. Finalment, suposant que tens això, no t’estalviaras revisar com ha quedat el gràfic traduït, no sigui cosa que hi hagi elements descol·locats, desapareguts, etc.
NOTA. Sobre el format SVG
Un comentari breu com a resum i opinió.
SVG és una meravella de format i no només perquè és obert
Si no és més popular és en bona part culpa d’Adobe, que encara que el suporta en el seu Illustrator, ha preferit abusar de la seva posició predominant al mercat i proposar un format privatiu propi, el dels arxius “.ai”
Us explico algunes coses que podeu fer amb un SVG que millor no intenteu amb un arxiu .ai:
Obrir-lo amb un editor de text, modificar-lo i entendre com està estructurat per dins. En realitat és XML.
Obrir-lo i modificar-lo amb un munt d’editors lliures, pels quals no has de pagar llicències ni et limiten altres llibertats.
Desenvolupar una eina de disseny que entengui arxius .ai sense pagar drets a Adobe (m’imagino que aquest privilegi deu costar una milionada important).
Incloure-hi animacions. Sí, companys, un .svg admet animacions.
Obrir-lo directamente amb Firefox o Chromium. La majoria de navegadores son capaços de renderitzar directament un SVG en pantalla, atès que SVG és un format de la Worls Wide Web Consortium.
Tenir hipervincles operatius dins el gràfic que es mostra al navegador, respondre a esdeveniments del ratolí, incloure elements interactius etc.
Disposar d’una eina com SVG-Translation-Mill per a assistir-te al procés de traduccció
Em reafirmo, una meravella que un dels formats més populars encara fa millor. A veure si qualque dia la comunitat de dissenyadores i dissenyadors li fa el cas que es mereix.
La solució que proposo amb SVG Translation Mill
SVG Translation Mill consisteix bàsicament en dos scripts per al shell bash: svg2po.sh i po2svg.sh, amb els quals es pot obtenir un fitxer en un format similar al dels fitxers “.po” a partir d’un “.svg”. Llavors podem traduir aquest fitxer amb un editor de text i finalment generarem un nou gràfic incorporant les traduccions sense tocar per res el gràfic original.
Instal·lació
Està previst generar un paquet Debian que automatitzi les següents passes d’instal·lació, però fer-ho a mà no és gens complicat:
# Necessitaràs ‘pcregrep’ una ordre semblant a ‘grep’
# però que és capaç de treballar amb expressions multilínia
sudo apt-get install pcregrep
# Situa’t en el directori que prefereixis amb ‘cd’ i
# descarrega’t els dos scripts esmentats (o tots els
# fitxers del projecte; README, TO_DO, LICENSE, Logos etc.)
# Per a descarregar només els dos scripts:
wget https://github.com/toniserna/svg-translation-mill/blob/master/po2svg.sh
wget https://github.com/toniserna/svg-translation-mill/blob/master/svg2po.sh
# Com alternativa a la comanda anterior: Descarrega
# un .zip amb tot el material del projecte punxant sobre
# aquest enllaç:
# https://github.com/toniserna/svg-translation-mill/zipball/master
# (llvors hauràs d’extreure tot el contingut d’aquest .zip
# al directori que prefereixis)
# Assegúra’t de que els scripts són executables
chmod a+x svg2po.sh po2svg.sh
# Segueix el flux de treball que es detalla a continuació
Ús de SVGTM, un cas pràctic
Posem-nos en situació: estàs creant el diagrama conceptual “Com Fer Preguntes de Manera Intel·ligent” que pots descarregar-te en aquest artícle. El nom de l’arxiu és Como Preguntar_es-ES.svg i té bastant text escrit inicialment en castellà.
1. Edites, compons i formateges el document usant Inkscape o un altre programa capaç de treballar visualment amb arxius SVG. Convé que tinguis en compte alguns aspectes importants quan pensis en la possibilitat de traduir aquesta feina a altres idiomes:
Planteja’t que aviat et serà útil que tinguis una versió en anglès. És més fàcil trobar algú que tradueixi de l’anglès a l’indonesi que del gaèlic a l’indonesi.
Pots facilitar molt la feina de la traductora si fas servir una i només una caixa de text per a cada frase amb sentit. Evita partir frases en diverses caixes i posar més d’una frase en la mateixa caixa.
No converteixis els textos en corbes o camins, SVGTM no podrà reconèixer-los. Tampoc esperis que els textos que apareguin en imatges de mapes de bits incrustades puguin ser processades
2. Des d’Inkscape exporta teu diagrama a mapa de bits. Et serà útil per enviar al traductor en lloc del SVG. Inkscape per defecte et generarà un ComoPreguntar_es-ES.png pero no és mala idea que amb Gimp o amb un altre editor d’imatges el converteixis en ComoPreguntar_es-ES.jpg, és bastant difícil avui dia trobar algú que tingui problemes per obrir un .jpg, però en conec bastants que no saben què fer amb un .png
3. Obre un terminal i situa’t al directori on has baixat els arxius de SVGTM. Per simplicitat suposaré que també en el mateix directori tens ComoPreguntar_es-és.svg. Posa en marxa el molí amb la següent comanda:
./svg2po.sh ComoPreguntar_es-és.svg
Això crearà al mateix directori un fitxer anomenat ComoPreguntar.svg.po . És un arxiu de text pla en el qual s’han bolcat totes les cadenes de text del teu diagrama. Presentarà un fomat com el següent:
msgid “Cadena de text original 1”
msgstr “-”
msgid “Cadena de text original 2”
msgstr “-”
msgid “Cadena de text original 3”
msgstr “-”
…
4. Envia a la traductora els dos fitxers: ComoPreguntar_es-ES.svg.po i ComoPreguntar.jpg. Explica-li que pot mirar el .jpg i que ha d’escriure els textos a ComoPreguntar_es-ES.svg.po, que ha de fer servir un editor corrent com Gedit, EMACS, VIIM o Notepad (millor evitar OpenOffice Write, Word i altres processadors de text) i que te l’ha de retornar respectant el seu format. Aquest arxiu, un cop acabada la traducció, per dins hauria de tenir el següent aspecte:
msgid “Cadena de text original 1”
msgstr “Cadena traduida 1”
msgid “Cadena de text original 2”
msgstr “Cadena traduida 2”
msgid “Cadena de text original 3”
msgstr “Cadena traduida 3”
…
Nota 1: Les cometes (“) són literals, cada cadena ha de començar i acabar amb el caràcter ”
Nota 2: Moltes traductores professionals utilitzen programes especialitzats per traduir arxius .po: PoEdit, Virtaal, etc. En principi no hi hauria problema per usar-los, ja que els arxius que crea svg2po.sh segueixen una versió simplificada però compatible amb el format .po. Els he estat provant, però en alguns casos, aquests arxius espatllen el format que necessita SVGTM. Per exemple parteixen les cadenes traduïdes en diverses línies delimitades per “…” i això a SVGTM no li agrada, les cadenes corresponents a una caixa de text han de quedar en una mateixa línia entre cometes.
5. Ja tenim el ComoPreguntar_es-ES.svg.po traduit, es ben hora fer rodar de nou “el molí” per aconseguir una farina banca i fina. Tronam al terminal, a la mateixa carpeta de treball d’abans, on hi haurem copiat l’arxiu .po que ens ha tornat la traductora, escrivim:
./po2svg.sh ComoPreguntar_es-ES.svg
La nostra “farina” la constitueix un nou arxiu que trobareu a la mateixa carpeta denominat ComoPreguntar_es-ES.svg_translated.svg
6. Obre ComoPreguntar_es-ES.svg_translated.svg amb Inkscape. I bingo! hauries de veure el mateix document original, però amb els textos traduïts per la teva amiga. Veuràs que els textos que abans estaven partits en diverses línies, ara apareixen en un sola línia. No és un error, esbrinar la forma més convenient de partir les frases en diverses línies és una feina que po2svg.sh no farà, a més la longitud d’un text traduït pot tenir poc a veure amb la longitud del text original. Per això no hi ha més remei que amb ajuda de l’Inkscape, reorganitzar els textos i els elements gràfics que hagin de menester ser adaptats a la mida de grandària dels nous textos.
7. Feina feta! Arxiva i canvia els noms als arxius si vols.
Problemes coneguts
La primera línia de cada text ha de ser un “bon identificador”: ha de ser únic i a més, no pot ser una subcadena inicial de cap dels altres identificadors. S’entén millor si explico un exemple de situació problemàtica:
Imaginem que al .svg hi ha dues caixes de text amb el següent contingut, una diu:
NO
ENTRY
I l’altra:
NO WAY OUT
Això és un problema, perquè el “NO” de la primera caixa de text no és un bon identificador, apareix com subcadena al principi d’un altre identificador: “NO WAY OUT”. S’accepten suggeriments.
És programari lliure
Sentiu-vos en tota llibertat de fer-lo servir, estudiar-lo, comentar-ho, suggerir millores, apuntar defectes, aplaudir, compartir-lo, millorar-lo, fins i tor de comercialitzar-lo sempre respectant els termes de GPLv3. Encara que no sigui obligatori, m’encantaria saber si aquest mini-projecte t’ha resultat útil i si t’animes a versionar-lo.
No Freedom no Fun
