How to translate the text in an image?

There are three types of images involved with translations.

Type 1: New Graphie

New Graphie images are referenced by links starting with “web+graphie://ka-perseus-graphie”, like: web+graphie://ka-perseus-graphie.s3.amazonaws.com/06668e9f7ae3174165a9b456b5e9016fc3dc79db

These are graphie images so they contain “ka-perseus-graphie” in URLs. The system automatically extracts the strings from these original images, makes them available for direct translation in translate.khanacademy.org and CrowdIn, and automatically reassembles them into new images. So translating these image strings is exactly the same process as translating any other string on Crowdin. You don't need to edit the web+graphie link, it should be the same in the English and the localized string. Watch this video and see how to translation new graphie.

Translating math notation in Graphie images

Sometimes you’ll need to edit the Graphie image itself (not only translate strings) e.g. if your country uses a different math notation. In such a case, you’ll need to edit the Graphie image in the Graphie editor as explained below. However, it is always a good idea to check out the existing translations on Crowdin. It is likely that some countries had the same issue and already modified/translated the graphie so you can simply copy their Graphie link.

 

Type 2: Old Graphie

Old Graphie images start with “https://ka-perseus-graphie” and end with “.png”, like: https://ka-perseus-graphie.s3.amazonaws.com/7012e102d313dddb9c0f6441b0a2768ac61e2394.png

These are graphie images so they contain “ka-perseus-graphie” in URLs as well. They have a https protocol, are also hosted on graphie host and have exclusively a PNG extension. To translate the strings within these images, follow these steps:

1) Copy the image URL from the English source strings:

2) Go to the Graphie Editor at http://graphie-to-png.kasandbox.org/ 
3) Paste the URL into the "Load rendered image" dialogue box and click "load":

4) You should see the graphie code (written in JavaScript) on the left, and preview of the image on the right. Translate the words that appear in the image in the code and click “Regraph” when the translations are completed. Check the result on the right hand side.

5) Click "Convert to image" and copy the generated URL

6) Paste the new URL back into Crowdin:

Browser plugin for opening Graphie links

To speed up the process outlined above, you may want to install Chrome browser plugin that essentially replaces steps 1-3 with a single button click. More information can be found here: https://khanacademy.zendesk.com/hc/en-us/articles/360043527732-Browser-plugins-for-opening-Graphie-links

Type 3: Non-Graphie

Non-Graphie images can be distinguished because they do not contain “ka-perseus-graphie” in the URLs. They have URLs of any format (png, jpg, svg, etc)most often will contain “ka-perseus-image” in the URL. like:

https://ka-perseus-images.s3.amazonaws.com/26f471f6ebe3b11557506f6ae96156e0a3852e5b.png

Compared with graphie images, they are not ka-perseus-graphie images so they do not contain “ka-perseus-graphie” in the URLs. To translate the strings within these images, you can watch this video or follow these steps:

1) Download our font, Lato, and install it on your computer
2) Right click and save the image you want to translate to your computer
3) Read our text and image rules outlined below and update the image with your design software
4) In the Translation Dashboard, upload the image in the "Translate & upload an image" window as shown below. Note: You need video mapping permission to be able to upload an image, so if you do not have that level of permission, contact your language's advocate to request it

5) When your image appears in the new tab, check it for quality issues
6) Copy the URL of the image
7) Select the image in Side-by-side view of the Translation Portal. Note do not select the "widget" -- instead select the "image," which should have a URL listed as the source string. Insert your image's URL as the 'translation' for this string just as you would insert a normal translation
8) Save your changes

Rules for translating text in images

• Text uses Lato font if your language uses Latin characters
• Text size is always between 14px and 24px
• Text should not overlap with other elements in the image whenever possible
• Text should be black (#000000) whenever possible

Rules for updating images

• Image always has the same margins / borders as the original (many images have no margins)
• Image is always the same file format as the original – .svg, .png, .jpg
• Image should be as close as possible to the same size as the original. This will prevent layout issues from your image being too big or too small.

If the image is in an image widget (something like[[☃ image 1]])

1. Find the appropriate [image] string in the translator portal - it will be separate from the string that contains the "[[☃ image 1]]" 
2. Click on that string to open it up for translation. The only text for translation should be the URL for the original, English image. In the translation field, enter the URL for your newly translated image.
3. Save and approve!

Here is a screenshot to illustrate:

 

Troubleshooting

If you're having problems uploading an image or gif, make sure it's not too heavy (ie. a 16.6 MB gif is too heavy. If you pass it through a "gif compressor", you can make it lighter). If you continue having issues after that, please send in an i18n_support ticket, attaching the image you want to upload so we can help you with it.