The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Advice for re-styling e-mail for timelines

  • # June 30, 2014 at 1:34 pm

    I have been given the task of creating an interactive timeline. I need to be able to click an element that opens a nicely styled preview of an email message. Currently, I can’t find any easy way to consistently grab the various field values (like To: From:, etc)

    Has anyone come up with a way to isolate the various field values in an html email message so that they can be styled using CSS ?

    I will submit examples if this doesn’t make sense. Thanks for any replies.

    # June 30, 2014 at 1:43 pm

    Currently, I can’t find any easy way to consistently grab the various field values (like To: From:, etc)

    You’ll need to explain (at a minimum) where you’re “grabbing” the info from.

    # June 30, 2014 at 3:08 pm

    Source: Sample E-mail To Convert

    Destination:Example of desired HTML (from email)

    @un-traq-ed, thanks for your reply.

    # July 2, 2014 at 7:42 am

    This reply has been reported for inappropriate content.

    That source is just the HTML content of the email?

    # July 2, 2014 at 12:48 pm

    Here is a link to my jsfiddle content. I was hoping it wouldn’t have to come to this:

    I still have to create handlers for different data types (like dates, urls, email addresses, etc)

    # July 2, 2014 at 1:16 pm

    Source: Sample E-mail To Convert

    This is not an email. It is only HTML markup.

    Here is a link to my jsfiddle content.

    This is an email. Do you need to do this via JS? Is it possible, for example, to parse the email server-side and send JSON to the browser? That would be the simplest, most robust approach.

    Do you need to be able to handle multi-part emails? If not, you might be able to split the email into header / body (split on the blank line), and then split the header into individual lines (split on newline) so you can read each name:value (split on colon).

    Displaying the body as HTML is risky, since it would allow for code injection. Not sure how to approach that from the client side.

    All this is fairly complex, though. There are server-side tools and libraries that could handle it much easier, and much more reliably. Plus, it would be a small fraction of the work.

    # July 2, 2014 at 2:33 pm

    Thanks for your input. I am deleting this question. I could really care less any more. I will manually convert the 50 or so messages. e-Mail is pathetic.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed