Tim Turnquist

HOW TO: Get more consistent font-sizes in email templates

Discussion created by Tim Turnquist on Nov 24, 2015
Latest reply on Jan 20, 2016 by Tim Turnquist

We had a very hard time using the TinyMCE editor that comes with SugarCRM 6.5.22 CE keeping the look and feel consistent over multiple email clients since TinyMCE converts font-sizes to 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large' and 'xx-large' instead of PX size notation. An email in MS Outlook looked to have a larger font but using a browser for GMail, for example, the same font in the same email looked just right. Getting more control over our look and feel in how we present ourselves in emails and campaigns are big concerns for presenting a consistent and professional brand.

 

Since I am not an expert on TinyMCE, I used the before_save logic hook to convert it back to a PX size notation that most clients will render more similarly.

 

My logic hook looks like this:

<?php

$hook_version = 1;

$hook_array = Array();

// position, file, function

$hook_array['before_save'] = Array();

$hook_array['before_save'][] = Array(1, 'Font_Size_Adjustment', 'custom/include/emailTemplateUtils.php','emailTemplateUtils', 'change_font_size');

 

Then my new function looks like this:

<?php

class emailTemplateUtils{

  public function change_font_size( &$bean, $event, $args )

  {

  $patterns = array(

  '/font-size:\s*xx-small/',

  '/font-size:\s*x-small/',

  '/font-size:\s*small/',

  '/font-size:\s*medium/',

  '/font-size:\s*large/',

  '/font-size:\s*x-large/',

  '/font-size:\s*xx-large/',

  );

  $replacements = array(

  'font-size: 8px;',

  'font-size: 10px;',

  'font-size: 12px;',

  'font-size: 14px;',

  'font-size: 18px;',

  'font-size: 24px;',

  'font-size: 36px;',

  );

  $bean->body_html = preg_replace( $patterns, $replacements, $bean->body_html );

  }

}

 

So, this saves the body of the email in a format that will look consistent in most* email clients.  You can see the results below and how the AFTER font-sizes are more predictable and controllable -- even in MC Outlook.

 

font-test-results.jpg

 

*By most, I mean all of the ones that I have personally used and tested this on, which includes GMail in Chrome, Firefox, IE and Edge; email clients on Android and iPhone; and installed email clients like MS Outlook & an old Thunderbird client. I know that by no means is that an exhaustive list, but it represents a large percentage of clients that email are viewed on.

Outcomes