[SOLVED] How do I add <br> to the middle of a translation string?

[Mogri]

It's worth mentioning that if an HTML tag is in a string, it must be preserved in all translations of that string. If "The First Catch" in German is "Firstcatchenzung," then they will still need to put the <br> in there somewhere, which is awkward.

I will also add my two cents here to what robinzig said: I haven't found a legitimate use case for <br> in the past decade of web development experience.

[JonChambers]

Extra development on the bug:

The html elements are only stripped when set to a javascript variable. That seems a vital clue to solving all of this.

The ideal solution for me (although those with different graphic design perspectives may disagree) is having "<br>" part of the English translation, so the German translation would be "Firstcatchenzung" if the system allows the break to be removed, and "Firstcatchenzung<br>" if it doesn't.

I think I've got this thing solved now. I just need to choose the right encode and decode function:

Code: Select all

var jstpl_foo = encodeFunction('<h1>{The_First_Catch}</h1>')

Then in javascript, when the variable is called,

Code: Select all

bar = decodeFunction(this.format_block( 'jstpl_foo', {}));

Still not the most elegant solution, but at least it keeps all the strings where I'd expect them to be if I ever want to edit them in ten years.



Okay, the technical side solved, now I can discuss graphic design. Keep in mind, I'm not looking for graphic design help. I'm merely describing the graphic design choices I have made and why I have made them. So please don't take it to heart if I do not adopt your solution over my own. I'm already feeling awkward enough about my need to justify my choices to people who've never seen my code or played my game. (Sure, if your solution is the best thing ever, I'll adopt it, but don't take it to heart if I disagree.)

Without line breaks, it would display:
"
The First Catch
"

"
The Second
Catch
"

In English, that just looks wrong to my eye.

Two player roles, almost identical, one with a single line title and the other with a two line title.

Now yes, I could use the div and div wrapper trick to restrict the space inside, forcing them both to display as I intended, but that will create unnecessary restrictions on title lengths for translators. If there's not enough room for "The First Catch", how can I be sure there will be enough room for "Firstcatchenzung"?

Also, this is only the "simplified for technical support" version of the issue. The full issue involves a font awesome icon displayed after "Catch" to show each player's colour, and future developments may make the issue more complex still.

This is why, when I ask for help, I'm always looking for a general tool to solve a category of problem, rather than a solution for this exact problem I'm facing now in the exact form it is in now.

Once I've worked out which encode and decode function work best for my use case, I'll upload the answer and mark my question as solved. But beyond that, I think I'm done here. I'll get back to work.

Thank you and goodbye.

[JonChambers]

See solution added to original post. Now, back to work.

[Tisaac]

See solution added to original post. Now, back to work.

Are you really sending your translated string from back to front using the tpl file ???

[JonChambers]

See solution added to original post. Now, back to work.

Are you really sending your translated string from back to front using the tpl file ???

I'm assuming you mean back end to front end, and yes. That's how the documentation says I should do it. The only thing I did differently from the documentation was add the .replace function.

[Tisaac]

See solution added to original post. Now, back to work.

Are you really sending your translated string from back to front using the tpl file ???

I'm assuming you mean back end to front end, and yes. That's how the documentation says I should do it. The only thing I did differently from the documentation was add the .replace function.

Hum no, there are litterally no example similar to what you have done here because it makes little sense:
- either you want the translation to be displayed on the loaded page, so it need to be translated before sending the page, and that's what tpl and self::_ are all about
- either you are going to use it in js and then there is no need to translate it before, you can just use the _() function is js.

In other words, in your tpl file, you could have done directly that without the need of some encode/decode functions:

Code: Select all

<script type="text/javascript">
let myTranslatedString = _("The first <br /> stuff");
</script>

Or if you want to keep your translated strings in one place, just store them in materials.inc.php and send them in getAllDatas as many games are doing it here already.

[JonChambers]

Hum no, there are litterally no example similar to what you have done here because it makes little sense:
- either you want the translation to be displayed on the loaded page, so it need to be translated before sending the page, and that's what tpl and self::_ are all about
- either you are going to use it in js and then there is no need to translate it before, you can just use the _() function is js.

In other words, in your tpl file, you could have done directly that without the need of some encode/decode functions:

Code: Select all

<script type="text/javascript">
let myTranslatedString = _("The first <br /> stuff");
</script>

Or if you want to keep your translated strings in one place, just store them in materials.inc.php and send them in getAllDatas as many games are doing it here already.

I'm trying to be polite and openminded to potential weaknesses of my code. Perhaps you are correct, and the way I have done it is going to cause horrific damage. If so I'd love to learn about it so I can make informed decisions.

"Are you really <method>???" is frustrating to read, as well as "<method> makes little sense because <description of method> and you could have <alternate method>"

It's frustrating, because you're probably correct, and just communicating your correctness poorly.

So, I'll just keep it all the way it is, and if I get an error I can come back to this moment and realise you were correct all along.

But if I take your advice without knowing WHY it's correct, I learn nothing.

The code works. It's easy for me to read. It's easy for me to edit. I'm done here.

[Tisaac]

Hum no, there are litterally no example similar to what you have done here because it makes little sense:
- either you want the translation to be displayed on the loaded page, so it need to be translated before sending the page, and that's what tpl and self::_ are all about
- either you are going to use it in js and then there is no need to translate it before, you can just use the _() function is js.

In other words, in your tpl file, you could have done directly that without the need of some encode/decode functions:

Code: Select all

<script type="text/javascript">
let myTranslatedString = _("The first <br /> stuff");
</script>

Or if you want to keep your translated strings in one place, just store them in materials.inc.php and send them in getAllDatas as many games are doing it here already.

I'm trying to be polite and openminded to potential weaknesses of my code. Perhaps you are correct, and the way I have done it is going to cause horrific damage. If so I'd love to learn about it so I can make informed decisions.

"Are you really <method>???" is frustrating to read, as well as "<method> makes little sense because <description of method> and you could have <alternate method>"

It's frustrating, because you're probably correct, and just communicating your correctness poorly.

So, I'll just keep it all the way it is, and if I get an error I can come back to this moment and realise you were correct all along.

But if I take your advice without knowing WHY it's correct, I learn nothing.

The code works. It's easy for me to read. It's easy for me to edit. I'm done here.

You are the one that stated "as explained in the documentation"....
And my previous post was not simply about "your method makes little sense, use mine", but also explaining you why this is the case, in the hope that you learn about the whole translation system and figure out the best choices by yourself in the future. I even provided another natural alternative.

If your only goal is just to "have a code that works", that's exactly how you will learn nothing.