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

[JonChambers]

Edit: Solution at the bottom

I have a title "The First Catch" and another "The Second Catch"

However, I'd like them displayed as:
"
The First
Catch
"

and

"
The Second
Catch
"

So far I have tried

Code: Select all

{The_First_Catch}

Code: Select all

$this->tpl['The_First_Catch'] = self::_("The First <br> Catch");

and

Code: Select all

{The_First_Catch}

Code: Select all

$this->tpl['The_First_Catch'] = sprintf(self::_("The First %s Catch"), '<br>');

and

Code: Select all

{The_First_Catch}

Code: Select all

$this->tpl['The_First_Catch'] = self::_("The First") . "<br>" . self::_("Catch");

The above methods return "The First <br> Catch" as in literally displaying "<br>" to the player without a line break.

The only option left seems to be below, but it looks bad for developers and translators alike:

Code: Select all

{The_First}<br>{Catch}

Code: Select all

$this->tpl['The_First'] = self::_("The First");
$this->tpl['Catch'] = self::_("Catch");

Am I missing something? Or is that's the way I'm supposed to translate line breaks?

Solution:

Code: Select all

'{The_First_Catch}'.replace(/&lt;br\/&gt;|&lt;br&gt;/gi,"<br>")

Code: Select all

$this->tpl['The_First_Catch'] = self::_("The First <br> Catch");

I was considering options that would give the translators more html formatting, but then we open the can for script injection etc so I decided to stick to the basics.

I'll be adding this even in places that do not require line breaks, just in case a translator wishes to add one.

[Tisaac]

Why would you want that to be splitted like that ? What about using css poperties to make it fit the container instead ?

[Een]

Templating has an extra layer that may be inconvenient in some cases. I would advise to put anything about the interface (including translations) on the javascript side; self::_() should be used as little as possible (preferentially only for errors), I think it's mentioned in the translation doc. I think your first example will work like a breeze on the client side.

[Tisaac]

I think your first example will work like a breeze on the client side.

It will indeed.

[Victoria_La]

It was not really mentioned that self::_ return html wrapped strings, I edited the wiki including more examples

[Tisaac]

It was not really mentioned that self::_ return html wrapped strings, I edited the wiki including more examples

Are you sure the issue is not with php templating itself ? I am not using it at all so never tried but I wouldn't be surprised if some kind of escaping was made by the templating engine itself.

[JonChambers]

Why would you want that to be splitted like that ? What about using css poperties to make it fit the container instead ?

Let's not discuss graphic design here. Because even if you are correct and a perfectly elegant CSS solution exists to make "The First Catch" and "The Second Catch" fit the same sized container in the same way, there will still be a critical tool missing from my tool belt if I don't know how to add a line break to a translated string. Workarounds can only last me so long before the need becomes unavoidable.

[JonChambers]

Templating has an extra layer that may be inconvenient in some cases. I would advise to put anything about the interface (including translations) on the javascript side; self::_() should be used as little as possible (preferentially only for errors), I think it's mentioned in the translation doc. I think your first example will work like a breeze on the client side.

Trouble is, I just finished translating everything else in the same way. My view.php file has 16 translated strings so far, and I like keeping them all together in the same place. (Yes, my JavaScript translates many many more strings, but all the titles of the UI are in the template. All the messages to players are in JavaScript)

The final solution I mentioned... works. Converting everything to JavaScript at this point will be very messy, especially since my .js file is already 1108 lines long and fast growing. (It may double by the time I've finished my project.) It's a lot of effort just to save the translators the trouble of translating "The First" "The Second" and "Catch" instead of "The first<br>Catch" and "The Second<br>Catch"

But thanks everyone for your ideas.

[Tisaac]

Why would you want that to be splitted like that ? What about using css poperties to make it fit the container instead ?

Let's not discuss graphic design here. Because even if you are correct and a perfectly elegant CSS solution exists to make "The First Catch" and "The Second Catch" fit the same sized container in the same way, there will still be a critical tool missing from my tool belt if I don't know how to add a line break to a translated string. Workarounds can only last me so long before the need becomes unavoidable.

Not true, I never ever used <br> in any of my 12 games here so that's really not a needed tool in any way, especially for what you are describing here.
And your solution is not a nice solution, you are not acknowledging other langages where the cut your are enforcing may be completely off the grammar/syntax of it. So again, you should not have to split a string in the middle like that anyway.

(By the way, js and php files can be splitted for better organisation and structure)

[robinzig]

While I certainly don't have Tisaac's experience in developing BGA games, I must say that as a web developer your suggestions also make no sense to me.

For one thing, purely on a translation angle, I don't think the translators should have to worry about <br> tags (or other bits of HTML) inside the strings they are translating. I wouldn't assume a translator even knew what that meant.

But it seems you just want this line break for layout purposes, in which case CSS is what you should use instead. I assume you want to do this to fit the text within a particular horizontal space you have available (and again, why would a translator realise this and "know" where to put the line break in the translated string? What if the translation is really long and still overflows your container even with a single line break? Would you expect the translator to introduce a second one?). Well browsers automatically flow text onto a new line whenever necessary to fit, so it seems that you haven't set the width of the parent container correctly if your text is overflowing.

I'm happy to have a look and help out with any CSS issues, but hardcoding a line break is not the right solution, even if you didn't need to translate the string!