Nice Web Type

Notes

8 comments

1. 
   Samer Ziadeh 28 Jul 2009

   That’s a great point :)

2. 
   Cobey P 28 Jul 2009

   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.

3. 
   Paul Fisher 28 Jul 2009

   I said earlier via Twitter:

   For translations you control, you can easily serve CSS with different “content:” for different “Accept-Language”s.

   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.css and content.lang.css.

   You could still use this system with Accept-Language if you preferred it that way.

4. 
   Martijn van der Ven 28 Jul 2009

   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?

5. 
   Tim Brown 3 Aug 2009

   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….

6. 
   Ciaran McNulty 4 Aug 2009

   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.

7. 
   Paul Irish 5 Aug 2009

   @Ciaran,
   Clever solution. :) Very nice.

8. 
   Tim Brown 3 Nov 2009

   Finally got around to fixing this. Thanks Ciaran!

Add your comment