<div style="font-family: Arial; font-size: 10px;">TEST</div>
I'm providing the above source as an html email to Outlook 2007, and it's rendering 7.5px font. Any ideas of what hack I need to make this work?
Edit: I'm setting the mail contents with body, like:
new MailMessage
{
IsBodyHtml = true,
Body = "<div style=\"font-family: Arial; font-size: 10px;\">TEST</div>"
};
I don't believe this is related though. Note that if I view source in the generated email the html is as expected. The problem seems to be only that outlook doesn't render it correctly for whatever reason.
The issue is that most email programs understand very little, if any, CSS. Try specifying the font details using the old, non-CSS methods. This method is deprecated, but unfortunately it is what we have to do to style the emails. It also prevents exact sizing of fonts.
new MailMessage
{
IsBodyHtml = true,
Body = "<font face=\"Arial\" size=\"1\">TEST</font>"
};
A few suggestions:
Use the HTMLBody property instead of Body when creating HTML emails.
Do your quotes need to be escaped like that? I've never seen that before, but I'm used to VB where literal quotes are doubled.
Check your read settings, you may be reading emails as plain text.
Related
In python, I have a piece of code, something similar to this.
def send_email_report():
message = {Some HTML Syntax with inline styles for building a form}
my_email = MIMEText(message, "html")
my_email["From"] = "XXXX#domain.com"
my_email["To"] = "YYYY#domain.com"
my_email["Subject"] = "Topic : Report Generation"
sender = "xxxx#domain.com"
receivers = ["yyyy#domain.com"]
with SMTP("localhost") as smtp:
smtp.login(sender, "Email-Password")
smtp.sendmail(sender, receivers, my_email.as_string())
I am able to receive the smtp-email in outlook. The formatting looks great, as all the < img > tags are generated perfectly and spacing is awesome.
But when I try to forward the email to another person, the alignments get messed up. Since html tag is built inside the message, only inline CSS is applied.
A few properties such as font color are retained, while majority of the properties like float:right, width of the whole container are not considered. At first, I thought it was because I have mentioned attributes such as width in px so I changed from px to % and rem, and added ! important as well, but of no use.
I also have an idea of converting the entire html assigned in message variable to a image and email that(since forwarding an html form as an image will not affect the styling), but I am not sure if it is feasible.
And also I don't want it as an attachment, I can have an html form or the image of the html form in email body. That's fine.
Any suggestions on how to maintain the style property while forwarding the generated email?
Any Help is appreciated, Thanks in advance.
I using sharepoint list having email template and using variables to get values.
Here is the sample code:
A new <span style="text-transform: lowercase;">$RequestType$</span> request has been submitted.
RequestType - StackOverflow
When I am receiving email in outlook I want text as:
A new stackoverflow request has been submitted.
But its coming as:
A new StackOverflow request has been submitted.
I don't see any issues in the code, need some suggestions.
Apparently MS Outlook only partially supports text-transform: https://www.campaignmonitor.com/css/text-fonts/text-transform/
Only uppercase is supported.
Your letters remain uppercase inside span, they are just displayed as lowercase, maybe that's why it doesn't work well... see what I mean:
Instead use PHP:
strtolower("Hello WORLD.");
https://www.w3schools.com/php/func_string_strtolower.asp
or JavaScript:
str.toLowerCase();
https://www.w3schools.com/jsref/jsref_tolowercase.asp
This looks good:
I have a css property inserted inline to an HTML Email text-transform:lowercase to a span element. when I send the email it's shows the fonts are in lowercase except outlook. Seems the font styles are not applied in outlook. What is the correct way to insert the style inline which works for outlook as well?
<a><span style="text-transform:lowercase;letter-spacing:4px;">shop now</span></a>
Outlook
Other Email Clients
Since Outlook 2007 Outlook has used Word for its HTML formatting which means that Outlook doesn't allow all standard CSS. One example is text-transform. Someone else posted a link to CampaignMonitor.com which states that text-transform is supported by Outlook, but that is not the case. You can see for yourself on Microsoft's website under the section "Unsupported Cascading Style Sheet Properties Compared with Cascading Style Sheets, Level 1": https://msdn.microsoft.com/en-us/library/aa338201.aspx
Generally Outlook supports text-transform as long as you put it in the right tag. That empty <a> tag could be throwing off outlook.
Try changing your code to this:
<span style="text-transform:lowercase;letter-spacing:4px;">shop now</span>
You can also place the inline styles right in the <a> tag and lose the <span> all together:
shop now
You could try to change the value to lowercase before putting it in the email perhaps like this:
var MyDiv1 = document.getElementById('text');
var MyDiv2 = document.getElementById('second');
var res = MyDiv1.innerHTML.toLowerCase();
MyDiv2.innerHTML = 'changed ' + MyDiv1.innerHTML + ' to ' + res;
MyDiv1.innerHTML = 'Now you can use the variable `res` as a variable in the email';
<span id="text">SHOP NOW</span>
<br />
<span id="second"></span>
I'm trying to change the font style, color, and size of the text inside an IFrame. The text is stored locally in a .txt file. How can I go about doing this?
You can do it by following code:
<iframe id="myFrame" src="text.txt"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.onload = function () {
var body = frame.contentWindow.document.querySelector('body');
body.style.color = 'red';
body.style.fontSize = '20px';
body.style.lineHeight = '20px';
};
</script>
To do this, the easiest method would be to directly include the styles in the file.
Just change your txt file to a .html file and use the style tag to change the look of the page via css
For example, your style tag could look like this:
<style>
body{
font-family: sans-serif;
color: red;
font-size: 2em;
}
</style>
This will create rather large text with your default sans-serif font and a red text color
This is not possible. Due to security issues regarding altering/manipulating website data/copyrights/login info, etc., Chrome, Firefox, and all other major browsers do not support this feature. However, something like what #DmitriyLoskutov mentioned would work in a minor or a hardly known browser. It is otherwise impossible to change the content, style, or script on a page that is not your own or not on the same page for security reasons. There are javascript libraries that can bypass this sort of thing, but it is unwise to use these as they can be harmful scripts and violate browser terms of use. The best way to style anything has always been to style it from inside the file. The best thing for you to do is create an html file with text on it, then style it (as #robinp7720 mentioned).
I want to protect my e-mail address on webpages.
But I don't know JavaScript and PHP. I know only HTML and CSS.
So, please help me how to protect my email address with CSS only.
It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.
Simple HTML and CSS code:
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
Output of above code:
jhon#gmail.com
Please note:
Here I'm just used two extra attributes.
1) data-user write your e-mail id user name in reverse.
2) data-website write your e-mail id website in reverse.
Try this code:
.e-mail:before {
content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d";
}
<span class="e-mail"></span>
This is just the email encoded in hexadecimal.
One of the simple and effecting ways of embedding emails in html is by using hex values!
for example hex value for john#smith.me is:
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
and you can use the following tag in your HTML Code
email me
This is a really simple and effective way of embedding email in a webpage.
you have hided the "maito:" and the email in this way.
you can use this tool to generate the %64 hex code
you can also use this tool to generate the hex code
As you likely know: Obfuscation techniques can't be foolproof and harvester bots will continue to improve. There are a number of arguments against obfuscation.
That being said, here are some additional techniques to the rather interesting ones you already mentioned.
HTML techniques:
Using html comment signs or substituting html entities has some years ago already been shown to be a pretty weak approach.
Using an image instead of text is a pain for most users, including the non-visually impaired as they can't cut and paste. It works well though.
One interesting pure HTML approach that allows for using a hyperlink was suggested a while back.
Email me.
CSS techniques:
These are of course not fool proof either. Besides what you've mentioned already:
Using CSS display:none is also useful. Bots that simply strip out style tags will include the hidden text in the harvested address.
jhon<span style="display:none">-anti-bot-bit</span>#gmail.com.
A web icon font could be used to pull in an # icon and it's possible to do this in a way that won't trip up screen readers. I've not seen a web icon font with an # icon for obvious reasons, but this would work.
Update: Font Awesome now has an # icon. Maybe someone suggested it after seeing this post ;-).
You can combine the two answers above (Ans1 & Ans2) to make the mailto works with the css for usability.
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>
You can use Font Awesome:
In <head>:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
In <body>:
<p>john<i class="fa fa-at"></i>hotmail.com</p>
I would recommend using JavaScript if possible over CSS and JavaScript as it can manipulate the dom. Easily you could do it with code like
<div onclick="document.write('joe#' + 'joemaller.com')">Email Me</div>
This a simple but not ideal solution.
JFiddle; http://jsfiddle.net/yFKUD/
Flexbox allows you to change the order of items inside a containing element, we can use this to separate and reorder parts of our email address in the html but present them to the user as a legible whole.
div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
<div>
<span>example.com</span>
<span>#</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>
Here we use flex-direction: row-reverse to reverse the order of the elements.
A scammer could probably work this out if he tried hard, all he has to do is reverse the elements to recreate the address. For a more thorough attempt we can specify the order manually.
div {
display: flex;
}
<div>
<span style="order: 3">#</span>
<span style="order: 4">example.com</span>
<span style="order: 1">Email me at the following address: </span>
<span style="order: 2">user</span>
</div>
Here we use order to specify our own order so a simple reverse cannot be used.
Unfortunately doing any of this breaks copy/paste so your user will have to type out the address, but it is better than receiving correspondence from another Nigerian prince. Use this in conjunction with other techniques for a truly bulletproof email address.
I tend to use this for my clients:
hello@goodbye.com
Pretty sure it works 90% of the time judging by the experience and requires no CSS/JS to work. Though I don't think there is any point of protecting emails nowadays anyway as almost all CDN-s do it for you automatically using JS.
Use the reCAPTCHA Mailhide API
Mail hide using api
Use encoder Formate
Encode site url to convert data email
Hide email using CSS trick (direction property)
Demo
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a#b.com should be written as moc.b#a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.
<style type="text/css">
.backwards {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>
<span class="backwards">moc.b#a</span>
If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.
How to hide your email address from spammers with JavaScript
Let's look at more advanced methods that use javascipt to hide the email (name#domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers:
Basic Email Script
<script language=JavaScript>
<!--
document.write("name" + "#" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "#" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "#" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'#'+'domain'+'.com'" >Send me an email</a>
External JavaScript file
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
I was checking for techniques for a while now. While I agree that obfuscation is not a total solution, I believe it's still pragmatical as I benefit it by getting get zero spam with obfuscation.
Some of the techniques discussed:
CSS trick to make e-mail only visible to humans (see accepted answer from #user3087089)
Add HTML garbage to trick scrapers (see answer from #fzzylogic)
Inject e-mail using JS (as suggested by #Dean and others)
Another technique that was not suggested here to never have your e-mail in plain form through using base64 encoding. You simply encode your e-mail and use JavaScript to inject it to the webpage.
I built safe-email project on GitHub to combine all of the listed techniques. It's pretty easy to use with free license. You can check examples in CodePen. Feel free to use it & dig it and contribute.
It's vanilla-JS only, lightweight with no dependencies and you configure it with Base64 encoding of your e-mail.
I used for some time a similar JavaScript technique that allowed the "mailto" functionality while keeping the HTML valid :
HTML :
user
JavaScript (small jQuery plugin)
// mailto anti-spam
;(function($) {
$.fn.mailTo = function() {
this.each(function() {
var user = $(this).html() || false,
domain = $(this).attr('href')
.replace('http://www.', '')
.replace('www.', '')
.replace('http://', '')
.replace('/', '') || false;
if (user && domain) {
$(this).html(user + '#' + domain).attr('href', 'mailto:' + user + '#' + domain);
}
});
return this;
};
})(jQuery);
Usage
// protect inline e-mails
$('.js-contact').mailTo();
http://codepen.io/ced-anamorphik/pen/QwVrKZ
But lately Google Chrome displayed a phishing warning on the website.
As this is not entirely wrong (technically the link is spoofed indeed), is there another simple solution to this ?
To disable people to copy it try like:
span.email {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
And HTML:
<span class="email">jack#gmail.com</span>
JSFIDDLE
And to protect against bots use CSS Codedirection:
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe#zyx
</span>