You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
**Step 3.** With the help of [script `imageYaml`](https://github.com/javascript-tutorial/server#helper-script-extract-strings), check the existing texts of the image you want to translate, for example to the `code-style.svg` file, when executing the command, you will get the following results:
165
+
166
+
```bash
167
+
# Adjust NODE_LANG to your language
168
+
169
+
❯ NODE_LANG=en npm run gulp -- engine:koa:tutorial:imageYaml --image code-style.svg
170
+
171
+
# Remainder of log omitted …
172
+
173
+
Processing image code-style.svg
174
+
code-style.svg:
175
+
'2':''
176
+
No space:''
177
+
between the function name and parentheses:''
178
+
between the parentheses and the parameter:''
179
+
Indentation:''
180
+
2 spaces:''
181
+
teste a:''
182
+
after for/if/while…:''
183
+
'}else { without a line break':''
184
+
Spaces around a nested call:''
185
+
An empty line:''
186
+
between logical blocks:''
187
+
Lines are not very long:''
188
+
A semicolon ;:''
189
+
is mandatory:''
190
+
Spaces:''
191
+
around operators:''
192
+
Curly brace {:''
193
+
on the same line, after a space:''
194
+
A space:''
195
+
between:''
196
+
arguments:''
197
+
A space between parameters:''
198
+
```
199
+
200
+
It is possible to notice that the script returns a list of a set of words, which separately form the snippet that can be translated. To succeed in the translation, it is necessary to configure the snippet as close as possible to what the script expects.
201
+
202
+
Let's take as an example the text`'} else { without a line break'`,in which it is necessary to pay attention to two observations:
203
+
204
+
1. The single quotes at the beginning and at the end are not part of the excerpt, as they only surround theset of words. It may be thatin some scenarios it appearsin the middle of the snippet (for example,`What's`), for such a scenario it is necessary to use it in the configuration, but the example taken is different, and that is why we will not consider the single quote at the beginning and at the end of the text.
205
+
2. There is a set of characters for which there is no translation or there is no need (for example, `} else {`), however, it is necessary to register them with part of the text to be translated, otherwise the script will not identify the need for translation.
206
+
207
+
Finally, we will have the following configuration to succeed in the translation:
208
+
209
+
```yml
210
+
code-style.svg:
211
+
"} else { without a line break":
212
+
text: "} else { xxxxxxx x xxxx xxxxx"
213
+
```
214
+
215
+
> **Note**
216
+
>
217
+
> - You may come across special characters, so the script returns the strings with code formatting, if applicable, configure the representation of the character visually, for example: double quotes `"` (visual) will be returned by script as `"` (code).
218
+
> - If you encounter problems related to the size of the translated text being too different from the original text, see the section [The "Text Overflowing"](https://github.com/javascript-tutorial/server#the-overflowing-text-problem) and test without using the [`position`](https://github.com/javascript-tutorial/server#positioning) parameter (maybe trying to center, for example, is interfering).
219
+
> - For other translation issues, see the section [Troubleshooting image translation](https://github.com/javascript-tutorial/server#troubleshooting-images-translation).
220
+
221
+
**Step 4.** Run the translation task:
163
222
164
223
```bash
165
224
cd /js/server # in the server folder
@@ -179,7 +238,7 @@ Take a moment to open and check them, e.g. in Chrome browser, just to ensure tha
179
238
180
239
P.S. If an image appears untranslated on refresh, force the browser to "reload without cache" ([hotkeys](https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#Bypassing_cache)).
181
240
182
-
**Step4.** Then you'll need to`git add/commit/push` the translated SVGs, as a part of the normal translation flow.
241
+
**Step5.** Then you'll need to`git add/commit/push` the translated SVGs, as a part of the normal translation flow.
183
242
184
243
...And voilà! SVGs are translated!
185
244
@@ -190,7 +249,6 @@ P.S. If an image appears untranslated on refresh, force the browser to "reload w
190
249
> NODE_LANG=zh npm run gulp -- engine:koa:tutorial:figuresTranslate --image try-catch-flow.svg
191
250
>```
192
251
193
-
194
252
## Positioning
195
253
196
254
By default, the translated string replaces the original one, startingin exactly the same place of the image.