The code in this gist can be used to provide simple translation on your website. The translation itself uses Google Translate, as can be indicated in the translator.js code. Google Translate is definetely not perfect at translation, in fact it is far from it, however it does provide a simple way to translate your website.
Created
April 6, 2021 07:05
-
-
Save rudrathegreat/e4a92acffa00cc04e335bad65d710bf8 to your computer and use it in GitHub Desktop.
Translation Capabilities on Site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Languages</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="google_translate_element" class="translator"> | |
| <div class="custom-arrow"> | |
| <img src="arrow.svg" alt=""> | |
| </div> | |
| </div> | |
| <span> | |
| <script src="translator.js"></script> | |
| <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> | |
| </span> | |
| <p>Hello. My name is rudrathegreat. This is a basic sentence. This paragraph is going to be used for translation purposes. This paragraph will test how good online translation is on the internt. This website will use Google Translate to make it easier to translate this paragraph into a variety of languages, including Hindi, Chinese, French, Greek, etc. Hopefully this goes well</p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| background-color: #eee; | |
| color: #333; | |
| text-align: center; | |
| font-family: Arial; | |
| font-size:1.25em; | |
| display:flex; | |
| justify-content: center; | |
| width: 80%; | |
| margin-left:10%; | |
| height:100vh; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| body * { | |
| margin:1.5vh 0; | |
| } | |
| .translator select { | |
| border:none !important; | |
| background:none !important; | |
| color:white !important; | |
| padding:1vh 2vw; | |
| border-radius:0; | |
| -webkit-appearance:none; | |
| width:100%; | |
| padding-left:5%:; | |
| } | |
| .translator { | |
| position:relative; | |
| background:#333; | |
| margin:0 !important; | |
| z-index: 1; | |
| width:50%; | |
| } | |
| .translator .skiptranslate { | |
| width:100%; | |
| height:100%; | |
| margin:0 !important; | |
| } | |
| .translator .skiptranslate div { | |
| width: 100%; | |
| height:100%; | |
| margin: 0 !important; | |
| } | |
| .translator .custom-arrow { | |
| position:absolute; | |
| top:0; | |
| right:0; | |
| height:100%; | |
| width:20%; | |
| background:#555; | |
| margin:0 !important; | |
| z-index: -1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .translator .custom-arrow img { | |
| width:50%; | |
| transform: rotate(90deg); | |
| } | |
| @media screen and (min-width: 900px) { | |
| .translator { | |
| width:15%; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function googleTranslateElementInit() { | |
| new google.translate.TranslateElement( | |
| {pageLanguage: 'en'}, | |
| 'google_translate_element' | |
| ); | |
| if(typeof(document.querySelector) == 'function') { | |
| document.querySelector('.goog-logo-link').setAttribute('style', 'display: none'); | |
| document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0'); | |
| } | |
| $('.goog-logo-link').css('display', 'none'); | |
| $('.goog-te-gadget').css('font-size', '0'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment