Skip to main content

React: åäö swedish characters shown as �

Last few months, I have started working on a web application that belongs to a Swedish client. Since this application's target audience is Swedish people, we were only focused on the Swedish language as the application language. We have hardcoded all the labels (I know it is not a good practice but for this case that was fine 😉). Then we figured out something is wrong when it rendered in the HTML.

Symptoms

All the special Swedish characters were rendered as �
åäö Swedish characters shown as �

Cause

This is most likely caused by the encoding. 

Resolution

Ideally, you can overcome this issue by providing a metadata tag for "charset". 

 In your  index.html  file, add the following meta tag to the header section.

 
<meta charset="UTF-8">
Simply, when you declare the "charset" as "UTF-8", you are telling your browser to use the UTF-8 character encoding, which is a method of converting your typed characters into machine-readable code.

Usage:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Website</title>
  </head>
  <body>
  </body>
</html>
Read more: what is it | how to use

In your browser, go to the developer toolbar and in the network tab, when you check the response headers. You can see in the content-type, it indicates your "charset" property value as follow,



However, this did not resolve my issue. So I dig into this and figure out something else. You might have the same issue as me. So it is not about the character encoding this time. even though we set the character encoding to "charset" as "UTF-8". The file (in my case react component file) encoding is different. So even I set the character encoding to "UTF-8", file encoding is overridden it.

So in order to check the file encoding, you need to get the support of Visual Studio editor (Not VS Code).
  1. Open Visual Studio.
  2. Open the desired file to be check.
  3. From the File menu, choose Save File As, and then click the drop-down button next to the Save button.
  4. The Advanced Save Options dialog box is displayed.
  5. Under Encoding, check what is listed in there. It should not be a UTF-8 encode type. So you can select a UTF-8 encoding type and click ok. This will convert your file to UTF-8 encode type and that will resolve your issue.
Step 3
Step 4
This may be a stupid post for some but this ruined one working day of mine.

May the force be with you!

Labels:

Comments

Post a Comment

Popular Posts

SSAS: The Sort Order Specified For Distinct Count Records Is Incorrect.

Symptoms During a processing time of a cube that contains a distinct count measure, the process fails with the following error message: The sort order specified for distinct count records is incorrect Cause This is most likely caused by different sort order used on the data warehouse data set and the analysis service database data set. Resolution Modify the sort order of the data warehouse data set so that it will match with the analysis service database data set. Into the Depth  Navigate to the analysis database and start to process the desired database. When the processing begins, the Process progress window will pop up. Wait till the process gets failed. After the process failed, find the failing measure group and expand to the last node where you can see an SQL query. Double click on the query and view the details. This query gives you the exact order by the column which caused you this trouble.  Execute the query using the data warehouse datab...
Post a Comment
Read more

Dynamic Assembly in C#

Static Assembly Vs Dynamic Assembly Static Assemblies are those assemblies which are stored on the disk permanently as a file or set of files. Since these assemblies are stored in the disk, those are only loaded when CLR requests.  These are the assemblies we are dealing with daily. Assemblies that I'm going to talk about today bit different. It completely opposite of the Static Assemblies. Those Assemblies are not stored on the disk before execution. When an application requires any type, which references from these assemblies, DOT NET will create these Assemblies at the runtime so that it will directly load into the memory. Why is it important ? Like I mentioned, this is not something we do very often. It is not all about how important it is. Personally, I think it is better to know this kind of hidden language features. More you play with this more you learn. I found cool stuff I can do with this. Hope it will be same for you as well. This is an old feature. How ...
Post a Comment
Read more

global.json file

  Symptoms Suddenly you get build errors in your build pipeline which perfectly builds in your local machine 🤔🤔🤔 Cause Most likely the root cause is .NET SDK versions. Your local machine builds on a different SDK and the pipeline builds on a different SDK. Resolution The ideal way of solving this is to force everyone to use one define .Net SDK. Regardless of whether it is a developer or CI pipeline. Simply to make this happen .NET  provides you a file called "global.json". The global.json file allows you to define which .NET SDK version is used when you run .NET CLI commands. Selecting the .NET SDK version is independent from specifying the runtime version a project targets. For information about specifying the runtime version instead of the SDK version, see Target frameworks . If you always want to use the latest SDK version that is installed on your machine, no global.json file is needed. Into the Depth The sample global.json file looks like the below, {    ...
Post a Comment
Read more