Jump to content
Please Use CODE Tags

How to translate multiple HTML pages to another language

Gamer4714
By Gamer4714
in Programming
 Share
Posted

So I have a website with many HTML pages and i would like to change the language of every HTML page according to the region without manually create a copy of every html page and changing the language.  Is there any way to do it without server-side scripts. I don't know how to write server-side scripts.

Thanks in advance.

 

If my answer is correct or is helpful please mark it as the solution. Quote me in your post to summon me. Beware that after summoning me ill never leave. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You could include all versions and only enable one of them using the display property.

Something like this, lets say "en" is the default: 

document.getElementById("introduction_en").style.display = "none";
document.getElementById("introduction_de").style.display = "block";

 

Or you could just create multiple sites, one for each language.

 

https://stackoverflow.com/questions/55407729/what-are-the-options-for-making-a-simple-static-website-multilingual

 

ಠ_ಠ

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
58 minutes ago, shadow_ray said:

You could include all versions and only enable one of them using the display property.

Something like this, lets say "en" is the default: 


document.getElementById("introduction_en").style.display = "none";
document.getElementById("introduction_de").style.display = "block";

 

Or you could just create multiple sites, one for each language.

 

https://stackoverflow.com/questions/55407729/what-are-the-options-for-making-a-simple-static-website-multilingual

 

I have thought of it but is there any other way to translate everything. It's a good option. If I don't get any other ideas  I will be going for this. Anyway thanks for your suggestion.

If my answer is correct or is helpful please mark it as the solution. Quote me in your post to summon me. Beware that after summoning me ill never leave. 

Link to comment
Share on other sites
Link to post
Share on other sites
  • 2 years later...
Posted

You could make a javascript function that loads another javascript file that contains the language parametres, and then make an onload function that updates either tag ID's or a different key. (in this case, data-translate-key)

 

Say you have lang.en.js (and lang.de.js, lang.nb.js etc) that contains something along these lines 

window.translations = {
    title: "Welcome",
    text: "This is a test"
};

 

A HTML body along these lines 

<body>
    <h1 data-translate-key="title">Loading...</h1>
    <p data-translate-key="text">Loading...</p>
</body>

and a script to load the desired text/javascript into the website, but defaults to lang.en.js 

window.addEventListener('DOMContentLoaded', function () {
            var userLocale = navigator.language || navigator.userLanguage; // e.g., "en-US"
            var simpleLocale = userLocale.split("-")[0]; // considering only "en" from "en-US"

            function loadScript(locale) {
                var scriptSrc = `lang.${locale}.js`;
                var scriptTag = document.createElement('script');
                scriptTag.src = scriptSrc;

                scriptTag.onerror = function () {
                    if (locale !== 'en') { // Avoids infinite loop in case lang.en.js also fails
                        console.error(`Failed to load script for locale: ${locale}. Falling back to English.`);
                        loadScript('en'); // Default to English
                    } else {
                        console.error(`Failed to load default English locale script.`);
                    }
                };

                scriptTag.onload = function () {
                    if (window.translations) {
                        var translatableElements = document.querySelectorAll('[data-translate-key]');
                        translatableElements.forEach(function (element) {
                            var translationKey = element.getAttribute('data-translate-key');
                            var translatedText = window.translations[translationKey];
                            if (translatedText) {
                                element.textContent = translatedText;
                            }
                        });
                    }
                };

                document.head.appendChild(scriptTag);
            }

            loadScript(simpleLocale);
        });

 

It's not perfect, but it works. You still have to know the proper locales to use, and it doesn't require the knowledge of the users location, but rather the language the user is actually using.

You could also make the website dynamically change the language, if you had some unload or reload function.

Attached a working example

lang.zip

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

for basic HTML it is much easier ti create 2 website and route in your webserver based on the user favored display language. The reality is that in the real world i have yet to work with a multilingual website where the translation was able to not break the layout. Like french version of an english site tends to be around 50% longer text for everything. If your site only contain like 100 words per page it's not a big deal but large website like parts manufacturer

Link to comment
Share on other sites
Link to post
Share on other sites
  • 4 weeks later...
Posted

Proper way would be to use the intl library in addition to things like reactjs/angular/vue

Sudo make me a sandwich 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×