DEV Community

How to localize texts in your client-side Blazor WebAssembly App?

jsakamoto on April 02, 2019

Introduction: What's "Blazor" (client-side)? "Blazor" (client-side) is a Single Page Web Application (a.k.a "SPA") framework. Client-si...

Read full post

5argon • Oct 10 '19 • Edited

Hi, thanks for the article. Just to add that resx could also do code generation for static access point, if you prefer the resource file way. The resource file could be compiled to local dll sent to the client side and then you use ResourceManager or the static generated code to access them.

jsakamoto • Oct 10 '19

Thank you for your comment!

Yes, that's right, .resx file could be generated C# class as you said.

I know this feature, and I often use this feature for ASP.NET MVC server programming.

However, .resx editor strongly depends on Visual Studio, and .resx solution is hard to use for static contents only HTTP server scenario, I think.

Anyway, your comment very important for the readers of this article.
Thanks!

5argon • Oct 11 '19 • Edited

In past few days I have been trying to make .resx localization works client side, because I love its generated class but unfortunately the generated class keeps falling back to the neutral language and not any other localized ones even with CultureInfo override specified.

I found that the main problem is that Blazor would include only main dll which contains your main localization resx. Other languages were separated by Visual Studio to a different satellite assembly and wouldn't be sent to client side, so it only works from server where all those dll are available.

What I did is to avoid naming the resx as AAA.resx, AAA.ja.resx but instead use AAA_ja.resx so Visual Studio don't see it as localized version and put them together in the main dll and ensure client get all languages on loading the SPA web app. Then I have to make a modified version of ResourceManager that knows how to look for _ separated resource according to incoming CultureInfo. It was very hacky but somehow I could get it to work. I have summarized the steps here if anyone interested in following : gametorrahod.com/workaround-for-cl...

The dependency of Visual Studio to edit .resx file still exists, but my website wouldn't be that large for now so I could put up with the difficulties :P Still I like that .resx could pack images into a binary which reads as byte[] from the generated static class, so I could make localized images bytes instead of localized image paths.

Tarik Alkathiri • Nov 17 '19

Thank you sooooo much for your solution
it is really helped me and works great with me
but when i use arabic character in the localization (I am using Json) the characters displayed as �� .
Could you please help me in this.
I am sorry for asking too much but i am windows developer and completely new to Core 3 and Blazor Server-Side.

jsakamoto • Nov 17 '19

Did you save the json file with utf-8 encoding?

If you upload the json file that can reproduce your problem to somewhere public cloud storage, then I can investigate it.

Tarik Alkathiri • Nov 17 '19 • Edited

Dear jsakamoto
Thank you very much for your reply.
I just opened the json file in notepad and saved it as text with utf-8 encoding
then i renamed it in the solution to .json and it works fine and shows the arabic character.
Thank you very much for your effort, and sorry for troubling you.
P.S. Do I have to do that with every json file or there is a better way.

jsakamoto • Nov 18 '19

P.S. Do I have to do that with every json file or there is a better way.

How about using Visual Studio Code for?

Tarik Alkathiri • Nov 19 '19

Thank you very much.
The Visual Studio Code did the job well, it shows the right characters.

Marina Reva • Sep 21 '19 • Edited

jsakamoto, thank you so much. it is so easy to localize for blazor.

I want to add a little. If language suggests right-to-left. For example Hebrew. To Blazar-Clien need

1) copy site.css => site-rtl.css

2) in site-rtl.css add in app 2 line
app {
...
text-align: right;
direction: rtl;
}

3) MainLayout.razor start so

@inherits LayoutComponentBase
@inject Toolbelt.Blazor.I18nText.I18nText I18nText

@if (CurrentLang == "he")
{
<link href="css/site-rtl.css"rel="stylesheet"/>
}
else
{
<link href="css/site.css" rel="stylesheet"/>
}

4) in index.html - delete
<link href="css/site.css" rel="stylesheet" />

5) "he" - in my case Hebrew -language suggests right-to-left GUI

Tarik Alkathiri • Nov 8 '19

Thank you very much for your this addition
Can you please post or send a small example showing how to change the language on at run time from within a Blazer server-side component, because i could not understand how to wire it with the API.
Thank you very much.

PeaStew • Aug 24 '19

"Build" doesn't generate anything at all, is this compatible with preview 8?

jsakamoto • Aug 26 '19

If you use "Toolbelt.Blazor.I18nText" ver.5.0.0 (nuget.org/packages/Toolbelt.Blazor...), it should be compatible with Client-Side Blazor Wasm App v.3.0.0-preview8.

Please see also: github.com/jsakamoto/Toolbelt.Blaz...

If it looks like bug of "Toolbelt.Blazor.I18nText", could you provide your source code & project files to me?

PeaStew • Aug 26 '19

Was my mistake I hadn't seen it was client side only, looking for a server side solution now, I assume basically anything that is MVC core compatible will work, thanks for the library, I've bookmarked it for future client side only work.

jsakamoto • Aug 26 '19

Thank you for your reply!

"Toolbelt.Blazor.I18nText" doesn't work on server side at this time, however, make "Toolbelt.Blazor.I18nText" to be available on server side is my important concern.

Because, I think, if "Toolbelt.Blazor.I18next" become working on server-side fine, it will have some advantages bellow.

It is not required .resx editor
It will work fine both client-side and server-side, on same implementation.

I'll try to improve it.

Thanks!

jsakamoto • Nov 18 '19

P.S. "Toolbelt.Blazor.I18next" ver.7 started support for Server-side Blazor.

github.com/jsakamoto/Toolbelt.Blaz...

Tarik Alkathiri • Nov 8 '19

Dear sir,
Thank you very much for this great solution.
If you please post a small example on how to use the api's with this solution will be very appreciated.
Again thank you very much for that.

jsakamoto • Nov 9 '19

Is the sample code bellow helpful for you?

github.com/jsakamoto/Toolbelt.Blaz...

The sample code above describes how to retrieve the current language, and how to change the current language.

Tarik Alkathiri • Nov 10 '19 • Edited

Thank you sooooo much for your reply
it is really helped me and works great with me
but when i use arabic character in the localization (I am using Json) the characters displayed as �� .
Could you please help me in this.
I am sorry for asking too much but i am windows developer and completely new to Core 3 and Blazor Server-Side.

Kaushik Roy Chowdhury • Sep 18 '20

Hi @j_sakamoto ,
Thanks for the package and the article.
It will be great if you could give your valued inputs on the following issues I faced while trying the package as below:

I am using Visual Studio Community 2019 and ASP.Net Core 3.1 with Blazor templates. As suggested this package would work with the Blazor WASM app, but where do you register your service as there is no startup class in WASM(without ASP.Net Core hosted)
Also when I followed all the steps ditto (Blazor Server Project with Startup class), the project did not generate "Localized Text Resource JSON" files at the wwwroot/content/i18ntext folder.
In fact, no content folder was generated under wwwroot. Do you have any idea?

Anyway, when I went ahead despite the above issues and completed the rest of the steps and ran the application, it went to the fall-back "English" language.

It may be due to the absence of local text resource json files, but that's another point.
Can you help please?

Federico Di Marco • Aug 28 '20

Just a question about step 4. in a Blazor WebAssembly project there is no startup class how can I add your i18nText service ?

jsakamoto • Sep 5 '20

I'm sorry too late.
You can add i18ntext service in your Program.cs.

Please see also "(If) Your project is Blazor WebAssembly v.3.2+, you should edit Program class to do this" section in Setp.4, the README document on the GitHub repository.

github.com/jsakamoto/Toolbelt.Blaz...

Federico Di Marco • Aug 28 '20

Nevermind, how is written in your GitHub project page github.com/jsakamoto/Toolbelt.Blaz...

Tarik Alkathiri • Nov 18 '19

Mr.jsakamoto
Thank you very much for this excellent project.

are you planning to Localize Data Annotation and validation message in the near future?
Thank you in advance for your effort.