Converting Website to Another Language Wrecks Code

I was on my phone and got a pop up from Chrome to translate the website to Spanish. I clicked the button to translate the text. Why does this happen? What is the best way to get a website in another language? The website is composed of only HTML, CSS, and Javascript.

Spanish version

English version

Live website.
https://chessclock.tk/

Code.

The Google translate JS works by wrapping text in HTML elements that apply the translation. In general they’ve built it in such a way as to have minimal impact, and afaics it’s much better than it used to be a few years ago, but it can cause visual issues. I’ve only scanned the code, but you have some flex layout there, so if there’s another level of HTML between that and the original flex items, going to be an issue (found this out at previous job where some forms in our SPA kept logging crash errors, was because Russians were using Google Translate to try to get it to work for them, which in turn caused the HTML structure of the forms to change which in turn caused a crash :man_shrugging:t3:)

1 Like

Thanks Dan. That is interesting and good to know. I have seen the translation work well on other websites but not on my chess clock. The translation is a nice feature that would allow a lot of other people to be able to view websites not written in a particular language with the benefit of gaining a wider audience.