To prevent some browsers to translate certain term on a HTML page, I use the class="notranslate" class name in a wrapping tag.
It works fine for Google Chrome with its built-in Google Translate plugin.
But it doesn't work with Microsoft Edge.
According to their documentation, it should.
I also tried the translate="no" property on the tag, without any success.
Any idea how to solve this?
If not, I would like to prevent auto-generated translations on Edge, but not on the other browsers.
You can try to add this line inside <head></head> to disable automatic translation in browser:
<meta name="google" content="notranslate" />
I've tested and it can work well in Edge and Chrome.
Edit:
If you only want to restrict automatic translation in Edge only, you can add the <meta> tag dynamically. You can first check if the browser is Edge, if yes then add the tag. You can refer to the following JavaScript code:
<script>
if (window.navigator.userAgent.indexOf('Edg') > -1) { //detect if Edge browser
var meta = document.createElement('meta');
meta.name = 'google';
meta.setAttribute('content', 'notranslate');
document.getElementsByTagName('head')[0].appendChild(meta);
}
</script>
The google tag for not translating the page has been updated to
<meta name="googlebot" content="notranslate">
For more info check this link: https://developers.google.com/search/docs/crawling-indexing/special-tags
This worked for me in Safari, Edge, and Chrome:
<html class='notranslate' translate='no'>
<head>
<meta name="google" content="notranslate" />
<meta name="robots" content="notranslate">
...
</head>
<body translate="no" class="notranslate">
...
</body>
</html>
Related
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
My dotnetnuke website looks fine in IE9 but breaks in IE8 & IE7.
I've tried the meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
but if i put it in the ascx ( 1st line ) but it doesnt show up. And if i put it in the page setting - tags , it shows up at the bottom of the header. So it also doesnt work that way, how to get the tag on top or is there any other way?
Thanks in advance.
You can use some code to add the directive. In your skin (or, in a control that is references by each skin control), add the following:
<script runat="server">
private void Page_PreRender(object sender, EventArgs e)
{
var meta = new HtmlMeta();
meta.Content = "IE=edge";
meta.HttpEquiv = "X-UA-Compatible";
this.Page.Header.Controls.AddAt(0, meta);
}
</script>
This requires that AutoEventWireup is true in the Control directive. Otherwise you'll also need to override OnInit or something like it to manually wire up the event.
I hate to suggest this, but you might need to add this to default.aspx in the root of your website, if you do this though, you'll need to remember to do it again when you upgrade DNN in the future.
I haven't seen this done before, but this is how it was done for emulating IE 8/7 when using IE 9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
If not, then try this one:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Add those to your header with the other meta tags. This should force IE10 to render as IE9.
I just made a website for a french restaurant. The website is in english, but I guess there is enough french on the website (labeled pictures of menu items) to prompt the visitor to translate the website if using Chrome.
Is there something I can add to the html to prevent chrome from asking to translate the page? I'd assume it'd be something like <html lang="en"> but that doesn't work.
Any ideas?
Thanks
New Answer
Add translate="no" to your <html> tag, like so:
<html translate="no">
MDN Reference
Old Answer
(This should still work but is less desirable because it is Google-specific, and there are other translation services out there.)
Add this tag in between <head> and </head>:
<meta name="google" content="notranslate">
Documentation reference
So for the ultimate solution I made;
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<meta name="google" content="notranslate" />
</head>
<body>
...
</body>
</html>
This worked for me.
The meta tag in the <head> didn't work for me, but
class="notranslate"
added to a parent div (or even <body>) did work and allows more precise control of the content you don't want to be translated.
Solution:
<html lang="en" class="notranslate" translate="no"> <!-- All translators -->
<head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head> <!-- Close head -->
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")
DIV1
<div translate="no">
Try translating me!
<b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
Now, you can do it!
<b>Olá - Hello - Hola</b>
</div>
Note that this example has some problems with the StackOverflow viewer.
Disclaimer: This answer is repeated, on it is on the Community Wiki.
Disable google translate on your website
Add this to your <head></head>:
<meta name="google" content="notranslate" />
Add this in your <head>:
<meta name="google" content="notranslate" />
and change your <html> tag to
<html lang="en" class="notranslate" translate="no">
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
/* Just some basic styling */
div[translate] {
width: 50%;
border: 1px solid black;
padding: 20px;
border-radius: 7px;
text-align: center;
font-family: Arial;
}
<div style="display: flex;gap:20px;">
<div translate="no"> <!-- Disables translation -->
Enabled<br>
<b>Olá - Hello - Hola</b>
</div>
<div translate> <!-- Enables translation -->
Disabled<br>
<b>Olá - Hello - Hola</b>
</div>
</div>
Note that this example has some problems on the stackoverflow viewer.
The google tag for not translating the page has been updated to
<!-- opt out of translation features on all search engines that support this directive -->
<meta name="robots" content="notranslate">
or
<!-- opt out of translation features on Google -->
<meta name="googlebot" content="notranslate">```
For more info check this links:
https://developers.google.com/search/docs/crawling-indexing/special-tags
https://developers.google.com/search/docs/appearance/translated-results
Moreover, I had to update this because it was not working on Edge browser by using only translate="no" as below:
<html translate="no">
So for a full solution as mentioned here too, i had to do something like this to not translate anything from search engines
<html lang="en" class="notranslate" translate="no">
<meta name="robots" content="notranslate" />
...
</head>
FYI, if you want something that will work for all content in your site (including that which is not HTML), you can set the Content-Language header in your response (source) to the appropriate language, (in my case, en-US).
This has the benefit here is that it will "disable" the offer to translate the page for you (because it will know the source language correctly), but for other, non-native readers, they will still have the option to translate your site into their own language, and it will work correctly.
(Also for my use case, where Chrome was offering to translate well formatted JSON from latin to English, that BS goes away.)
My Windows is german in german.
I made the following experiences in Chrome:
If I set
<html lang="en" translate="no">
Google Translate comes up with suggestion to translate english.
Definitely I have to omit the lang property. This works for me:
<html translate="no">
No popup is coming up and the translation icon in the URL field is no longer displayed.
sometimes you need to block not all html, but specific element, in such case you could add class="notranslate" only to that element.
ie. <div class="notranslate"> some content </div>
I'm able to resize Text Field in Chrome & other browsers. However, I'm not able to make the same work in IE9, even after installing the Chrome frame for IE. I use for Ex:
style="resize:horizontal;"
Ex:
Can someone suggest me how to make it work in IE browsers?
Thanks.
*EDIT*
Ok, So after a lot of tweaking around, I finally made it to work for IE9 !! Yay :)
First things first : You need to install the Chrome Frame on IE9.
Then you add some tags for it to render on IE.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Here's the complete code :
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- <meta http-equiv="X-UA-Compatible" content="chrome=IE9">
<!-- X-UA-Compatible: chrome=1-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<head>
<title>Text Feilds</title>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="txt1" style= "resize: horizontal"; />
<input type="text" id="txt2" style= "resize: both"; />
</body>
</html>
You can’t, in any simple way. According to http://caniuse.com/#feat=css-resize there is no support in IE 9, and IE 10 status is unknown.
If you have a look at http://www.w3schools.com/cssref/css3_pr_resize.asp you will see that this feature is not supported in IE at all.
If you want to support this feature in all browsers you will have to create your own resize function in javascript (our use any framework if there is one).
That's HTML5 markup and older versions of IE do not support HTML5 or HTML5 ready. IE 9 only supports it in parts
I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}