# Problem with translation and displayed strings

**URL:** <https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336>\
**Category:** General JUCE discussion\
**Created:** [March 18, 2019, 6:34pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336 "2019-03-18T18:34:13Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Blueteal](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/blueteal/32/5324_2.png) [@Blueteal](https://forum.juce.com/u/Blueteal)\
**Post date:** [March 18, 2019, 6:34pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/1 "2019-03-18T18:34:13Z")

</div>

Hello,

I have a problem with fonts when implementing translations (Chinese) :

- In the source code, where a string should be displayed I use TRANS(“some text to translate”)

- I have a language.txt file

- My language.txt is encoded in the UTF 8 format (I’m sure about that) and contains some chinese translations.

- In the Application::initialise I have :

- In the LookAndFeel I use a font that can display Chinese (Microsoft YaHei)

But it was not enough and I had to redefine the Label drawing. In a separate empty project, when I draw using TextLayout, it works…  
In the main project we are working on since many years, it just displays messy characters everywhere.

Someone have any ideas or clues ?  
If there is an option in the projucer or a flag which changed, which could explain why we don’t have the same behavior between a new project and the old one?

---

<div class="post-metadata">

**Author:** ![DustVoice](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dustvoice/32/9222_2.png) [@DustVoice](https://forum.juce.com/u/DustVoice)\
**Post date:** [March 18, 2019, 7:41pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/2 "2019-03-18T19:41:34Z")

</div>

Which platform are you trying to build for?

---

<div class="post-metadata">

**Author:** ![Blueteal](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/blueteal/32/5324_2.png) [@Blueteal](https://forum.juce.com/u/Blueteal)\
**Post date:** [March 18, 2019, 8:33pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/3 "2019-03-18T20:33:34Z")

</div>

Thank you for your answer 🙂

I only tried on Windows 10 for now. But we will use it on both Mac OS and Windows

---

<div class="post-metadata">

**Author:** ![DustVoice](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dustvoice/32/9222_2.png) [@DustVoice](https://forum.juce.com/u/DustVoice)\
**Post date:** [March 18, 2019, 8:57pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/4 "2019-03-18T20:57:46Z")

</div>

Try adding `/utf-8` to the compiler options (you can configure this manually or add it in the corresponding field in the projucer) and make sure all files are utf-8 encoded. That did it for me

---

<div class="post-metadata">

**Author:** ![DustVoice](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dustvoice/32/9222_2.png) [@DustVoice](https://forum.juce.com/u/DustVoice)\
**Post date:** [March 18, 2019, 8:58pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/5 "2019-03-18T20:58:36Z")

</div>

I didn’t have to append `/utf-8` on any platform except windows by the way.

---

<div class="post-metadata">

**Author:** ![Blueteal](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/blueteal/32/5324_2.png) [@Blueteal](https://forum.juce.com/u/Blueteal)\
**Post date:** [March 19, 2019, 5:12pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/6 "2019-03-19T17:12:28Z")

</div>

Sadly it not worked for me. I guess it’s because the chineses characters are stored in the translation file.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [March 19, 2019, 5:21pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/7 "2019-03-19T17:21:50Z")

</div>

@Blueteal if you get it working, can you share a basic snippet that shows the necessary steps?

---

<div class="post-metadata">

**Author:** ![DustVoice](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/dustvoice/32/9222_2.png) [@DustVoice](https://forum.juce.com/u/DustVoice)\
**Post date:** [March 19, 2019, 8:19pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/8 "2019-03-19T20:19:06Z")

</div>

Is your translation file utf-8 encoded?

---

<div class="post-metadata">

**Author:** ![mcmartin](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mcmartin/32/7432_2.png) [@mcmartin](https://forum.juce.com/u/mcmartin)\
**Post date:** [March 19, 2019, 9:56pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/9 "2019-03-19T21:56:15Z")

</div>

> [@DustVoice](#):
>
> Is your translation file utf-8 encoded?

The OP said it so in their first post:

> [@Blueteal](#):
>
> My language.txt is encoded in the UTF 8 format (I’m sure about that)

---

<div class="post-metadata">

**Author:** ![mcmartin](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/mcmartin/32/7432_2.png) [@mcmartin](https://forum.juce.com/u/mcmartin)\
**Post date:** [March 19, 2019, 10:35pm UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/10 "2019-03-19T22:35:36Z")

</div>

> [@Blueteal](#):
>
> If there is an option in the projucer or a flag which changed, which could explain why we don’t have the same behavior between a new project and the old one?

Which exact versions of JUCE (the ideal would be a commit SHA1 from the JUCE repository) are you using for the new project and the old one? Are you using the same version or different versions? Without knowing more about the JUCE code you are using, we can’t really help.

---

<div class="post-metadata">

**Author:** ![Blueteal](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/blueteal/32/5324_2.png) [@Blueteal](https://forum.juce.com/u/Blueteal)\
**Post date:** [March 20, 2019, 9:34am UTC](https://forum.juce.com/t/problem-with-translation-and-displayed-strings/32336/11 "2019-03-20T09:34:50Z")

</div>

It works now ! There was a lot of small problems, so to sum up how to make it works :

- Use the `translate("EnglishString")` / `TRANS("EnglishString")` in the source code for each displayed strings (The projucer can convert a string to ASCII escaped chars if you want to include some “éô无标题的” (`CharPointer_UTF8 ("\xc3\xa9\xc3\xb4\xe6\x97\xa0\xe6\xa0\x87\xe9\xa2\x98\xe7\x9a\x84")` in your source code)
- Use the projucer tools to scan and create a translation file content
- Make sure this file is UTF8 encoded (Notepad++ displays the encodage in the bottom of the window, and you can convert the file to UTF8 with it)
- At starting of the application (in initialise for example) load the translation file

```auto
//juce::File is good to load UTF8 / ASCII files, so make sure it's the case
const File translationFile("Some/Path/to/translation/file.txt");
LocalisedStrings::setCurrentMappings(new LocalisedStrings(translationFile, false)); //idk if there is a leak here, but it not triggers a juce assert on the application quit

```

The LookAndFeel use lot of methods from the Graphics object. But it may not works (prints some squares), and you will need to redefine methods to use a TextLayout :

```auto

class CustomLookAndFeel : public LookAndFeel_V4 {
public:
	void drawLabel(Graphics& g, Label& label) override {
		g.fillAll(label.findColour(Label::backgroundColourId));

		if (!label.isBeingEdited()) {
			drawText(
				g, 
				label.getText(), 
				label.getBounds(), 
				label.getJustificationType(), 
				label.findColour(Label::textColourId), 
				label.findColour(Label::outlineColourId)
			);
		}
		else if (label.isEnabled()) {
			g.setColour(label.findColour(Label::outlineColourId));
		}

		g.drawRect(label.getLocalBounds());
	}

	static void drawText(Graphics& g, 
		const String& txt, 
		const Rectangle<int>& bounds, 
		Justification justification, 
		Colour colour, 
		Colour outlineColour, 
		bool isEnabled = true) {

		//Use a font that can display all your translation
		//Microsoft YaHei can display chinese but is Windows specific
		//For Mac you can use "Arial Unicode MS"
		const juce::Font font("Microsoft YaHei", bounds.getHeight()*0.9, 0);
		const float alpha = isEnabled ? 1.0f : 0.5f;

		g.setColour(colour.withMultipliedAlpha(alpha));
		juce::Rectangle<int> textArea = bounds; // (label.getBorderSize().subtractedFrom(label.getLocalBounds()));

		juce::TextLayout textLayout;
		juce::AttributedString str(txt); 
		str.setJustification(justification);
		str.setColour(colour.withMultipliedAlpha(alpha));
		str.setFont(font);
		textLayout.createLayout(str, textArea.getWidth());

		textLayout.draw(g, textArea.toFloat());

		g.setColour(outlineColour.withMultipliedAlpha(alpha));
	};
};

```

I had some issues using `Font("font name", height, 0)` so I created a typeface and then use it to get a font.

I hope this can help people a bit confused about how to add translations in their app with juce.

Anyway, thanks a lot for your answers ! 🙂