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?

you can look for this post: [i18next css content](https://stackoverflow.com/a/54785373/6235602) — GerA, Feb 20 '19 at 11:41

score 5 · Answer 1 · edited Aug 30 '20 at 15:49

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.

score 2 · Answer 2 · answered Apr 20 '15 at 09:10

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

answered Apr 20 '15 at 09:10

Nilesh Mahajan

3,506
21
34

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. – AlwaysALearner Apr 20 '15 at 09:26

score 0 · Answer 3 · answered Apr 05 '22 at 09:10

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

Reading internationalized content from CSS file

3 Answers3

Linked