Styling my i18n strings: is it even possible?

[lucavenir]

Hi there,

thank you @ivanhofer for this awesome package.
I'd like to ask and understand about the following: how can I style my translated content? Let me explain.

My problem:

Say I have the following sentence:

Hi! This is a sentence. I'd like to write this sentence at least {number} times.

When using typesafe-i18n, how can I write my /en dictionary so that I get a styled sentence, with something like above?
I'm unsure of this being possible in the first place.

In other words, my sentence translations would be like this...

  {
    ...,
    sentence: "Hi! This is a sentence. I'd like to write this sentence at least {number} times.
    ...
  }

... and then I'd reference this sentence with (e.g.) $LL.sentence("one") in my components.
My problem is the following: I should style the word "sentence" to just make it bold (👍🏼) and let the number be both bold AND colorful 🎉?

FYI I'm using SvelteKit; in my style tag I'd target the strong tag to change the boldness and colour. Actually, since I'm using Tailwind, too, I usually write just some inline utility classes. But again, the moment I use the above sentence, how can style parts of it?

An ugly workaround

At the moment I'm translating each piece of the sentence like so:

  {
    sentence: {
      first: "Hi this is a",
      sentence: "sentence",
      more: "I'd like to write this sentence at least",
      number: "{number}",
      times: "times",
    },
  }

So that I can reference these splits of data and style them accordingly.
How would you do this?

[ivanhofer]

Hi @lucavenir

thank you @ivanhofer for this awesome package.

Thanks for your kind words.

typesafe-i18n doesn't handle stylung of strings by itself. But you can write the messages however you like. You can write them with HTML markup and use Svelte's @html to render it.

{
   sentence: "Hi! This is a sentence. I'd like to write this <strong>sentence</strong> at least <span class="colorful">{number}</span> times.
}

<p>
   {@html $LL.sentence("one")}
</p>

<style>
   p global(.colorful) {
      color: yellow;
   }
</style>

You need to be carefully when styling classes that are located inside the @html part. They need to be defined in a global way. Buf if you are using Tailwind's utility classes it should be fine since they are already defined globally

[lucavenir]

Hi there,

this is it! Thanks a ton.

I know that what I'm about to ask is Svelte-related at this point, but since the workaround is to inject HTML into my components, the following question is kind-of necessary.

Isn't the @html tag unsafe, XSS-wise, as stated in the tutorial?

How can I prevent mis-use or exploits of my @html components (that I use just because of i18n at this point).

Thanks A TON for your assistance, this is brilliant info.

[ivanhofer]

Depending where the data comes from. If it comes from your server it is probably data you can trust.

If it is user-generated content you probably need to escape some bad characters in order to make it safe. So probably you should strip out all unsafe characters from the data you pass into the translation function. You could do this via a formatter. I'm sure you can find a function on stack overflow that strips out unsafe characters

[lucavenir]

Thank you again!

Luckily the data I'm displaying is just the translations from your package!

Thanks again!