Email comes in all shapes and sizes, from complicated nested multi-part structures to simple text bodies. But even messages comprised of just plain text require special preparation to safely and properly display from within a webmail application. For security purposes any HTML within a text message needs to be converted to appropriate entities. Using the CSS "white-space: pre;" setting is effective as well, the CSS equivalent of <pre> tags, but this makes word wrapping the message in such a way as to ensure that the webmail interface remains consistent very tricky. Neither approach is ideal (entities vs pre-formatted), and both suffer from some similar display problems. For example a line containing 200 characters in a row with no spaces, such as a long URL will either spill out from it's containing div or expand the width of the page to force a horizontal scroll bar (yuck). To further complicate the situation we need to be able to create links to both urls and email addresses within the text as well as highlight reply quoted sections, not to mention take into account converting the original character set to UTF-8 for display in the page. For Hastymail 2 I have been working on a new system that preps the text body in such a way as to address all of these concerns and creates a situation in which the text is wrapped by the browser automatically for almost any practical resolution without spilling out of its container and without horizontal scroll bars, and without a user setting that defines the maximum line length, all the while maintaining the intended format of the original message as closely as possible within the constraints of the presentation medium.
In a more traditional approach, like the Hastymail 1 code, users have a "wrap long lines at" setting that defines the maximum line length allowed. This is then used to trim down any line that is longer by first attempting to locate a space to wrap the line at, or failing that, will hard wrap the line by breaking it at the maximum length. Needless to say if the line is a URL and we want our application to make it "clickable" chopping it into parts will render the resulting link unusable. This also makes highlighting quoted reply text sections in the message difficult. The appropriate maximum line length for a given screen resolution and default browser font size is variable, so setting a good default for most users is problematic.
The basis of the new method for word wrapping text parts in Hastymail 2 is simple, though it's implementation is made more complex by all the aforementioned requirements for proper display. The order in which we apply each type of preparation is critical, for example if we convert any native HTML to the corresponding entity, substr() or strlen() don't accurately reflect the line as the user would see it, the effect being incorrect wrapping or worse, broken HTML entities because they were seen as part of the string and a line break was inserted within the entity. So before any entity replacement occurs, and keeping the text character set in mind, the new routines scan the text body looking for any block of text that is more than 40 characters long and has no spaces. Rather than insert a newline or line break, we instead insert a placeholder into the string after every 40 characters of unbroken text. A section of text that contains 200 characters in a row would then have 4 placeholders inserted. After the HTML conversion to displayable entities we substitute the placeholders with a simple "<span> </span>". These spans have CSS applied to them that makes them invisible (width: 0px; font-size: 0px;). When the final HTML is sent to the browser however the spans inserted within the text create additional "break points" at which the browser will automatically wrap text to fit within the bounding div. Sections of text that contain spaces at least every 40 characters are left untouched because browsers can auto-wrap these without our help. the result is that text will fill up all the available space, yet at the same time wrap to fit without overflow as the width is diminished.
The code for the new Hastymail text body wrapping can be viewed online at our SVN repository at Source Forge here:
The primary function to prepare message text parts for display is prep_text_part() beginning on line 405. The routines incur the additional overhead of several regular expressions and string manipulation functions, however testing with large text bodies has shown that the performance impact is minimal and a worthwhile sacrifice.
| No Images with this post |
| No comments posted yet |
