# Make theme translations accessible from CSS

**URL:** <https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702>\
**Category:** Feature\
**Created:** [March 18, 2020, 12:03pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702 "2020-03-18T12:03:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![evantill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/evantill/32/116219_2.png) [@evantill](https://meta.discourse.org/u/evantill)\
**Post date:** [March 18, 2020, 12:03pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/1 "2020-03-18T12:03:52Z")

</div>

Actually, theme settings are accessible from CSS but not theme translations.

Would be nice to make it translatable

For example, in [DiscoTOC](https://github.com/discourse/DiscoTOC/) theme component, we have this setting:

> <https://github.com/discourse/DiscoTOC/blob/34fd9dff66bf3b7dfbcf27e270f0da72b34219b7/settings.yml#L12>

used in css:

> <https://github.com/discourse/DiscoTOC/blob/34fd9dff66bf3b7dfbcf27e270f0da72b34219b7/common/common.scss#L330>

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [March 18, 2020, 1:22pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/2 "2020-03-18T13:22:04Z")

</div>

Adding text via CSS is kind of a last resort workaround because it’s not accessible, I don’t think we should encourage it by supporting it with additional features.

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [March 18, 2020, 1:32pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/3 "2020-03-18T13:32:30Z")

</div>

Could such a thing be achievable through a plugin though?

---

<div class="post-metadata">

**Author:** ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)\
**Post date:** [March 18, 2020, 1:47pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/4 "2020-03-18T13:47:15Z")

</div>

A plugin to enable translations in SCSS… anything is possible, but it would be very messy. For example, you would somehow need to compile different CSS assets for each locale. I would strongly recommend not trying to do this.

One possible idea… but **not** a recommendation (i.e. you’re on your own if you attempt this 😛 )

> **I understand this is a bad idea**
>
> You could do something like this in the theme javascript
> 
> ```js
> document.documentElement.style.setProperty('--my-translation-name', `"${ I18n.t(themePrefix("my-translation-name")) }"`);
> 
> ```
> 
> And then in the css
> 
> ```css
> &:before {
> content: var(--my-translation-name);
> }
> 
> ```
> 
> This could break in many ways - if you put a quote or special characters in the translation it will break. If you try and use it in IE11, it will break.

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [March 18, 2020, 2:05pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/5 "2020-03-18T14:05:53Z")

</div>

> [@awesomerobot](#):
>
> I don’t think we should encourage it by supporting it with additional features.

I also don’t support making translations accessible in theme CSS 👍

As for the example in your post @evantill, that’s going to be removed in the next update for that theme component.

---

<div class="post-metadata">

**Author:** ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)\
**Post date:** [March 18, 2020, 6:00pm UTC](https://meta.discourse.org/t/make-theme-translations-accessible-from-css/144702/6 "2020-03-18T18:00:10Z")

</div>

This topic was automatically closed after 3 hours. New replies are no longer allowed.