Make theme translations accessible from CSS

Feature
1

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

Would be nice to make it translatable

For example, in 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

2

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.

8 Likes
3

Could such a thing be achievable through a plugin though?

4

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 :stuck_out_tongue: )

I understand this is a bad idea

You could do something like this in the theme javascript

document.documentElement.style.setProperty('--my-translation-name', `"${ I18n.t(themePrefix("my-translation-name")) }"`);

And then in the 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.

5 Likes
5

I also don’t support making translations accessible in theme CSS :+1:

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

8 Likes
6

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