loading...

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]
markdown guide
 

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

 

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.

 

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.

 

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.

 

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.

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?

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

 

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.

static

 

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!

 

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.

 

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

 

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?

 

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.

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!

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

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

 

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.

 
 

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.

 

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.

 

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.

 

Great utility, but please update the generated code to use the following comment line so it plays nicely with code analysis.

// <auto-generated />

code of conduct - report abuse