Sanitize some styles (like ignore display:none and some other potentially harming/misguiding styles, apply extra !important widths or overflows to make sure boundaries of the mail app are respected)
I think the gmail messages rest api endpoint has a format option where you can request the version that is already processed by gmail. I’m not exactly sure, but if it does, it will have done all that sanitization for you.
Otherwise, your best bet is to find some css parsing/inlining library to utilize.
I think the answer is to use an iframe. You don’t need to have an external page/route to show inside the iframe. Instead you can use javascript to add the content. There’s an example using jQuery here: http://stackoverflow.com/a/18044234 (I have pasted the code below).
var emailBody = ...some Gmail API stuff...
var context = $('iframe')[0].contentWindow.document;
$body = $('body', context);
$body.html(emailBody);
There is this thing called Scoped Css. The support for it is only firefox 36 as of now. but there is a Javascript polyfill . Even with this polyfill you got issues. Best to use iFrames. nothing wrong with iframes, they are awesome .
Thanks for your answer.
I checked with gmail api and there’s is a raw format option but it is not giving details like who sent the mail it was just raw msg.
It was same as when you goto emails and click on right corner of a mail and then select original message.
I’m planning to use I frames now, If we apply styles in iframes, do they apply to all the app?