Page MenuHomePhabricator

[BUG] Labels appear in different font size than the image on Commons
Closed, ResolvedPublicBUG REPORT


Current behavior

Text labels appear in a different font-size on the svg-translate file version, compared to the Commons version.

Another example -

Expected behavior

File on svgtranslate renders exactly as in production.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
KCVelaga added a subscriber: KCVelaga.

@Niharika: Please look into this.

@Jinoytommanjaly Please upload the human led bones diagram as well

These issues arise from the underlying graphics, which are less than ideal for translation.

For [[Commons:File:Sustainable development.svg]], the text elements use text-anchor:start instead of text-anchor:middle; changes to the text may alter the length and lose centering. The original graphic did not leave much room for translations; the text "Sustainable" is crowded even in the English version; graphics for translation should allow for large variations in text length.

[[Commons:File:Human leg bones labeled.svg]] has similar layout issues. The original upload used leader lines ending in a dot; the text was left-justified above the leader line (text-anchor:start). A subsequent upload moved the leader lines off the ending dots. The leaders should end at the dots. If left justification is used, then the leader lines should be extended to the left; if right justification is used, the leader lines should be adjusted so they start to the right of the text (instead of running underneath the text). The graphic has lots of whitespace on the right; shifting the image to the right would allow more space for longer labels on the left.

A tool could change the text-anchor property and adjust the corresponding text origin, but moving leader lines are graphic edits and out of scope for a translation tool. A modest facility to do that is possible. Allowing the user to change font-sizes is also possible, but such a change is going down a slippery slope. The translation efforts should be separate from the graphic design of the image. If one needs to adjust the image, that should be done with a graphics tool rather than a translation tool. For that reason, adjusting leader lines is out of scope.

The simpler view is images should be designed for translation. The text anchor should be chosen to accommodate different string lengths, and the graphic designer should have left lots of room for the translated labels.

I would close this ticket as won't fix.

In T215690#4940541, @Jinoytommanjaly wrote:

Screenshot 2019-02-09 at 9.37.18 PM.png (768×1 px, 138 KB)

Firstly, @Jinoytommanjaly @KCVelaga I want to point out something here - please please use the correct language from the dropdown when you are adding a new language. It says "English" in the screenshot. It should not be English, but instead the name of the language you are adding. If you upload this file, it will overwrite the English labels in the file. If you are not sure how to use this tool, I will be holding a hangout session where I will demonstrate the tool and how to use it.
Secondly, like Glrx pointed out above, the tool is only meant for adding translations but in order to adjust font size and alignment, it is a much bigger undertaking and should be handled in a graphics editor.

BUT, what you are seeing in this image is a bug with the tool. The actual image on commons has smaller labels but the tool is producing larger labels. I will mark this ticket as a bug and we will work on fixing this problem. The translated labels should always be in the same size and font as the original labels in the file. Thank you for reporting it.

Niharika renamed this task from Adjust the font size and alignment to [BUG] Labels appear in larger font size than the image on Commons.Feb 11 2019, 7:24 PM
Niharika updated the task description. (Show Details)

I understood the tool is mainly meant for adding translation purpose only and can't work as a graphics editor. Thank you @Glrx.

@Niharika, The screenshot is taken after uploading the image to commons when Krishna asked for a screenshot. Actually i have uploaded by changing Default language -> English to Default language -> Malayalam (

I have just tried one more translation now. Even though I have selected the Malayalam language it is getting to overwrite to English file only. The first picture is taken before uploading to commons and the second one after uploading.

  1. Screenshot 2019-02-12 at 12.57.25 AM.png (768×1 px, 94 KB)
  2. Screenshot 2019-02-12 at 1.01.04 AM.png (768×1 px, 74 KB)

I have also tried to upload after changing Tool 'Language settings' to Malayalam. But the file is just overwritten.


Screenshot 2019-02-12 at 1.01.25 AM.png (768×1 px, 94 KB)

Screenshot 2019-02-12 at 1.02.19 AM.png (768×1 px, 86 KB)

Certainly, the tool will help in translations of more SVG files easily coming months. Thank you for considering this translation tool

Just a note about the original files.

File:Sustainable development.svg has been edited to use text-anchor:middle. Translations from other versions have been inserted into switches.

Commons:File:Human leg bones labeled.svg has been corrected (eg, leader line now goes to the patella); more space has been added for translated text. A switch translation skeleton has been added.

I edited File:Human leg bones labeled.svg to clean it up and fix the leaders. Originally, the text elements looked something like:

<text style="font-size:40px;...">
  <tspan style="font-size:18px;...">Femur</tspan>

is the tool confused by the 40px to 18px change?

(if the patella leader does not go to the patella, the tool is using the old image)

@Jinoytommanjaly What do you mean when you say it is getting overwritten? I just added Hindi translations for the same file and I see them. I think you are getting confused because the translations are added to the same file. You can change the language you see by using the Render this language in dropdown box on Commons. See this link.

Screen Shot 2019-02-11 at 1.47.36 PM.png (770×1 px, 135 KB)

And see this -

@Glrx Oh, that might be the problem. Thanks for all your help in fixing up these files!

@Niharika Oh, sorry. I thought the tool creates a new file with a new name added. I didn't notice that translations are added to the same image file name using switch-translations. Thanks for notifying.

Niharika renamed this task from [BUG] Labels appear in larger font size than the image on Commons to [BUG] Labels appear in different font size than the image on Commons.Feb 13 2019, 8:41 PM
Niharika updated the task description. (Show Details)
MBinder_WMF changed the subtype of this task from "Task" to "Bug Report".Mar 26 2019, 11:04 PM
dom_walden added a subscriber: dom_walden.

I was not able to reproduce this on staging or production, using the SVGs in the description.

Lots of visual comparisons of svgtranslate and Commons was done in T215580#5115279 (and incidentally as part of other testing). While there can sometimes be differences in font rendering (probably due to rsvg), the differences are minimal.

Suggesting this is fixed.

dom_walden claimed this task.
dom_walden moved this task from Backlog to Done on the SVG Translate Tool board.
dom_walden moved this task from Ready to Done on the Community-Tech-Sprint board.