text-transform: lowercase is not working in email templates - html

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:

Related

Is it possible to use HTML spellcheck with text-transform: uppercase CSS and all upper-case text?

When an HTML text-area needs to capture data entry in all-capitals, typically the CSS text-transform: uppercase; is used to achieve this. Unfortunately, it appears the web browser's built-in spellcheck function seems to ignore all uppercase words by default. Is there any way to change this behaviour? I would like the spell-check to work even though the text is shown to the user in capitals.
In addition to this, after the entered data has been saved to a database in uppercase and then is being edited by the user in a different HTML form, I would like spelling errors to be underlined as such by the web browser's spellcheck function even though at this point they are actually uppercase characters and not just transformed by the CSS into uppercase.
<textarea spellcheck="true">Some delibrate spleling errors.</textarea>
<textarea spellcheck="true" style="text-transform: uppercase;">Some delibrate spleling errors.</textarea>
<textarea spellcheck="true" style="text-transform: uppercase;">SOME DELIBRATE SPLELING ERRORS.</textarea>
I'm only interested at this point in changes to the web browser's default behaviour in this regard, I'm not looking to use third party libraries and scripts if this can be avoided. Thank you.

How to separate text and links from an input textarea using a jsp page?

I´m really bad at programming, and I´m trying to do a web aplication using html and jsp pages, the application have to allows the users to post things, and well that is the problem, because I can´t separate text and links from the textarea.
There is the method to post.
<div id ="post">
<form method="post" action="Validaciones.jsp" >
<textarea name="comentario" rows="4" cols="20" maxlength="140" id="coment" >
</textarea>
<button name="publicar" value="publicar">Publicar</button>
</form>
</div>
But so, when I do:
String texto = request.getParameter("comentario");
It return the parameter as a String, so if a put, "Hello visit my page: www.ducks.com", there is a way to know what is text and what is the link?
Because the aplication have to show the links as links, with the (a) tag.
Thanks for the help.
Dont use plain textarea.You need to use editors like CKEditor,TinyMce(to name a few).
These editors help to maintain the text formatting and save it into the database.So when you view this on another page you will be able to see whatever you had written earlier in the editor.Hence these editors are called WYSIWYG (What-You-See-Is-What-You-Get)
So use these editors in your page.
Use regular expressions
Pattern p = Pattern.compile("^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0‌​-9\-\._\?\,\'/\\\+&%\$#\=~])*[^\.\,\)\(\s]$", Pattern.CASE_INSENSITIVE);
String toMatch = "this is a URL http://google.com";
Matcher m = p.matcher(toMatch);
With the url , use substring for the string.

HTML inside TextArea?

So I have this textarea in my website. By default, it has something like this as its contents:
Name : Sample Value
Age : Sample Value
Location : Sample Value
It is editable before the user hits the button and inserts it into the database, although I am not using a rich text editor since it's nothing but a simple text.
Since basic HTML codes are not browser readable inside the textarea tag, I used
to separate lines.
Now my problem is that I am not able to include the HTML code when I'm reading the value of the textarea tag in the server side.
Thus, the value inserted to the database is not HTML formatted as well, and when it is once again fetched into a web browser, it has no format at all.
What alternatives do I have? Thanks.
Not possible using textarea, use contenteditable DIV instead.
<div contenteditable="true"></div>
You can use getters and setter as shown below:
//Get content
var contents = document.getElementById("divId").innerHTML;
//Set content
document.getElementById("divId").innerHTML = contents
Here is the browser support for this approach.
Why don't you use JQuery and do this $(textarea).val() to get the value of the textarea as a string and use it server side. you might have to consider using Ajax to make a call to the server side method you want to pass the Html data.
The answer is very simple.
Use contenteditable DIVs instead of TextBox and TextArea.
But remember to add contenteditable="false" to all your inner HTML tags.
This worked for me.

How to disable an email link?

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&#64domain.com</a></p>
Result:
This is the email address: youremail&#64domain.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.

How to apply css to html so that it shows as the style property

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.