I've spent all my ideas why it happens and how to avoid it.
I compose HTML email and sometimes gmail breaks a layout.
It may insert random symbols (basically space character) and that leads to unpredictable visual artefacts like on a screenshot:
An area outlined with red contains html entity ▼ with artificially space character inserted by Gmail. Other arrow-down symbols stay unchanged.
Related
In web apps, there are often places where I display email addresses in a table column, and every time there is a long email address, it stretches the column and messes up the table width or column balance.
The current solution to this problem that I am using is to insert the <wbr/> tag to encourage the email to break cleanly at the midpoint when it is too wide. So a chunk of html like
user<wbr/>#domain.com
will render as
user#domain.com
when there is space and
user#domain.com
when there is not.
This is the display behaviour I want, but it is an unsatisfactory solution, because when I select and copy an email from the page, the embedded break is captured too, as an invisible control character, and corrupts the email address for pasting into other fields.
It seems there should be some directive in CSS that allows extra characters to be identified as preferable for word breaking on, in addition to the standard space and hyphen break characters.
This would create the same wrapping behaviour without needing to change the actual content by inserting the tag.
But I can't seem to find anything like this. What possible solutions are there?
Try to truncate email text in some width. Then add tooltip below email. So you can copy addresses and not break width of the column
I have a friend with a very long email address. They wish to display this address on their site, but on mobile devices it breaks their layout it overflows the page width.
I tried inserting a zero-width space and this helped with the layout problem, but it means that users cannot copy and paste the address into an email client.
While it's true that that problem could be solve by making the text a mailto: link, it did get me wondering:
Is there a way to direct a browser to optionally break on certain characters without having to insert non-printable characters that could cause copy-and-paste issues?
You do this with a strategically placed <wbr> element:
really.really.long#<wbr>email.address
It behaves identically to <br>, except that a line break will only be inserted when the email address cannot fit on one line. Like <br>, said line break is completely cosmetic (i.e. does not result in a non-printable character).
We generate quite large HTML emails - so hit the Outlook Email Client problem/software flaw where it decides to stick page breaks into the email if it thinks it's reached an A4 number of characters. [This is due to the Outlook Email Client using the Word engine to render it's HTML.]
This would not be a problem to us except that
It may occur in the middle of some HTML.
It's destructive.
Example of 1: If you have some html
<img src="http://
you may get
><img PAGE BREAK HERE
src="http://
Example of 2: If you have some html
<img src="http://
you may get
>**PAGE BREAK HERE** img src="http://
Which has destroyed the "<" of the "<img" tag.
Our emails are dynamic so each one may have this page break issue at different points in each email. :o( We try to get around it with 'sacrificial' areas of blank spaces to absord the page breaks - but this system starts to break down as our emails are become more complex over time.
Example of a potential work-around that did not work for us:
Mike The Coder - Page Break Before Always
Post that mentions issues in this area:
Horizontal Spacing Issues in Outlook 2007 and 2010
Do people know of other ways of trying to stop this or of working around it in the Outlook email client?
This article discusses a possible fix, but it would require a registry edit:
http://www.msofficeforums.com/outlook/6277-prevent-outlook-adding-line-breaks.html
Here is another article that has a workaround that could work for you possibly, without having to edit the registry:
http://answers.microsoft.com/en-us/office/forum/office_2010-outlook/line-break-in-plain-text-emails-in-outlook-2010/11d69847-f576-4002-b2fb-67bc59a69ce6?tab=AllReplies&tm=1329162544193
I am building quite a large html email. Outlook adds a random white space break near the bottom. Ive read that outlook 2007 uses word to render emails and if an email is a certain length it will force a page break in somewhere. there seems to be no work around for this. If i could add this page break in myself earlier in the email i could avoid outlook adding this in page break in an area i dont want it to. Is there a way to add a break break through the html?
Force page break in HTML/ASP when opening and printing multiple records
Is there some sort of formatting protocol for html email? We have an automated system that sends reports via email, when I look at the source I see them delimited by line length with an "=" breaking the line. That is, I get something like :
<html><body>some text some text some text some=
some text some text some text some text som<ta=
ble>some text some text some text some text <t=
r><td...
Does anyone have any more information on what this is?
You have to send the message as multi-part MIME. Best practices are:
Always send an HTML and a pure text version this way for mail clients that don't support HTML or some people just turn off HTML in emails (there are security/spam isssues with images although a lot of clients won't auto-download images from non-trusted sites anyway);
Images can be included in the message instead of as straight links. Straight links save on bandwidth but are a spam or even security issue (eg Internet Explorer had a buffer overrun bug with PNG images). Embedded images are references with cid values; and
Only use the most basic HTML. Browser HTML support varies from the primitive to the bizarre. When I looked into doing this we just couldn't get a consistent (or even acceptably different) look and feel on the handful of mail clients we investigated leading us to send our reports as attached PDFs, which are, in a lot of ways, preferable (they can easily be saved, for one).
As to your garbled message, it looks to me that your message isn't being correctly identified as HTML so the mail client is wrapping lines of text at 70 or so characters.
Your message is being translated somehow to "quoted printable" encoding. This is probably an issue with the mail headers you're creating.
Looks like it could be quoted-printable.
How do equals symbols in the HTML look, are they replaced by =3E?
Technically there's nothing wrong with this, but it would be nice to include an alternate plain text,
for those people who can't or don't want to read HTML mail (like me).
The email RFC enforces line length limits, specifically each line should be no longer than 78 characters, excluding CRLF. The equal symbols at the end of each line is just a line delimiter, which will be correctly parsed by any email reader that supports HTML, as long as the necessary headers are in place (Content-Text: text/html). More details on HTML in email conventions can be found here.