n. e•mog•ri•fi•er [\ē-'mä-grƏ-,fī-Ər] - a utility for changing completely the
nature or appearance of HTML email, esp. in a particularly fantastic or bizarre
Emogrifier converts CSS styles into inline style attributes in your HTML code.
This ensures proper display on email and mobile device readers that lack
stylesheet support., (*3)
This utility was developed as part of Intervals
to deal with the problems posed by certain email clients (namely Outlook 2007
and GoogleMail) when it comes to the way they handle styling contained in HTML
emails. As many web developers and designers already know, certain email
clients are notorious for their lack of CSS support. While attempts are being
made to develop common email standards,
implementation is still a ways off., (*4)
The primary problem with uncooperative email clients is that most tend to only
regard inline CSS, discarding all <style> elements and links to stylesheets
in <link> elements. Emogrifier solves this problem by converting CSS styles
into inline style attributes in your HTML code., (*5)
There are several options that you can set on the Emogrifier object before
calling the emogrify method:, (*13)
$emogrifier->disableStyleBlocksParsing() - By default, Emogrifier will grab
all <style> blocks in the HTML and will apply the CSS styles as inline
"style" attributes to the HTML. The <style> blocks will then be removed
from the HTML. If you want to disable this functionality so that Emogrifier
leaves these <style> blocks in the HTML and does not parse them, you should
use this option. If you use this option, the contents of the <style> blocks
will not be applied as inline styles and any CSS you want Emogrifier to
use must be passed in as described in the Usage section above.
$emogrifier->disableInlineStylesParsing() - By default, Emogrifier
preserves all of the "style" attributes on tags in the HTML you pass to it.
However if you want to discard all existing inline styles in the HTML before
the CSS is applied, you should use this option.
$emogrifier->disableInvisibleNodeRemoval() - By default, Emogrifier removes
elements from the DOM that have the style attribute display: none;. If
you would like to keep invisible elements in the DOM, use this option.
$emogrifier->addAllowedMediaType(string $mediaName) - By default, Emogrifier
will keep only media types all, screen and print. If you want to keep
some others, you can use this method to define them.
$emogrifier->removeAllowedMediaType(string $mediaName) - You can use this
method to remove media types that Emogrifier keeps.
$emogrifier->addExcludedSelector(string $selector) - Keeps elements from
being affected by emogrification.
$emogrifier->enableCssToHtmlMapping() - Some email clients don't support CSS
well, even if inline and prefer HTML attributes. This function allows you to
put properties such as height, width, background color and font color in your
CSS while the transformed content will have all the available HTML tags set.
The following selectors are not implemented yet:, (*20)
pseudo-elements (will never be supported)
Emogrifier requires the HTML and the CSS to be UTF-8. Encodings like
ISO8859-1 or ISO8859-15 are not supported.
Emogrifier now preserves all valuable @media queries. Media queries
can be very useful in responsive email design. See
media query support.
Emogrifier will grab existing inline style attributes and will
grab <style> blocks from your HTML, but it will not grab CSS files
referenced in elements. (The problem email clients are going to ignore
these tags anyway, so why leave them in your HTML?)
Even with styles inline, certain CSS properties are ignored by certain email
clients. For more information, refer to these resources:
All CSS attributes that apply to a node will be applied, even if they are
redundant. For example, if you define a font attribute and a font-size
attribute, both attributes will be applied to that node (in other words, the
more specific attribute will not be combined into the more general
There's a good chance you might encounter problems if your HTML is not
well-formed and valid (DOMDocument might complain). If you get problems like
this, consider running your HTML through
Tidy before you pass it to
Emogrifier automatically converts the provided (X)HTML into HTML5, i.e.,
self-closing tags will lose their slash. To keep your HTML valid, it is
recommended to use HTML5 instead of one of the XHTML variants.
Emogrifier only supports CSS1 level selectors and a few CSS2 level selectors
(but not all of them). It does not support pseudo selectors. (Emogrifier
works by converting CSS selectors to XPath selectors, and pseudo selectors
cannot be converted accurately).
Emogrifier is maintained by the good people at
Pelago, info AT pelagodesign DOT com., (*21)