Jump to content

4.0 Post HTML compatible with email clients?


KT Walrus
 Share

Recommended Posts

I have a use case for sending copies of forum content (posts) as email messages (with title being the subject and the post body being the message body). It would help if all posts stored in the database be able to be sent with the HTML and plain text versions and have the HTML version render properly in all modern email clients (Outlook, Thunderbird, OS X Mail, iOS Mail, etc.). This probably means that the HTML use inline styles that are compatible with most/all email clients and complex BBCodes like for embedding a YouTube use email compatible embed code (or just links to the video with a PNG shown representing the video).

Are the changes made to the RTE editor and HTML processing in 4.0 going to make it easier to send a WYSIWYG email for all content (posts)?

Or, am I going to have to hire a sharp programmer to make this hook for me?

Link to comment
Share on other sites

  • Management

To expand on this a little.

You can't reliably use CSS in email HTML markup as not all clients support it, so you'll need to use inline styles.

So, while you may have this in the post database:

<div class='ipsQuote'>I am a quote</div>

You would need something like this for it to render nicely in an email client:

<div style='border:1px solid #000000; background-color: #fefefe; color: #3a3a3a; padding: 6px;'>I am a quote</div>

Naturally, having inline styles stored in the database is a big no-no because if you wanted to change the style of your quotes, you couldn't.

The only way to do it would be to dynamically replace strings like:

"class='ipsQuote'"

with

"style='border:1px solid #000000; background-color: #fefefe; color: #3a3a3a; padding: 6px;'"

But that would need quite precise regex to account for "class='ipsQuote ipsPad ipsSmall'" and so on.

In short: we can't store email friendly HTML in the ibf_posts table and parsing it on the fly is tricky.

Link to comment
Share on other sites

I think the newsletters mod in marketplace by author headstand may meet your needs. the items it sends out include the embedded media/pics/etc and can include multiple replies, but you would have to take a close look to make sure it meets needs. its the closest thing I can think of for this.

Link to comment
Share on other sites

But that would need quite precise regex to account for "class='ipsQuote ipsPad ipsSmall'" and so on.

In short: we can't store email friendly HTML in the ibf_posts table and parsing it on the fly is tricky.

I understand that this would be tricky and that is why I was hoping 4.0 would make this easier. I thought 4.0 might have the ability to build a parsed representation of HTML (as part of the process of making the RTE HTML "safe" and this might let you inline CSS styles (even handling multiple classes). The style of a quote, for example, could be translated into simple CSS that isn't changeable later.

I guess the task is not really to make the post in an email message look exactly like the post displayed in IPB where the look can be skin-able. The task is really to generate acceptable looking HTML messages. It might not be that hard to generate simplified HTML from the full HTML that the RTE will allow to be produced. Ironically, this is probably much easier to do when you stored all messages in the database using BBCodes. The translation to email format would be to just use different definitions for the BBCodes.

Another approach that might be easier for me is to replace the RTE Editor and associated HTML processing to use the RoundCube mail RTE Editor and HTML processing. RoundCube Mail is available as a framework for doing core processing so maybe taking their implementation for the RTE Editor and message body display could be easily adapted for 4.0. I would probably lose some of the more advanced features that the 4.0 RTE supports right out of the box like embedding YouTube videos, but maybe these could be added over time, if my users needed them.

Link to comment
Share on other sites

  • Management

In 4.0, the post data in the posts table is shown on display. There is no "pre" and "post" parsing anymore.

But we still have to use use CSS classes, otherwise you can't theme post items such as CODE, Quote and so on.

If any of us used inline styles for anything, Rikki would kill us.

Link to comment
Share on other sites

You *could* put the stored HTML post in an email then add CSS classes, and that'd work for a number of email clients - but not all. Recent versions of Outlook dropped the IE engine and instead use the Microsoft Word HTML engine, for example, and GMail just cuts out all custom CSS... so it's a battle that's hard to win.

I spoke about that a bit in the Templates blog entry actually. Just to get our initial templates looking good, we reviewed 900+ screenshots in a whole heap of email clients using LitmusApp.

Link to comment
Share on other sites

You *could* put the stored HTML post in an email then add CSS classes, and that'd work for a number of email clients - but not all. Recent versions of Outlook dropped the IE engine and instead use the Microsoft Word HTML engine, for example, and GMail just cuts out all custom CSS... so it's a battle that's hard to win.

97/2000/2003 choice of IE/WORD, 2007 and up uses word only so its not really recent, been like that since early 2006.

but your point still stands, I would expect trying to make it work would actually break it.

would think this would be better suited to a mod that won't affect core.

Link to comment
Share on other sites

You *could* put the stored HTML post in an email then add CSS classes, and that'd work for a number of email clients - but not all. Recent versions of Outlook dropped the IE engine and instead use the Microsoft Word HTML engine, for example, and GMail just cuts out all custom CSS... so it's a battle that's hard to win.

I spoke about that a bit in the Email Templates blog entry actually. Just to get our initial templates looking good, we reviewed 900+ screenshots in a whole heap of email clients using LitmusApp.

Thinking about this more, I think I am willing to accept that not all post emails would display perfectly in all mail clients since I could always insert a link to the post in the message so the few posts that might have some issues can be viewed in the viewer's browser. Really, probably 99% of posts don't have complex HTML other then quote/code boxes. I don't know much (or anything) about 4.0 and Email Templates, but maybe the templating system will have enough support for including an HTML version of a post body that would work (for 99% of posts) in most email clients?

On the other hand, I'm thinking the best choice for me will be to replace the RTE Editor with the TinyMCE Editor used in RoundCube and just use RoundCube code to generate the HTML for storing in the database and converting the HTML post to a proper email message.

Or, maybe just disable those features of the RTE Editor that produce non-email compatible HTML and disable changing links to YouTube videos into embeds for the email clients.

Anyway, I guess I will just wait for the 4.0 beta to see what is doable and whether I need to do my own customization for formatting HTML posts for email messages.

Link to comment
Share on other sites

I just thought of another option. If the 4.0 RTE editor used unique classes for all generated HTML (instead of, for example, "class='ipsQuote ipsPad ipsSmall'" which uses classes that are used elsewhere 4.0) and 4.0 placed these post styles in a separate CSS file (and used CSS selectors to define the scope of these styles in the HTML), I could easily create a separate CSS file for sending the post in email.

It is my understanding that most modern email clients support the script tag for CSS. But if I really wanted, I could probably easily regex the post HTML to inline the styles.

In fact, I think 4.0 could support this approach for everyone so the ability to email post bodies (in HTML) was a built in feature.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...