javascript-tutorial/server

Support for image translation (SVG)

jonnathan-ls opened this issue · 5 comments

jonnathan-ls commented

🆘 Support

Support for image translation (SVG)

🎯 Goal

Translation of an SVG image

💣 Problem

I'm following the image translation steps, according to the README file (https://github.com/javascript-tutorial/server#translating-images). But the translation is not happening… as the following video shows.

translate-image.mp4

🔍 Reason

The reason has not been identified.
I would like a support to understand what it could be.

🌍 Global environments

  • Node: 14.16.1
  • Npm: 6.14.12
  • ImageMagick: 7.1.0-39 Q16-HDRI x86_64 20175
  • Gulp: 4.0.2
  • Bunyan: 1.8.15
  • Compiler: gcc (4.2)
jonnathan-ls commented

@iliakan Could you help?

iliakan commented

Such a well-delivered bug report calls for immediate reaction! 🚀

The problem was that SVG had a bit different text. And there was also a file duplicate.

I fixed it in the repo and submitted the correct images.yml.

Also, added more troubleshooting hints at https://github.com/javascript-tutorial/server#troubleshooting-images-translation.

  • ❤️1
jonnathan-ls commented

#87 (comment)
Such a well-delivered bug report calls for immediate reaction! 🚀
The problem was that SVG had a bit different text. And there was also a file duplicate ...

@iliakan 🙇‍♂️ perfect

Thanks for the quick response and additional troubleshooting guidance on translating images.

I was able to understand better and replicate it in another image that had a translation in progress.

The script to get the strings from a file (SVG) is essential.

If I may make a suggestion?

It would even be nice to add the command to obtain the strings as a mandatory step in the translation process, if we are going to follow the guidance only looking directly at the SVG, it ends up allowing for a margin of error, but with the script, just copy the result and use it as keys in the YML file

Why the suggestion?

It took me a while to get the translation of the file ifelse.svg for example.

/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg

This is because, at first, (thinking it would be possible to translate the entire text) ... I looked directly at the SVG file and identified, for example, the following text What's the “official” name of Javascript? as follows:

What's the “official” name of JavaScript?

I realized then that I would need to isolate each text snippet by separating them by the html elements (which is already provided by the script you guided to use)

image

Note

There are some relevant remarks, since the characters need to match exactly as the script expects to read, because:

  • Some characters appeared in a specific encoding format, which cannot be used in translation
  • In the visual format, there is a double quote character ", but looking carefully, the character is different “ (I can't tell if it's due to my OS - MAC)

The final result of implementing the translation in the images.yml file looks like this:

ifelse_task2.svg:
  Begin:
    text: Início
    position: center
  What's the:
    text: Qual o nome
    position: center
  “official” name of:
    text: nome "oficial" do
    position: center
  Other:
    text: Outro
    position: center
  You don't know?:
    text: Você não conhece?
    position: left
  Right!:
    text: Correto!
    position: center
iliakan commented
  • 👍1
jonnathan-ls commented

Thank you for the valuable insights! Could you suggest a PR for the Readme https://github.com/javascript-tutorial/server/blob/master/README.md ?

Sure ... pull request submitted: #88