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
Related
I am working with a website that has its origins back in 2001. In those days tables were heavily used for layouts, and Internet Explorer was a dominant browser. Back then there was a requirement to use non-breaking spaces in empty table cells to avoid losing borders. As a result, all the layout code creating cell contents had a wrapper function that would replace any empty cell with a non-breaking space.
Over the years, tables went away from our code base, as did the need to support versions of IE that had this quirk. However the wrapper function to put in the non-breaking space is still in place in our code.
In searching the web there are lots of references to non-breaking spaces and even some articles about the need for them with old versions of IE. However, I did not find anything that specifically addresses whether we can eliminate the practice described in this question completely.
My questions are as follows:
Can this practice be eliminated for web pages that only need to display in modern browsers?
Is there still a need for the non-breaking spaces in tables put into html emails? This is the important part of this question, as tables are still required for layout in emails as far as I know. And there are lots of email clients out there that are inaccessible to us for testing.
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).
I've found the soft hyphen character (U+00AD SHY) very useful but I am wondering if there is the same thing that will tell the browser where to break long words for wrapping without adding any character at all?
For example, let's say you have a narrow column in HTML with newspaper justification and there is a long URL explicitly in the text itself. You could add the soft/shy hyphen I mentioned but then when a user copy and pastes the URL it will contain those dash characters. An ideal situation would be the same visual results without a hyphen character so that the user may copy and paste the long word(s).
Thoughts or suggestions?
I tried searching for this but most of what I come up with is non-breaking space characters and essentially I am looking for the opposite.
UPDATE: I found the ZERO-WIDTH SPACE (U+200B) but it still has the problem that the character is preserved during copy&paste into the address bar so the results are even more confusing to the end user.
You want the HTML5 tag <wbr>, which is specified to do exactly what you are asking for.
If you can't rely on HTML5, U+200B ZERO WIDTH SPACE () should also work.
(The effects of copying text out of an HTML document, unfortunately, are underspecified. If <wbr> doesn't do what you want upon copy-and-paste, you might want to bring it up to the WhatWG — the easiest way to do that is probably to file a Github issue on the spec.)
In our internal CRM we have a simple html input textarea where you can leave notes and messages. We later use this information to email this, only since that email is in HTML the formating is all wrong.
So if for example I have the following in my MYSQL table:
This is a test message!
Some line
Some more lines
If we later email this it comes out as:
This is a test message! Some line Some more lines
This is obviously not wanted but I don't want to add some complicated WYSIWYG editor to our CRM. Can I allow line-breaks? If so, how?
I don't want to use <pre></pre> tags because I believe it is not supported in all email clients (I could be wrong).
You could use text/plain header, if you don't intend on using any HTML tags in the message. (That would mean no colors, no links, and no text formatting).
You could also make a quick and dirty solution to replace all \ns in your text to <br>\n.
The problem is that html renders all whitespace as single spaces. If you look at the source of the email once it's received, I'll bet the newlines will be there (if they're not, then the problem is on the email generation side).
<pre></pre> is the simplest thing you can do, I think.
A basic solution would be to replace new lines with <br>s.
A smarter one would give special consideration to multiple line breaks (e.g. treating /\n\s*\n/ as a point to end a paragraph and start a new one (</p><p>)).
The specifics would depend on the language you are using to generate the email from the MySQL data. You might want to consider something like a Markdown parser.
You can send emails in two flavours: html and plain text. In Html, line-breaks are not processed (just like in your browser). Looks like this is what you are doing here.
Two solutions: either you send emails in plain text, or you change line-breaks to <br>.
Assuming PHP is in the mix, there's the nl2br() function. Otherwise, rolling your own won't be hard.
The root of this issue is that browsers (mail clients can either use embedded browsers for rendering - Outlook for example - or behave like browsers) will take any amount of whitespace/new line/carriage returns/etc outside of tags in HTML and render them as a single whitespace. This is so you can do things like indent your markup and still have it look sane in the browser.
You will have to insert markup in order to control the rendering as has been has suggested: convert newlines to <br> or <p> tags and so on, much like cms WYSIWYG editors do. Either that or chose a different format for your emails.
I have a HTML document with many tables which I want to be printed. The problem is that sometimes, the paper end is reached in the middle of a row, so half of it is printed in one page and the rest in the next page, even cutting a single line of text in two parts.
Is there any way to avoid this?
NOTE: I have already read this question, but I need a solution which not involves CSS, because is not working at the target computer, and I can't change that.
Even with CSS, the issue is difficult due to limited browser support to CSS pagination (as can be seen from the answers to the question you refer to).
Through years, this problem has existed, and I don't think anyone has souped up an HTML trick for the purpose. There have been some tricks for trying to prevent page breaks inside a paragraph or list by placing it in a one-cell table, but this has worked occasionally only, and besides, in your case you already have a table.
So I’m afraid there is no solution, apart from using elements that cause extra vertical spacing, like a pre element containing empty lines (to push the entire table to next page—this may of course make things much worse when the parameters of the situation, like page formatting and paper size, differ from your expectations) or splitting a table into two tables, possibly with extra space between them (even more problematic).
If the target computer doesn't support (enough of) CSS, then you can create a PDF document on the server. If you set the Content-Type correctly, the browser will download the document and start the PDF reader of the system.
If this isn't possible, then there is no solution.