寫一個偵測Google翻譯套件切換語言調整頁面css樣式的方法-教學撰寫:徐嘉裕Neil hsu

Google翻譯套件是可以崁在網頁上面讓user自行切換的網頁程式，目前雖然已經停止申請必須使用Chrome瀏覽器的內建翻譯功能，但如果是ie或是ff還是可以用Google翻譯套件，之前有寫過一個教學有需要的朋友可以參考看看!!

https://neohsuxoops.blogspot.com/2018/12/googlejs.html

這些是前言，目前遇到需要處理的問題是如果網站是繁體中文，切換成英文或日文因為字元變多了，會導致版面變形，像下圖這樣：

文字都疊再一起了，物件也跑位了，所以必須寫一段code去偵測切換的語言來調整css的文字大小的字句間距，方法如下：

//Google翻譯套件程式區

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

//判斷Google翻譯套件語言自定義css樣式區

<script>
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event) {

//預設值
$languages=$('html').attr("lang");
languagesfunction($languages=$languages);
});

//點擊按鈕
$('#google_translate_element').on("click", function () {
$('#google_translate_element').bind('DOMNodeInserted', function(event) {

// alert($('html').attr("lang")); //去掉註解可以看目前的語言lang

$languages=$('html').attr("lang");
languagesfunction($languages=$languages);
});
});

//判斷語言自定義CSS

function languagesfunction($languages){
if($languages=="ja"){
$("body").css({"font-size":"75%","line-height":"150%"});
}else if($languages=="en"){
$("body").css({"font-size":"75%","line-height":"130%"});
}else{
$("body").css({"font-size":"100%","line-height":""});
}
}
});

</script>

再來測試一下，切換成英文看一下版面有沒有正常

文字跟字距都有按css設定做了調整，這樣就沒問題可以跟客戶交差了

備註說明：

bind()方法，會建立一個新函式。該函式被呼叫時，會將 this 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。

工作心得撰寫：徐嘉裕 Neil hsu