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?

Memorialist

you can look for this post: i18next css content – Papaw

Answer 1

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

Emeliaemelin

Answer 2

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%;
    }

Obloquy

Thank you. That was a very helpful suggestion. I never knew about it. But implementing it is a bit tricky in "my scenario" as it is a bit hard to get the language information during runtime. – Memorialist

Answer 3

You could consider using CSS variables (i.e. var() with custom properties), if it blends in with your surroundings:

:root{
    --text-my-content: "my content";
}
.myclass{
    content: var(--text-my-content);
}

Thus, the localized portion is outsourced from the actual style. Now, you can define the locales elsewhere (e.g. generated from a text database or hard-wired in an i18n-only CSS file or even grouped together on the top of your stylesheet):

html[lang="de"]:root{ --text-my-content: "mein Inhalt"; }
html[lang="en"]:root{ --text-my-content: "my content"; }
html[lang="fr"]:root{ --text-my-content: "mon contenu"; }

Roadhouse