Yes. I think you have covered everything that can be translated into Chinese. Thank you for the amazing work. This will be very helpful when i add localization support.
Localization Implementation
I have improved the localization functionality using a pure frontend approach (HTML + JS). Please run app.py
to test it.
My Implementation Approach:
-
Persistent Language Selection
UseslocalStorage
to persist the selected language. Even after refreshing or closing the browser, the previously selected language remains. -
Tag-Based Localization via HTML Attributes
All relevant HTML elements are assigned adata-languageTag
attribute with corresponding values. Then, a matching dictionary file such asstatic/js/web/zh.js
is used for localization. -
Item Localization via GrimTools JS Files
Language JS files from GrimTools are directly used (e.g.,static/js/db/zh.js
) to localize items via their tag mappings. -
English as the Default
The default HTML text and theItem
column in the CSV serve as the English source. Therefore, you only need to add atag
field in the CSV and fill it in accordinglyāno need to modify existing data.
Project Modifications:
- I created
button_language.html
andbutton_language.css
separately to contain all localization-related code, keeping original files untouched as much as possible. - The only changes made to
index.html
were:- Adding
data-languageTag
attributes to the HTML elements that need localization - Including
button_language.html
No other modifications were made.
- Adding
Issue:
Currently, item names are not localized because the CSV file does not contain tag
fields for the items. Please add the relevant tags in the CSV file to enable this functionality.
Workflow for Adding or Updating a Language:
- Copy the relevant language JS file from GrimTools to
static/js/db/
- Add the language option in the language selection dropdown
- Provide
static/js/web/zh.js
as a template to other translators. Once translated, they should store it instatic/js/web/
with the appropriate filename. - For any new content, just add
data-languageTag
to the new HTML elements. The translator can then update the respectivestatic/js/web/*.js
dictionary with translations.
web.zip (375.0 KB)
Hey! Thank you so much for this. Really appreciate the effort. I will integrate it into my codebase as soon as possible and will let you know once its done (hopefully by end of the week).
Thanks a ton!
Hi bro, Iāve further optimized the code
This time, you donāt need to modify index.html
directly ā just add one line and modify two line, thatās all.
What to Do
- Add one line to include the template before the </body>:
{% include 'button_language.html' %}
- Modify two line to add a fixed attribute to the itemās HTML tag. Set the value using the itemās
TagName
(this is just my assumption ā youāll need to adjust it based on the actual CSV field name):
<a href="{{ values.Component.Url }}" target="_blank" data-language-Tag-And-Source-EN="{{ values.Component.TagName }}">
{{ values.Component.Name }}
</a>
<a href="{{ values.Augment.Url }}" target="_blank" data-language-Tag-And-Source-EN="{{ values.Augment.TagName }}">
{{ values.Augment.Name }}
</a>
How It Works
This time, I dynamically extract content from HTML tags using JS and use it as the key in the translation dictionary. Iāve tested it thoroughly ā it works perfectly.
In fact, itās almost completely decoupled from your core code. The impact is minimal, so you can continue developing freely without worrying about compatibility.
My Approach
- Use JavaScript to extract inner content from relevant HTML elements, and save it to a
data-language-Tag-And-Source-EN
attribute as both the original English and dictionary key. - Some HTML tags are excluded from processing ā you can view or modify the list in
button_language.html
. - The value in
data-language-Tag-And-Source-EN
is used as the translation key. (Although a bit long, it supports nearly all characters except\n
and\p
.)
See the dictionary in:static/js/web/zh.js
- Once the content is extracted, translation is triggered automatically.
- To restore English, the script auto replaces the tagās content with the original text stored in
data-language-Tag-And-Source-EN
. - Any tag that already contains
data-language-Tag-And-Source-EN
will be skipped during extraction.
This means you can pre-add this attribute manually ā the JS wonāt overwrite it, but the translation will still work normally. This is especially useful for translating item names.
Sorry to interrupt your work
Iām sorry to make you stop your current task to look at my new code. But if this improves efficiency and reduces future disruption to your development, I hope youāll understand.
Incremental Update Based on Website Changes
I noticed that your website content has changed,
so I only provided the incremental part this time.
You can try modifying index.html
as I suggested and see if it works.
app2.zip (377.5 KB)
Thanks again. I have not yet integrated the code you provided earlier as I am traveling. I will update the code with the latest one you have provided.
Oops, enjoy your trip!
I just saw your pull request on github. I have requested 2 very minor changes there. Please do make the changes and commit again. I will happily approve the pull-request.
Thank you. Since there is no itemtag field in the CSV, I havenāt modified the other two rows. Please consider whether to add it.
Will adding the itemtag to the CSV allow the item names to translate into other languages? Iām not sure how it works so just checking with you.
I have translated it above.
Yeah. I remember that you translated all the item names as well. Much thanks for that again. Was just wondering how to integrate it into the new framework that laozhangg provided.
I just approved your pull request and made the remaining changes myself. Thanks for the localization support again.
Do you have any idea on how the item names also can be displayed in chinese. tt300 here managed to translate them all into chinese, just wondering how we can include them in your localization framework.
Over the weekend, I didnāt have GitHub set up on my home computer,
so I had to postpone this work until now.
Sorry about that.
Iām trying to sync the latest code and test the item tag feature.
Please wait a bit.
No problem. You can always make a new pull request. Some code has been updated yesterday so you can just pull that and make changes.
Iāve completed the modification and tested it, and there are no problems. Iāve submitted a pull request. Although the py file has been modified, the original processing logic has not changed. Iāve only added an ItemTag display.
This is the test resultļ¼
https://imgur.com/a/O7Cljds
Looks great. I just have 1 comment. Do you have a discord id? Would be easier and quicker to communicate instead of over the forum or github comments
My Discord ID is also laozhangggg
Iām a player from China, so I need special methods to access Discord, but Iāve managed to get it working ā itās just that my online times are a bit uncertain.
You can add me as a friend, and Iāll try to be online more often.
@tt300 You can check the tool now. It now has been fully translated into chinese along with item names. Really appreciate your help with it as well.
The Tool can be accessed here
Everything else is fine, except that the camp names are reversed in two places. I donāt know where the problem lies.
I think both those words mean Respect in English so you and @laozhangggg have them in different order. You both should discuss and decide which means which