Community Tech/SVG translation

The aim of this project is to build a tool that allows users to be able to translate SVG files into local languages and upload them on Commons.

This section aims to list all of the problems that exist with SVG translations on Commons. Not all of these will fall under the scope of this project but we will do our best to resolve as many problems as we can.

• Jarry1250's SvgTranslate tool does not work as expected any longer.
• mw:Extension:TranslateSVG project was undertaken a few years ago but it wasn't deployed anywhere and the code is not in a good shape anymore.
• Editors who are familiar with SVG code or graphic editors like Inkscape or Adobe Illustrator can use those to edit files but the majority of users do not have a simple way to add translations.

 

 

 

• To illustrate how big this problem is, take a look at Anatomy of human ear. It is used on multiple non-English wikis in articles:
  • Hebrew wikipedia
  • Farsi wikipedia
  • Nepalese wikipedia
• Users who are on the wiki and find an untranslated image on an article don't have a way to discover the translation tool.

See {{igen}} and {{translate}} on Commons

• It is a common practice to create new versions of files when creating translations instead of using the switch statement syntax to add translations to the same file. This leads to the translated files not being updated when the original file is.

For example, the Anatomy of human ear file was updated to show the cochlear frequency mapping but the translated files (like this Japanese version) are still showing the old labels.

• If new file versions aren't linked to one another, it becomes hard to discover files and users might end up re-translating them.

• It appears that not all graphic editors support switch statements and their systemLanguage attributes to include multiple translations in the same file. This can lead to the translations being thrown away or corrupted when the files are edited in such editors.

 

• When lines are broken, images may use separate text elements rather than one text element with several tspans. This leads to the translation code thinking that they are separate translation units.
• When lines are broken, an intervening space may not be present: instead of "Atlantic Ocean" one may get "AtlanticOcean".

  <text x="100" y="50">Atlantic<tspan x="100" y="70">Ocean</tspan></text>

A quick and dirty check is load the SVG file into a browser, select all, and then paste the text into an editor.

• Often the SVG file has English labels which fit well but other language translations might get too long and not fit in the space provided.

•  
  Map of Septimania in English
•  
  Map of Septimania in Russian - note that the translation for the word Septimania is a tight fit

• Even if translations for an image exist, they will not show up until the user adds the lang attribute to the image.

For example if a user wants to include a file on German wikipedia they will have to write [[File:example.svg|lang=de]] so that it shows up in German language on the wiki.

• There are cases when an SVG has phrases which should not be translated/translatable. An example would be an SVG where an English phrase is being translated into another language as a way of teaching. In that case, the English phrase should not be translatable. Similarly math/chemistry equations and diagrams may contain labels that should not be translatable.
• As an example, in Map Tenerife Disaster EN, the names of airlines and runway numbers should not be translated (as is already followed by translators).

• Allows a user to find a file on Commons
  • The tool accepts a file URL and auto-completes SVG file names from Commons, if the user starts typing.
  • Once the user selects the file, the tool opens the file up in the translate view, where it can be translated.
• Allows a user to add a new language translation
  • The user can select what language they want to translate from.
  • The user can select what language they want to translate to.
  • The user is presented with labels for entering the translations.
• Allows a user to view and edit previously existing translations
  • The user can see which languages translations are already present
  • If there are existing translations for a language that user wants to translate to, they get pulled in and are modifiable in the interface.
• Allows a user to preview the file
  • The user can hit preview at any stage during the translation process and see the translated labels appear in the image. (Dependent on technical feasibility)
• Allows a user to login to the tool using OAuth
  • User can login to the tool at any point and the tool will hold on to all their translations.
• Allows a user to upload the file to Commons under their account (using OAuth)
  • This action would be disallowed until the user has added translations for all labels.
  • This action would be disallowed until the user has logged in.
  • This creates a new version of the same file (translations saved using switch) and leads user to commons where they can input the description/file changes.
• Allows a user to download the file with the new translation
  • The user can download the file at any stage (even if all the labels are not translated)

• Translations are added to the same SVG file using switch syntax.
• tspan tag labels in a text tag are merged and presented to the user as one translation unit.

• Generates a link to the tool for every image in this category on commons.
• Is customizable to be used for any given wiki and category

These features would be prioritized after the features in the MVP are built and the tool is ready for community use.

• In-tool discoverability for files to translate
• Recently uploaded/previously edited files in the tool
• Ability to modify text-anchor coordinates for labels
• Auto-preview for translations in the image
• Thumbnail previews when selecting images
• Suggestions for translations
• Ability to add multiple translations at the same time
• Ability to mark labels as non-translatable

•  
  Link to tool from wiki
•  
  Find image on the tool
•  
  Translation view on the tool
•  
  Translate from
•  
  Translate to
•  
  OAuth login

This section aims to list all the user workflows around translating SVGs on Commons. If you know of a workflow that's not documented here, tell us about it on the talk page!

• A user who is only interested in translating a specific image because they are writing an article in a specific language and would like to translate a relevant language.
  • This user should be able to click on a link on the file page/input the image URL/have the tool auto-complete the image name when they start typing and be able to start translating.
• A user who is a casual translator to a specific language (say Malayalam) and is looking for SVG files not translated to Malayalam, which are either generally available anywhere in the Wikimedia ecosystem, or specifically used on Malayalam wikis.
  • This user would want to see an interface which allows them to discover images to translate.
    
• A user who finds a translated image but wants to edit the translation
  • This user would like to go in to the tool and be able to edit previously saved translations for an image.
• A user who's interested in maintenance work and seeks to combine separate language version files into single files using switch syntax
  • This user would like for the tool to be able to provide some automation around finding these files and combining them.

If you are interested in getting notifications for important announcements about our projects, you can subscribe to the Community Tech newsletter.

The tool is now live at https://tools.wmflabs.org/svgtranslate/ and is working well for most files. You may still encounted occasional bugs because of quirks in SVG files. Please don't hesitate to reach out to us or file a bug if you encounter a major problem. Thank you to everyone who has helped this project along.

The tool is nearing completion. The beta version of the tool links to commons-beta. You can freely add and upload images there without risking breaking anything. The production version of the tool is under testing right now and you will be able to use it once we are sure it is devoid of major bugs. Please leave feedback on the talk page!

It is now possible to render SVGs in wiki language instead of always rendering them in English. Now you no longer need to specify the lang parameter to render the SVG in the wiki language. If the file is available in the wiki language, it automatically gets displayed in that language. Otherwise it defaults to English. This is especially useful in cases when files are added to pages first and translated later. Once the translation becomes available, the image automatically renders in the wiki language. This holds for switch-translated SVG files, of course.
As an example, you can look this file -

• On German wiki
• On Russian wiki
• On Hindi wiki

This work was done in response to Problem statement 7 described above which came up in discussions.

We're seeking input on the early stage wireframes for the tool. The product designer (PSaxena (WMF)) is working on a prototype for the tool that we will share with the community soon to get more feedback.

The team discussed the potential ways forward on this project and unanimously voted in favor of building a new Toolforge tool for this project (while pulling relevant code as needed from the svgtranslate codebase). Here are some of the reasons that influenced our decision:

• Building an external tool would allow us to move a lot faster and deliver more impact on the project without getting bogged down by a lot of tech-debt work in fixing up outdated code.
• Having a standalone codebase would allow volunteer developers to get involved and take over the project once it's complete.
• It gives us more flexibility in terms of both the interface and functionality the tool can have.
• Translating SVGs isn't a functionality that is specific to our projects. It can be used by anyone for any SVG.
• As a tool, we'd be able to design it such that it works well in a mobile interface and allows for our users to make micro-contributions.

The Community Tech team is deciding upon a direction for this project in task T201207 to see what's the best way to deliver the most features to the users while being cognizant of the time constraints this team operates under. If you have opinions on that, let us know either on the talk page or on the phabricator ticket. Thank you.

We are beginning to do an investigation into this proposal in order to explore possible solutions and their pros and cons.

No progress as been made on this, as we are currently focusing on other Wishlist projects. We anticipate we will begin development in the second half of 2018.

We took this investigation out of our sprint, as we want to limit our projects in process by completing what's already started before starting anything new. No estimated date yet.

We are still awaiting a technical investigation for this project. The ticket is in our current sprint and we hope to complete it by the end of March. After the investigation we will be able to decide on project requirements.

The existing tool (https://tools.wmflabs.org/svgtranslate/) currently does not allow for download/upload (and is therefore useless.) There is also an extension. It appears that the biggest problem with the tool is that it depends on the translate extension with custom patches, that are five years old. Just fixing the Tool Labs tool is probably the easiest way forward. Should be easy to work with. 

Research to do:

• Figure out implementation
• Decide what to build

The team will start investigating this project early in 2018. If you've got suggestions or questions, please write your thoughts on the talk page!

• Wishlist proposal, discussion and votes
• Phabricator tickets tracking the work: phab:T56214
  • Investigation: T184310
• wikitech:Tool:SVG Translate – deployment documentation