I'm making an email template to be used with AWS. In the body text of the email we add a {username} variable which gets replaced by the user's actual username. In our case the username will be an email address and when Amazon works their magic it gets replaced with a mailto: link
e.g:
<p>{username}</p>
will become
<p>example#domain.com</p>
I want to be able to change the style of the link, but don't have access to the format of the <a> tag itself. Also because email clients don't widely recognise style tags I can't use CSS so all solutions must be inline.
I've tried:
<p style="color: #fff !important">example#domain.com</p>
and that has no effect.
Any ideas very welcome!
Fiddle for the sake of testing.
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.
What I would like to do is take the value of the href and assign it to the email property. Right now, I have something like this
email
The result is email="email"
The schema.org documentation has an example that uses the following syntax
jane-doe#xyz.edu
The result is email=jane-doe#xyz.edu
Do I have to spell out my email address in order to mark it up using microdata?
I know that some properties such as URL actually grab the href value instead of the text surrounded by the HTML tag. Is this possible to configure for the email property?
Schema.org’s email property expects Text as value.
It’s odd. In my opinion it should take URL instead, or at least allow boths ways ("Text or URL", as it’s the case with the menu property, too).
I can only guess that they chose Text because some publishers don’t want to specify their real email address for spam prevention reasons (for example, "john -at- example dot org" isn’t an URL, of course; this is also used as an example in Organization: <span itemprop="email">secretariat(at)google.org</span>), or because some would forget to add the protocol mailto:, but both of these "issues" aren’t reasons not to allow URL in addition.
Here’s a related thread in the public-vocabs mailing list:
Expected type(s) for email should include URL
If you don’t want to have the email address visible on the page, and you want to follow the current definition by using Text, you could use the meta element as an ugly workaround:
<p>
email
<meta itemprop="email" content="john#example.com" />
<!-- the value is not an URL but text -->
</p>
Side note:
Every conforming Microdata parser must extract "email: mailto:john#example.com" for this markup:
email
As the email property is used on a, the value is the href content and not the element content.
I am making an HTML template to email messages to users. I need to make all links in the message of given color.
For the tag <a> the following variant can be used:
...
The problem is that my template contains an email address as plain text. When the message is opened in Gmail, it makes a link from it. How to change that link's color?
Use an attribute selector:
a[href^="mailto"]
{
color:#009900
}
This will select any anchors that are mailtos.
Use a tag with its attribute href to have mailto: in it
a[href^="mailto:"] { //style your link hear }
separate each part of the email address alone using span tag
for example, if you have example#sitename.com it will be like below
<span>example</span>#<span>sitename</span>.<span>com</span>
I am using Ruby on Rails 3 and I would like to disable an email address link in a HTML email.
For example, if in an email I send some raw HTML like
Hi, you email is: <br/>
test#email.com
Gmail autodetects that this is an email address and changes it to
Hi, you email is: <br/>
<a target="_blank" href="mailto:test#email.com">test#email.com</a>
I would like to have this output
# Text without the 'mailto:' link
Hi, you email is:
test#email.com
How can I do that?
I have a more natural suggestion: wrap the email/url in an anchor hyperlink.
<a name="myname">test#email.com</a>
Since the text is already wrapped in a hyperlink, Gmail gives up and leave it alone. :)
(Note: also worked for Apple mail client.)
By 2021, the best for me would be:
<a href='#' style='text-decoration: none; color:#000000' name='myname'>x#somemail.com</a>
Explanation
After trying different services like Gmail, Outlook 365, Mailinator, and MyTrashMail, the results are:
• <a> - wrapping the email into anchor is essential, as raugfer pointed
• href='#' is necessary for Outlook. Linking to a fake anchor disables following the link.
• text-decoration: none, color:#000000 removes underline and changes color from blue link color to natural text color. For those who want not only to disable the link but make its appearance as usual text.
• name='myname' wouldn't harm, however, I haven't noticed its necessity.
Any javascript should be avoided, it won't pass Gmail. E.g. onClick="return false;", <script>...</script>.
If you want to change the cursor to default, cursor: default or cursor: auto won't help. For Gmail only, do without href='#'
Using <span> or <myspan> works for Gmail as Prince Mishra stated, but it doesn't help in all the services (in Outlook, for instance).
Even I had the same problem. Gmail would detect and convert mail addresses and ip addresses to links. I used string.replace to enclose dots (.) and # in blocks. And that works fine for me. sample python code looks like.
text = myname#gmail.com
chars = ['.','#']
encloseIn = 'span'
for char in chars:
text = string.replace(text, char, '<'+encloseIn+'>'+char+'</'+encloseIn+'>')
This is what worked for me in Laravel.
<a style="pointer-events: none; color: inherit">
{{$user->email}}
</a>
You can try
Hi, you email is:<br />
test#email.com
Reading all answers, I tried this in a Joomla article and it worked:
<p><strong>This is the email address: </strong><a name="whatever">youremail@domain.com</a></p>
Result:
This is the email address: youremail@domain.com
Worked on Chrome and Firefox.
Late reply but i think I have found a way to get over this auto linking issue.
The easiest and fastest way is to add a zero width non joiner between each alphabets. Now that sounded hard so I developed a small script that made things easy for me. Run the code below, add email address (paste or type) and it adds the required code around the email address. Paste the result in your email.
$('#userInput').keyup(function() {
var s = $(this).val().trim();
var text = "";
for ( var i = 0; i < s.length; i++ )
{
text += s[i]+'' ;
}
$('p').text( text );
});
#userInput{max-width:400px;width:100%;padding:10px 5px;}
*{outline:none;}
p,#userInput{font-family: 'Roboto', sans-serif;}
p{word-break:break-all;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<input type="text" id="userInput" />
<p></p>
You just need to add the "zero width space" character, his code in HTML is:
This code adds a space in the string where you need.
For a respectable solution you need to complement this method with a <nobr> tag, because with this tag you can prevent from breaking to the next line.
The only way to get around this is to convert the email address into an image and include that in the email. Of course this means the user might choose to not download the image, which would mean they won't get the email address either.
What it really comes down to is that you can't control what Gmail or any other email client does once it receives an email, so there isn't another way around this. It's Gmail's, or any other email client's, choice to do what they want with emails, and that includes hyper-linking email addresses.
If you are very adamant about not converting emails into hyperlinks you can try to do other things to conceal the fact that it's an email, like writing it out instead:
Hi, your email is:
test at email dot com
Of course this is probably more confusing. If I were you, I would simply settle for the fact that Gmail will hyper-link your emails.
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.