[BUG] Some CSS selectors break translation input
Open, Needs TriagePublicBUG REPORT
Actions

Assigned To

None

Authored By

	dom_walden
	Apr 18 2019, 3:44 PM

Description

What is the problem?

This SVG shows only one translation input, when it should show ~20.

From experimenting, the problem seems to be caused by a <style> element containing:

#percentage_numbers text {
	text-anchor : end;
}

(It appears to be the CSS selector it objects to, rather than the CSS rule).

When I download the SVG it has not had id attributes added to the <text> elements, nor <tspan> elements added as children.

Another thing I have noticed for SVGs which have this bug is that the javascript variable "appConfig.translations", when looked at in the browser console, is something like:

Object { "": {…} }

where it should be something like:

Object { trsvg2: {…} }

This suggests that the <text> elements are not having their ids set by the tool. So, they are not being uniquely identified and it keeps overwriting the item whose key is "".

Steps to reproduce problem

In SVG Translate, try to view an SVG which contains:

<style type="text/css">
  #percentage_numbers text {
    text-anchor : end;
  }
</style>

Expected behavior: Appropriate number of translation inputs show, downloading the SVG should show it having extra id attributes.
Observed behavior: At most one translation is shown. Downloaded SVGs are unmodified.

Related Objects

Mentioned In: T271000: Bad language code: zh_Hans should be zh-Hans
T280523: Allow to translate text in a <tspan> element
T231143: [BUG] text element not recognised
T220689: [BUG] Some translations not recognised

Event Timeline

dom_walden created this task.Apr 18 2019, 3:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 18 2019, 3:44 PM

dom_walden mentioned this in T220689: [BUG] Some translations not recognised.May 1 2019, 2:52 PM

Glrx mentioned this in T231143: [BUG] text element not recognised.May 5 2020, 5:33 AM

MusikAnimal removed a project: SVG Translate Tool.Dec 21 2021, 10:57 PM

MusikAnimal edited projects, added SVG Translate Tool; removed Community-Tech.

Restricted Application added a project: Community-Tech. · View Herald TranscriptDec 21 2021, 10:58 PM

MusikAnimal removed a project: Community-Tech.Dec 21 2021, 10:58 PM

This behavior is by design. CSS selectors that use identifiers complicate the translation.

https://github.com/wikimedia/svgtranslate/blob/master/src/Model/Svg/SvgFile.php examines each style element in the SVG file. It collects the CSS rules, extracts the selectors, and then it examines those selectors starting at line 181:

foreach ($selectors as $selector) {
    if (false !== strpos($selector, '#')) {
        // IDs in CSS will break when we clone things, should be classes
        $this->logFileProblem('File {file} has IDs in CSS');
        return false;
    }

If SVG Translate sees a selector with #, then it gives up on the entire file. SVG Translate logs the issue.

SVG Translate is appropriately worried about ID selectors. SVG Translate wants to copy elements, and when it copies an element, then it should change the id of that element. Changing the id may confuse formatting for the copy.

SVG Translate could be more circumspect about handling such files. It could process elements that do not contain any id that was found in the style elements. That test might be involved, because the id might be a text element, or it might be in one of the included tspan elements (or textPath elements if that feature is ever added).

It would be better for the SVG to avoid ID selectors and use class selectors instead. That would make the SVG file compatible with SVG Translate. Maybe the log message could offer some help about modifying the SVG file.

Using ID selectors is uncommon, so it is not a significant limitation for SVG Translate. The rarity suggests it is not worth the effort for SVG Translate to process ID selectors. The strategy of giving up on the entire file is a reasonable choice.

I would change this issue from a bug report to a feature request of handling CSS with ID selectors.

I would put a low priority on adding the feature.

Glrx merged a task: T231143: [BUG] text element not recognised.Jul 1 2022, 6:16 PM

Glrx added subscribers: Martin_Meise, Samwilson, JoKalliauer, The_RedBurn.

Glrx mentioned this in T280523: Allow to translate text in a <tspan> element.Jul 12 2022, 9:27 PM

Glrx merged a task: T280523: Allow to translate text in a <tspan> element.Jul 12 2022, 9:59 PM

Glrx added a subscriber: Ake.

Samwilson mentioned this in T271000: Bad language code: zh_Hans should be zh-Hans.Oct 4 2022, 12:38 AM