Reading internationalized content from CSS file

Question

I don't have much experience on UI development. I have a class defined in CSS, something like this-

.myclass {
    color: red;
    content: "my content";
    font-size: 12px;
    padding-right: 2px;
}

I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code?

Answer 1

I am not sure about it but most probably you are looking for this

http://www.w3.org/International/questions/qa-css-lang

The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:

:lang(ta)   {
    font-family: Latha, "Tamil MN", serif;
    font-size: 120%;
    }

Answer 2

I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably localizing the HTML anyway. If it is possible for your to add another attribute to your HTML you could try using content with an attr() value to reference a data attribute from the selected HTML content. So with HTML like this:

<div class="myclass" data-value="My Content"></div>

You can access the the data attribute like this:

.myclass:before {
  content: attr(data-value);
}

Keep in mind that the content property can only be used on pseudo elements. For further info I'd recommend you the MDN page about the content property.