search

javascript-tutorial / server

Server for the Modern Javascript Tutorial
https://javascript.info
Other
452 stars 138 forks source link

Support for image translation (SVG) #87

Closed jonnathan-ls closed 2 years ago

jonnathan-ls commented 2 years ago

🆘 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.

https://user-images.githubusercontent.com/35238611/177466091-5278f197-7f22-471f-9ac3-7d93de8716f0.mp4

🔍 Reason

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

🌍 Global environments

jonnathan-ls commented 2 years ago

@iliakan Could you help?

iliakan commented 2 years ago

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.

jonnathan-ls commented 2 years ago

https://github.com/javascript-tutorial/server/issues/87#issuecomment-1175799059 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 2 years ago

Thank you for the valuable insights!

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

On 7 Jul 2022, at 06:23, Jonnathan Santos @.***> wrote:

87 (comment) https://github.com/javascript-tutorial/server/issues/87#issuecomment-1175799059

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 https://github.com/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)

https://user-images.githubusercontent.com/35238611/177687939-1cdc241e-2436-44d2-b813-bd3a1c6c41f3.png 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 — Reply to this email directly, view it on GitHub https://github.com/javascript-tutorial/server/issues/87#issuecomment-1177048966, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVJGCY6ULCSHLWVNFZYBDVSZLTLANCNFSM52YICHSQ. You are receiving this because you were mentioned.

jonnathan-ls commented 2 years ago

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: https://github.com/javascript-tutorial/server/pull/88