Як автоматом перекласти HTML сайт на українську?

З 16 липня 2022 року набрали чинності норми закону «Про забезпечення функціонування української мови як державної», який був ухвалений ще у 2019 році. Отже, з 16 липня 2022 року:

  • будь-який товар, на якому встановлено комп’ютерну програму — від автомобіля до пральної машини чи електрокавоварки, повинен бути «локалізований» для реалізації в Україні;
  • усі інтернет-ресурси (вебсайти, сторінки в соцмережах, ютюб-, вайбер-, телеграм-канали, мобільні застосунки тощо), які використовуються в якості інтернет-представництв суб’єктів господарювання, зареєстрованих в Україні, повинні мати основну версію українською мовою, яка має завантажуватися для користувачів в Україні за замовчуванням;

За невиконання закону Уповноважений із захисту державної мови зможе накладати штраф від 3400 до 8500 грн., якщо порушення вчинено вперше, а за повторне порушення накладатиметься штраф від 8500 до 11900 грн.

Як зробити україномовну версію сайту?

Велика кількість українських вебсайтів до цього часу публікувалася російською мовою, починаючи з новинарних сайтів і закінчуючи інтернет-магазинами. Та зараз закон диктує нові правила для вебсайтів в українському сегменті, вони не просто повинні мати україномовну версію сайту (якщо він публікується на російській чи іншій мові), але і завантажуватися за замовчуванням повинна саме українськомовна версія.

З липня 2022 року усі нові українські веб-ресурси здебільшого вже створюються на рідній мові, навіть без російської! Так, закон безперечно працює! Але як бути зі старими сайтами?

Для різних платформ, які підтримують оновлення, підготовлені модулі та плагіни, які дозволяють якщо не автоматично, то руками створити різні локалізації сайтів. Але як бути з сайтами, скажімо, на чистому HTML коді? Найбільш простий, зручний і доступний для сайтів варіант перекладу будь-яких сайтів (не тільки HTML ) – це скористатися усіма можливостями Google перекладача!

Щоб на вашому російськомовному сайті з’явилися два прапорці української і російської мови (при натисканні на них вміст сайту буде на льоту перекладатися на відповідну мову), на сайт достатньо розмістити наступний код:

<a href="#" onclick="doGTranslate('ru|ru');return false;" title="Russian" class="gflag nturl" style="background-position:-500px -200px;"><img src="//sochka.com/translate/flags/blank.png" height="32" width="32" alt="Russian" /></a><a href="#" onclick="doGTranslate('ru|uk');return false;" title="Ukrainian" class="gflag nturl" style="background-position:-100px -400px;"><img src="//sochka.com/translate/flags/blank.png" height="32" width="32" alt="Ukrainian" /></a>
<style>a.gflag {vertical-align:middle;font-size:32px;padding:1px 0;background-repeat:no-repeat;background-image:url(//sochka.com/translate/flags/32.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//sochka.com/translate/flags/32a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}</style>
<div id="google_translate_element2"></div>
<script>function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ru',autoDisplay: false}, 'google_translate_element2');}
</script><script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

<script>/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
/* ]]> */
</script>

Як зробити українську мову за замовчуванням на російському сайті

Наведений вище код додасть на російськомовний сайт українську версію, але вона не буде загружатися за замовчуванням. Як зробити саме переклад (українську) мовою за замовчуванням? Для цього потрібно відслідкувати, чи вибрав якусь мову користувач на сайті. Якщо не вибрав, то натиснути (клікнути) на український прапор після завантаження сторінки. Додамо ще такого коду:

<a href="#" id="load_clicked" onclick="doGTranslate('ru|uk');jQuery(this).parent().parent().find('div.selected a').html(jQuery(this).html());return false;" class="nturl selected"></a>
<script>jQuery(document).ready(function() {
function gt_get_cookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var googTrans = gt_get_cookie('googtrans');
if (googTrans === '') { 
jQuery('#load_clicked').click();
}
});
</script>

Цей код на JS читає cookie під назвою googtrans (саме туди Google перекладач вносить відомості, який напрям перекладу вибрав користувач). Якщо cookie googtrans пустий, то натискаємо кнопку з напрямком перекладу: doGTranslate(‘ru|uk’) – з російської на українську.

Як позначити фрагменти/сторінки, які не потрібно перекладати

Google будет пробувати перекладати ваш PHP чи JS код, цитати які звучать в оригіналі і т.д. Щоб Google перекладач ігнорував блоки з текстом, можна їх позначити атрибутом translate=”no”. Це виглядає так:

<span translate="no">Цей текст не буде перекладено</span> 
<div translate="no">Цей текст також не буде перекладено</div>

Якщо необхідно ігнорувати вміст цілої сторінки, можете додати:

<meta name="google" value="notranslate">

всередині елемента <head>, і Google не перекладатиме жодного тексту на вказаній сторінці.

 

 

Автор: Ярослав SOCHKA
Якщо стаття виявилася для Вас корисною, можете сказати "дякую", перерахувавши кілька гривень на власний розсуд (натисніть на кнопку): Подякувати

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *