Mungkin Anda pernah mengalami website atau webapp yang Anda buat pada saat dipakai oleh user tulisannya berubah menjadi aneh-aneh. Ada sebagian yang sepertinya di translate oleh google translate atau sejenisnya, tetapi sebagian yang lain tidak berubah. Dan memang benar, bahwa hal ini disebabkan oleh fitur auto translate yang kemungkinan besar diaktifkan oleh user. Ditambah lagi web atau webapp tersebut ter-setting dengan bahasa Inggris. Untuk menghindari hal ini terjadi, solusinya sangat mudah, yaitu dengan menambahkan class notranslate pada bagian yang Anda tidak ingin bagian tersebut di-translate.
Berikut ini adalah contoh standar file html 5 dengan setting bahasa Inggris.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" value=""/>
<title>Document</title>
</head>
<body>
<div style="margin-top: 50px; text-align: center;">
<div>One Mine</div>
<div><small>id : 0100-XXXXXXXX</small></div>
<div><small>email : fulan@fulan.com</small></div>
</div>
<div style="text-align:center; margin-top: 50px;">Please translate this line</div>
<div style="text-align:center" >but do not translate this one</div>
</body>
</html>Kode html di atas adalah contoh sederhana tampilan halaman
profile user dimana terdapat nama user, diikuti, id, email dan lain-lain. Jika
kode tersebut Anda buka pada browser yang support auto translate, maka secara
otomatis akan terdeteksi bawah web tersebut menggunakan bahasa inggris dan
jika sudah disetting, maka akan otomatis melakukan auto translate.
Jika Anda ingin keseluruhan halaman tidak di-translate, maka tambahkan class="notranslate" pada tag html paling atas.
<!DOCTYPE html>
<html lang="en" class="notranslate">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" value=""/>
<title>Document</title>
</head>
Dengan menambahkan kelas di atas, maka keseluruhan halaman tersebut tidak akan di-translate.
Namum jika anda hanya ingin bagian-bagian tertentu saja yang tidak di-translate, maka silahkan hapus kelas notranslate dari tag html, kemudian tambahkan class="notranslate" pada bagian-bagian yang tidak ingin di-translate saja. Misalkan pada contoh di atas, saya hanya ingin agar nama, id dan email dan baris ke-dua yang tidak di-translate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" value=""/>
<title>Document</title>
</head>
<body>
<div style="margin-top: 50px; text-align: center;" class="notranslate">
<div>One Mine</div>
<div><small>id : 0100-XXXXXXXX</small></div>
<div><small>email : fulan@fulan.com</small></div>
</div>
<div style="text-align:center; margin-top: 50px;">Please translate this line</div>
<div style="text-align:center" class="notranslate">but do not translate this one</div>
</body>
</html>Ini adalah hasil translate halaman di atas setelah ditambahkan kelas notranslate hanya pada bagian tertentu saja.
Sekian tip/trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.