inline styles in rich text editor lost on translation with xliff provider

Jesse Andrews 191 posts 716 karma points c-trib

Feb 27, 2019 @ 19:59

Translation Manager Feedback

Umbraco 7

The translation is currently stripping out inline styles added via the rte see the below debug output for an example of the problem.

2019-02-27 11:35:15,880 [P10804/D11/T86] DEBUG Jumoo.TranslationManager.LinkUpdater.LinkUpdater - Setting : [bodyText] (Source:{
  "name": "1 column layout",
  "sections": [
    {
      "grid": 12,
      "rows": [
        {
          "label": "1 Column",
          "name": "1 Column",
          "areas": [
            {
              "grid": 12,
              "hasConfig": false,
              "controls": [
                {
                  "value": "<h3 style=\"text-align: center;\">Test Header</h3>\n<p style=\"text-align: center;\"><a data-udi=\"umb://document/a58b033378f64d3a85da2368b4c54306\" href=\"/{localLink:umb://document/a58b033378f64d3a85da2368b4c54306}\" title=\"Test Link Mapper 2\" class=\"mdl-button mdl-js-button mdl-js-ripple-effect button-blue button-large\">Test link</a></p>",
                  "editor": {
                    "alias": "rte"
                  },
                  "active": true
                }
              ],
              "hasActiveChild": true,
              "active": true
            }
          ],
          "styles": {},
          "config": {
            "id": "test"
          },
          "hasConfig": true,
          "id": "e780e4eb-f96f-7628-e797-589b89db9a9c",
          "hasActiveChild": true,
          "active": true
        }
      ]
    }
  ]
}) [{
  "name": "1 column layout",
  "sections": [
    {
      "grid": "12",
      "rows": [
        {
          "label": "1 Column",
          "name": "1 Column",
          "hasConfig": true,
          "id": "e780e4eb-f96f-7628-e797-589b89db9a9c",
          "areas": [
            {
              "grid": "12",
              "hasConfig": false,
              "controls": [
                {
                  "value": "<h3>Spanish Test header</h3><p>\n                    <a data-udi=\"umb://document/a58b033378f64d3a85da2368b4c54306\" href=\"/{localLink:umb://document/a58b033378f64d3a85da2368b4c54306}\" title=\"Test Link Mapper 2\" class=\"mdl-button mdl-js-button mdl-js-ripple-effect button-blue button-large\">Test link</a>\n                  </p>",
                  "editor": {
                    "alias": "rte"
                  },
                  "active": true
                }
              ],
              "hasActiveChild": true,
              "active": true
            }
          ],
          "styles": {},
          "config": {
            "id": "test"
          },
          "hasActiveChild": true,
          "active": true
        }
      ]
    }
  ]
} > {
  "name": "1 column layout",
  "sections": [
    {
      "grid": "12",
      "rows": [
        {
          "label": "1 Column",
          "name": "1 Column",
          "hasConfig": true,
          "id": "e780e4eb-f96f-7628-e797-589b89db9a9c",
          "areas": [
            {
              "grid": "12",
              "hasConfig": false,
              "controls": [
                {
                  "value": "<h3>Spanish Test header</h3><p>\n                    <a data-udi=\"umb://document/a58b033378f64d3a85da2368b4c54306\" href=\"/{localLink:umb://document/a58b033378f64d3a85da2368b4c54306}\" title=\"Test Link Mapper 2\" class=\"mdl-button mdl-js-button mdl-js-ripple-effect button-blue button-large\">Test link</a>\n                  </p>",
                  "editor": {
                    "alias": "rte"
                  },
                  "active": true
                }
              ],
              "hasActiveChild": true,
              "active": true
            }
          ],
          "styles": {},
          "config": {
            "id": "test"
          },
          "hasActiveChild": true,
          "active": true
        }
      ]
    }
  ]
}]

The original value has the inline styles, but they are stripped out in the translated version. See the xliff file I uploaded below.

<?xml version="1.0" encoding="utf-8"?>
<xliff srcLang="en-US" trgLang="es" version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0">
  <file id="f1" original="2533|A Third Test">
    <group id="g1" name="content">
      <group id="g2" name="3759|bodyText">
        <group id="g3" name="e780e4eb-f96f-7628-e797-589b89db9a9c">
          <group id="g4" name="Umbraco.Grid.rte_1">
            <group id="u1-g" name="html">
              <unit id="u1-1" name="h3">
                <segment>
                  <source>Test Header</source>
                  <target>Spanish Test header</target>
                </segment>
              </unit>
              <unit id="u1-2" name="p">
                <originalData>
                  <data id="d1">&lt;a data-udi="umb://document/a58b033378f64d3a85da2368b4c54306" href="/{localLink:umb://document/a58b033378f64d3a85da2368b4c54306}" title="Test Link Mapper 2" class="mdl-button mdl-js-button mdl-js-ripple-effect button-blue button-large"&gt;</data>
                  <data id="d2">&lt;/a&gt;</data>
                </originalData>
                <segment>
                  <source>
                    <pc dataRefEnd="d2" dataRefStart="d1" id="1" type="link">Test link</pc>
                  </source>
                  <target>
                    <pc dataRefEnd="d2" dataRefStart="d1" id="1" type="link">Spanish Test link</pc>
                  </target>
                </segment>
              </unit>
            </group>
            <group id="g5" name="0_Umbraco.TinyMCEv3.Tag">
              <unit id="u2" name="title">
                <segment>
                  <source>Test Link Mapper 2</source>
                  <target>Test Link Mapper 2</target>
                </segment>
              </unit>
            </group>
          </group>
        </group>
      </group>
    </group>
  </file>
</xliff>

I suspect the problem is with the generated xliff file, as it doesn't include the inline styles in there. Seems like it just needs to add the inline styles to the originalData field to fix that though.

Copy Link

Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib

Feb 27, 2019 @ 21:05

Hi

At the moment the serializers that are producing the xliff content are going for a fairly clean xliff file if possible (we've had lots of random files being produced by translators when we add everything).

if you want to preserve the HTML in a RTE as best as possible it might be better to turn off the split option for the xliff provider.

enter image description here

this will have the effect of not splitting the HTML up into the individual elements - so the translator gets the RTE content as one field, but all the styling and any other html mark up you may have will be preserved.

Copy Link

Jesse Andrews 191 posts 716 karma points c-trib

Feb 27, 2019 @ 21:55

That does preserve the inline styles, though like you said its not as clean. Unfortunately I can't easily make the switch, as I already have some translations in the split html format. It also introduces potential issues with translation agencies depending on how they process the xliff file. Would it be possible to add support for including additional attributes for the split html version? I know you are concerned about bloat, but its feature that's needed for the rte to work 100% of the time, especially since this setting is currently true by default.

Perhaps it can be handled like TinyMceConfig.config does it and just have a whitelist of allowed attributes in Translations.config? This way you can minimize bloat in the xliff file, but still support various attributes when needed.

Copy Link

Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib

Feb 27, 2019 @ 22:18

yeah we actually have something very similar that does work for things that are inside the html (so links, images etc)

https://our.umbraco.com/packages/backoffice-extensions/translation-manager/translation-manager-feedback/95623-is-it-possible-to-extract-the-title-tag-of-links-in-rte-when-translating#comment-302428

but it doesn't do it on the things that are also split out (so you're h3 in the example is split so the actual html node has gone.

the xliff spec definition for how orginalData works, would require for it to then be wrapped in something to get the class which would be inside the h3 tag when we then exported it - so it would need more work, and a good re-reading of the xliff spec to get our heads around if it was doable.

We have been keeping it simple for the very reason that multiple translation agencies are indeed all very different in how they treat the XML - a surprising number actually just take the html, which I think it odd, given the translation tools are built for the splitting.

Also as an aside you can actually turn split on/off when other translation jobs are out to processing.

it only affects how the xliff is generated. the importing process will merge split items back together before Translation Manager gets near them

(translation companies might sometimes take the html version but return a split one! - so we always have to run through the merge just incase.

Copy Link

Jesse Andrews 191 posts 716 karma points c-trib

Feb 27, 2019 @ 22:50

So would this work to preserve the styles?

Create a job in non split mode.
Import the existing split mode xliff file.

If so, that can be a workaround for me, though I would need to recreate the job instead of just reverting the approved job to the submitted state.

Copy Link

Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib

Jul 04, 2019 @ 14:04

Hi

Just coming back to this one, there is actually a small update in v2.3.0 that might help with this.

On a split xliff file, if the element has custom attributes we will attempt to preserve them now as part of the split,

so

<h3 data-tag="something">A Heading with custom bits</h3>

becomes

<unit id="u3-2" name="h3">
  <mda:metadata>
     <mda:metaGroup id="h3_attributes">
      <mda:meta type="data-tag">something</mda:meta>
    </mda:metaGroup>
  </mda:metadata>
  <segment>
    <source>A Heading with custom bits</source>
  </segment>
</unit>

Copy Link

is working on a reply...

Flag this post as spam?

Inline styles in rich text editor lost on translation with xliff provider