CSS content property does not translate
Quick note regarding last week’s pure CSS text gradient technique: the CSS content property does not translate.
UPDATE: This has been fixed thanks to a suggestion from Ciaran McNulty (see his comment below).
Here’s how the example looks untranslated:
Here’s how it looks in Swedish (via Google Translate):
Should it translate? Does the CSS-generated “Filthy” have meaning? Does it represent an idea, the way <h1>Filthy</h1> does?
Or rather, is it merely presentational advice — like a color, which can affect our understanding of a thing but which is not, by the trinity of web standards, the thing?
That’s a great point :)
Interesting. I’m guessing that it doesn’t translate because the CSS-generation is not within the HTML but rather the CSS and Google Translate doesn’t access that file. It would probably take more processing than they’d like to expend on it, since the property is not used that much.
Does CSS even attempt to insert that content into the DOM as a separate element or is it a ghost element? I feel like its hitched to the element (h1 in this case) that you are styling and can’t be accessed on its own via the DOM/JS. Its tightly coupled with the styled element.
So therefore (if thats the case) I don’t believe it has meaning and remains purely presentational. Is this a good idea… I’m on the fence. I’ll have to go with yes it should remain presentational because the HTML is the content with meaning and an outsider (in this case, the designer/developer) is “forcing” the content into the page, where the original author didn’t intend for that to happen.
Looking forward to other views.
I said earlier via Twitter:
But after a few minutes’ thought, an even easier method would be to have a common CSS file for the general styling, then a language-specific file (linked separately from each translation) for each language. For example,
style.cssandcontent.lang.css.You could still use this system with
Accept-Languageif you preferred it that way.I actually think the question on whether it “represent[s] an idea” is less hard to answer than you’re making it seem.
CSS’
content:should not hold actual content other than for styling purposes. Therefore it does (normally) not need to be translated, just like it should not be indexed by Google. The style of a page does not need to be indexed, this should go for CSS’content:too. If not CSS will be a new markup or even coding language, something it should never become—hence complaints on things like CSS variables and animations.The fact I added emphasises to normally should not be overseen. I do believe that in cases where the
content:adds meaningful text—like the one you have on the screenshot—it needs to be translated. Meaningful in this case is not defined as having meaning through HTML markup, but defined as meaning something when read. This holds through even if it’s just added shading.The
content:stands for presentational content. Of course even content meant for presentational purposes only needs to be translated to make any sense.The real question is: should automatic translation services (like Google Translate) mind presentational content or should it stick to the content that has been defined to be content by the HTML?
Paul, that sure sounds organized. I would love that. But you’re talking about translations that I prepare myself, right? What about text that is auto-translated via Google?
Cobey, Martijn, it is a brain-bender! I can see advantages on either side. Thanks for brainstorming with me. I wonder who else is talking about this….
This is solvable, at the sacrifice of a bit of extra markup:
<h1 title="Filthy"><a href="#">Filthy</a></h1>
h1:after {
content: attr(title);
}
Google Translate translates @title because it’s visible as tooltips, so the translated version works fine.
@Ciaran,
Clever solution. :) Very nice.
Finally got around to fixing this. Thanks Ciaran!
Its very cool that we are seeing some automated uses of google translate. There are a few different wordpress plugins, for example, that automatically translate pages, and even include little flags for whatever language you want to see!
Does CSS even attempt to insert that content into the DOM as a separate element or is it a ghost element? I feel like its hitched to the element (h1 in this case) that you are styling and can’t be accessed on its own via the DOM/JS. Its tightly coupled with the styled element.
A very good suggestion by, Ciaran. I will like to know whether it will be like that for all the languages in Google translate. Have any one here tried it in as many languages as available in Google translate? It will be like playing a game. I will like to know the results for the same. I liked its presentation very much and will like to see more such examples here from who ever had tried it or going to try. I am really impressed by this information and respect the efforts of the team here.