When developing websites or applications that support multiple languages, we often encounter situations where we need certain parts of the code or text to remain untouched by automatic translation services.
This can be particularly important for code snippets, technical terms, product names, or any content that must retain its original meaning and format regardless of the language the user translates the page into.
In this article, I will explore some strategies and best practices to make identified specific lines of code immune to translation.
This will ensure they stay consistent and functional across multiple languages, irrespective of the translated language or browser language.
Why Does Some Part of Webpage Need Protection from Translators?
Most translation engines, such as Google Translate, are designed to automatically convert visible text on a webpage or app interface into the selected language.
While this is helpful in making websites globally accessible, it can become problematic when translation engines attempt to translate technical terms, code samples, or specific phrases that should not change.
For example, if you are sharing JavaScript code on a website, you would not want function names, variables, or syntax to be altered by the translator.
The same applies to proprietary product names, company slogans, or any other text that has a unique significance that could be lost in translation.
Some Situations Where Translation Interference is a Problem
- Code Samples and Programming Terms: Code snippets in documentation or blog posts should remain intact and not be translated.
- Brand Names or Trademarks: Protecting company branding from being inaccurately translated or misrepresented.
- Special Symbols or Mathematical Equations: Translation tools can misinterpret mathematical symbols or formulas, leading to errors.
- User Interfaces (UI) Elements: Some buttons, forms, or dynamic text may break functionality if translated incorrectly.
Best Practices to Prevent Translation of Specific Text on Webpage
1. Use HTML translate Attribute
One of the simplest ways to prevent certain lines of code from being translated is by using the translate attribute in HTML.
This attribute can be set to "no" to ensure the content inside an element is not translated.
Example:
<p translate="no">const greeting = "Hello, World!";</p>In the above example, the text inside the <p> tag will not be translated by any automatic translation tool.
Where to Use It:
- Code snippets
- Proprietary terms
- Dynamic content that should stay in the original language
This approach works effectively when we have to safeguard technical terms or specific phrases in small portions of text.
However, it’s important to note that not all browsers or translation tools respect the translate attribute, so this should be combined with other strategies for a broader impact.
2. Use Code Blocks for Technical Content
For technical content such as code samples, it’s a good practice to use <code> or <pre> HTML tags.
These tags inherently tell the browser that the enclosed content is code, and translation engines typically avoid translating code blocks.
Example:
<pre><code>
function add(a, b) {
return a + b;
}
</code></pre>Here, the code inside the <pre> and <code> tags will not be modified by a translation service. This is a safe and structured way to display code on a webpage, ensuring it remains unchanged regardless of the page’s language setting.
3. Wrap Text in span with CSS Class
Another effective method is using CSS to prevent translation. By assigning a custom class to specific lines of text or code, you can tell translators not to alter the content.
This method can be combined with the translate attribute to add an extra layer of protection.
Example:
<span class="notranslate" translate="no">SELECT * FROM users;</span>In your CSS file, you would add:
.notranslate {
unicode-bidi: plaintext;
}This approach helps ensure that technical phrases, proprietary names, or any specialized content are safe from being incorrectly translated.
4. Use lang Attribute for Specific Languages
In cases where specific terms should remain in a certain language, you can use the lang attribute to indicate that a particular block of text belongs to a specific language.
This can prevent translation tools from trying to convert that text.
Example:
<span lang="en">HyperText Markup Language (HTML)</span>By specifying that the content is in English using the lang="en" attribute, many translators will leave the term in its original form, especially if it recognizes it as a technical term.
5. Apply JavaScript to Handle Dynamic Text
For dynamic applications where text may change based on user interaction or environment, you can use JavaScript to render text in a way that bypasses translation.
For instance, you could append content to the DOM after the page has fully loaded, ensuring that the text doesn’t get picked up by translators.
Example:
document.getElementById('myCode').innerText = 'const x = 10;';In this case, the JavaScript inserts the text into the page dynamically, which is less likely to be altered by automatic translation tools.
This method is particularly useful for single-page applications and interactive web elements.
6. Use Server-Side Rendering (SSR) for Sensitive Content
For complex web applications, another way to ensure that specific lines of code are not translated is by using Server-Side Rendering (SSR) to load the content.
This approach involves rendering the page on the server and sending a fully prepared HTML file to the client, which allows greater control over how content is presented.
With SSR, you can wrap sensitive content in elements or inject it dynamically from the server, reducing the likelihood of translation errors.
7. Escape Special Characters and Symbols
Another good practice is to escape special characters when including code snippets or technical terms in your HTML.
Translators may misinterpret certain symbols, so escaping them ensures they are preserved exactly as they appear.
Example:
<div>Hello World!</div>Escaping symbols like < and > can prevent unwanted changes to the structure of the code.
Common Mistakes to Avoid
While there are many methods to prevent translation of specific lines of code, it is essential to avoid certain pitfalls:
- Over-reliance on CSS: While CSS can prevent display issues, it should not be your primary solution for controlling translations.
- Ignoring Accessibility: Always ensure that your methods of preventing translation do not interfere with the accessibility of your website. Some techniques may inadvertently block screen readers or create issues for users with disabilities.
- Inconsistent Use of Methods: Be consistent across your website or application. Mixing methods can lead to unpredictable results, especially with large-scale content management.
Conclusion
To protect specific lines of code or text from being altered by automatic translation services, we recommend combining several strategies using the translate attribute, code blocks, CSS classes, and server-side rendering.
By following these best practices, you can ensure that essential content remains intact, delivering a consistent experience for users worldwide.
