Converting External CSS to Inline CSS for Mail in Rails

Question

I am trying to create an application that will send out style-heavy emails and have required clients working except Google's Gmail. I researched the issue and it looks like Gmail strips out CSS from external files or CSS nested in the 'style' tag. Does an easy way exist of moving style from an external file to being inline?

Something that will take:

<style>
  .wide { width: 100px; }
  .cell { display: block; }
</style>
<span class="wide cell">Sample</span>

And convert it to:

<div class="wide cell" style="width: 100px; display: block;">Sample</div>

Thanks!

There's no source available, but here's a link anyway: beaker.mailchimp.com/inline-css — thirtydot
– thirtydot, Commented May 24, 2011 at 16:38
@thirtydot This is exactly what I'm looking for! Do you know if they offer an API? — Kevin Sylvestre
– Kevin Sylvestre, Commented May 24, 2011 at 17:08
I don't know. There's probably a similar tool available that has source code available. I'd Google for "style inliner", and see if there's anything available with source. If it's Ruby, great for you, otherwise you'll have to port it. I don't know how often you'd want to use the inlining feature (or how "mission critical" it is), but it might be worth considering the quick and easy approach of simply sending a direct POST request (like this) to here: beaker.mailchimp.com/inline-css — thirtydot
– thirtydot, Commented May 24, 2011 at 17:42

Lenart · Accepted Answer · 2014-03-25 15:57:58Z

42

Here are couple of gems you can check out:

premailer or premailer-rails for rails
mail_style
premailer plus (fork of the above version)
awesome_email
roadie

I have no winner at the time writing this answer but premailer seems to be most up-to-date.

edited Mar 25, 2014 at 15:57

answered Jun 3, 2011 at 16:59

Lenart

3,1411 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kevin Sylvestre Over a year ago

Thanks, I already went with premailer (see answer). Cheers!

Dave James Miller Over a year ago

There's now also Roadie - a fork of mail_style.

The Who Over a year ago

If you are on Rails, I recommend Roadie. Couldn't be much easier to implement.

Jason Swett Over a year ago

There also exists a premailer-rails gem which I was able to quickly put in place without problems. (I have no idea how it compares to Roadie.)

Lenart Over a year ago

Thanks @JasonSwett I've added it to the list.

|

Kevin Sylvestre · Accepted Answer · 2011-05-30 00:10:32Z

6

Added premailer:

def premailer(message)
  message.text_part.body = Premailer.new(message.text_part.body.to_s, with_html_string: true).to_plain_text
  message.html_part.body = Premailer.new(message.html_part.body.to_s, with_html_string: true).to_inline_css

  return message
end

def welcome(user)
  @user = user

  message = mail ...
end

answered May 30, 2011 at 0:10

Kevin Sylvestre

38.2k33 gold badges159 silver badges235 bronze badges

Comments

bpeterson76 · Accepted Answer · 2011-05-24 16:46:10Z

4

There's just one problem with your reasoning.....many styles, even inline, aren't supported.

Here's a reference for what is supported in email

In your example, you use the display: tag, which isn't supported by Outlook 07+

My company sends out thousands of emails a day and I often have a hand in building them. In practice, inline styles work, but it's not as simple as just in-lining everything and it will work. You have to be extremely careful about what you use and how you use it. I've resorted to my beginnings, doing nearly everything in pure HTML with tables for layouts. It's basically the only way I've found to get things to work nearly 100% of the time.

If you're building this functionality into an app that's going to get a lot of use, I'd also strongly recommend building in Email on Acid via their API. While you can code a very good quality output, Microsoft will no doubt find some way to make your valid code not work. Email on Acid will render using whatever madness Microsoft is using at the time to show you if your email works. It's pure genius and required use for those who are serious about sending a ton of emails. And no, I don't work for the company....

answered May 24, 2011 at 16:46

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

1 Comment

Kevin Sylvestre Over a year ago

Thanks. I have no problem modifying a stylesheet to only use supported files, however I don't want to move all the styles inline.

Collectives™ on Stack Overflow

Converting External CSS to Inline CSS for Mail in Rails

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related