search

Irrelon / jquery-lang-js

i18n Allow instant language switching on HTML pages without reloading the page.
https://www.irrelon.com
362 stars 132 forks source link

Questions about usage #130

Closed tomasts248 closed 3 years ago

tomasts248 commented 3 years ago

So can it be used like this?

<!DOCTYPE html>
<html>
<body>
<p lang="en">This is a paragraph.</p>
<p lang="es">Esto es un parrafo.</p>
<p lang="fr">Ceci est un paragraphe.</p>
</body>
</html>

or even better like this

<!DOCTYPE html>
<html>
<body>
<p>
<span lang="en">This is a paragraph.</span>
<span lang="es">Esto es un parrafo.</span>
<span lang="fr">Ceci est un paragraphe.</span>
</p>
</body>
</html>
Irrelon commented 3 years ago

Hi @tomasts248 no you don't add each language element. You add one and provide the language it is in, then you provide a JSON object with the original phrase and the translated phrase. The example /index.html in the repo provides all the info you need on how to use the switcher.

The reason it doesn't work the way you have suggested is because if the page is scanned by googlebot or other search engine, it would read lots of text in different languages repeated over and over instead of just one language. You'd also end up with 3 times the amount of HTML data being transmitted to a client wasting bandwidth.

You could do it the way you have suggested, then it would be very easy to just hide all the language elements that were not the current language on page load, but then you would have a horrible mess on the page until the JS executes to hide them. I guess you could mitigate that by putting a CSS selector in like [lang!="en"] { display: none; } and ensure the CSS is loaded before render, but this would likely have little effect on search engine indexing.

tomasts248 commented 3 years ago

Hi! Thank you so much for explaining.. understood!! ;-) Have a nice week!!