1959172 - Translate the `content` property within the `style` attribute on HTML elements

Status: NEW

(Firefox :: Translations, enhancement)

Description

[Erik Nordin [:nordzilla]]

Background

In Bug 1944944 we audited our attribute translations, creating a more detailed list of attributes to translate according to specifications.

In the patch associated with Bug 1944944, all of the trivial additions and removals were handled, and any changes that were more involved are now being filed as follow-ups.

---

Description

According to the spec for HTML translatable attributes, when an HTML element has a style attribute, we need to parse the CSS and translate the value of any content properties contained within the CSS.

Such an example might look like this:

  <span style="content: 'Inline content text'"></span>

With the intent that we would translate 'Inline content text' and re-insert that back into the attribute.

---

Concerns

From reading the MDN page on the content property, it seems that an inline style like this will not be rendered, since it is not applied to a pseudo element.

And according to this stack overflow post, you cannot target pseudo elements with inline styles.

Even though the HTML spec specifies that we should do this, it does not feel worth it to me to involve CSS parsing in Translations for this single purpose. It looks like Google Chrome does not translate this either.

Comment 1

[Erik Nordin [:nordzilla]]

:emilio

I would like to have a discussion about whether or not Translations in Firefox should do this at all, even though the HTML spec specifies that it should.

To me, it doesn't seem worth it, or at the very least it should be an extremely low priority for us to implement.

I'd like to have a conversation/decision to point to in case this topic ever comes up in the future.

Do you have any thoughts here?

Have I misunderstood anything, and maybe it would be possible for an inline style attribute that specifies content to be visible on the page?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Yeah so... I don't think you want to do that only for the style attribute, because while you can make it visible with something like:

<style>
div::before {
  content: inherit;
}
</style>
<div style="content: 'foo bar baz'"></div>

It is a rather bizarre thing to do.

However, things like generated content, while usually accessory, can sometimes have meaningful text, e.g.

a[href^="http"]::after {
  font-size: small;
  color: graytext;
  content: "(external link)";
}

or so doesn't seem crazy. So I think we might want to translate the content of ::before / ::after pseudo-elements, but not the style attribute (or not only that at least).

Comment 3

[Erik Nordin [:nordzilla]]

Agreed, I think it would be worthwhile to try to find a meaningful way to translate the content of pseudo-elements, but not the style attribute itself.

Thank you for you input here!