|
hace 5 años | |
---|---|---|
.. | ||
src | hace 5 años | |
CHANGELOG.md | hace 5 años | |
LICENSE | hace 5 años | |
README.md | hace 5 años | |
composer.json | hace 5 años |
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 manner
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.
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.
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.
Emogrifier automagically transmogrifies your HTML by parsing your CSS and inserting your CSS definitions into tags within your HTML based on your CSS selectors.
For installing emogrifier, either add pelago/emogrifier to your project's composer.json, or you can use composer as below:
composer require pelago/emogrifier
First, you provide Emogrifier with the HTML and CSS you would like to merge. This can happen directly during instantiation:
$html = '<html><h1>Hello world!</h1></html>';
$css = 'h1 {font-size: 32px;}';
$emogrifier = new \Pelago\Emogrifier($html, $css);
You could also use the setters for providing this data after instantiation:
$emogrifier = new \Pelago\Emogrifier();
$html = '<html><h1>Hello world!</h1></html>';
$css = 'h1 {font-size: 32px;}';
$emogrifier->setHtml($html);
$emogrifier->setCss($css);
After you have set the HTML and CSS, you can call the emogrify
method to
merge both:
$mergedHtml = $emogrifier->emogrify();
Emogrifier automatically adds a Content-Type meta tag to set the charset for the document (if it is not provided).
If you would like to get back only the content of the BODY element instead of
the complete HTML document, you can use the emogrifyBodyContent
instead:
$bodyContent = $emogrifier->emogrifyBodyContent();
There are several options that you can set on the Emogrifier object before
calling the emogrify
method:
$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.
Note: This option will be removed in Emogrifier 3.0. HTML tags with
display: none;
then will always be retained.$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
attributes set. This option will be removed in Emogrifier 3.0. Please use the
CssToAttributeConverter
class instead.Download the composer.phar
locally
or install Composer globally:
curl -s https://getcomposer.org/installer | php
Run the following command for a local installation:
php composer.phar require pelago/emogrifier:^2.2
Or for a global installation, run the following command:
composer require pelago/emogrifier:^2.2
You can also add follow lines to your composer.json
and run the
composer update
command:
"require": {
"pelago/emogrifier": "^2.2"
}
See https://getcomposer.org/ for more information and documentation.
Emogrifier currently supports the following CSS selectors:
~
(one word within a whitespace-separated list of words)|
(either exact value match or prefix followed by a hyphen)^
(prefix match)$
(suffix match)*
(substring match)The following selectors are not implemented yet:
<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?)
Currently, a refactoring effort is underway, aiming towards replacing the
grown-over-time Emogrifier
class with the new CssInliner
class and moving
additional HTML processing into separate classes which inherit from
AbstractHtmlProcessor
. You can try the new classes, but be
aware that the APIs of the new classes still are subject to change before
version 3.0.0.
This is how to use the new CssInliner
:
$visualHtml = \Pelago\Emogrifier\CssInliner::fromHtml($html)->inlineCss($css)->render();
You can also use the DOMDocument
created by CssInliner
to process it further:
$domDocument = \Pelago\Emogrifier\CssInliner::fromHtml($html)->inlineCss($css)->getDomDocument();
$prunedHtml = \Pelago\Emogrifier\HtmlProcessor\HtmlPruner::fromDomDocument($domDocument)
->removeInvisibleNodes->render();
The HtmlNormalizer
class normalizes the given HTML in the following ways:
The class can be used like this:
$cleanHtml = \Pelago\Emogrifier\HtmlProcessor\HtmlNormalizer::fromHtml($rawHtml)->render();
The CssToAttributeConverter
converts a few style attributes values to visual
HTML attributes. This allows to get at least a bit of visual styling for email
clients that do not support CSS well. For example, style="width: 100px"
will be converted to width="100"
.
The class can be used like this:
$converter = \Pelago\Emogrifier\HtmlProcessor\CssToAttributeConverter::fromHtml($rawHtml);
$visualHtml = $converter->convertCssToVisualAttributes()->render();
You can also have the CssToAttributeConverter
work on a DOMDocument
:
$converter = \Pelago\Emogrifier\HtmlProcessor\CssToAttributeConverter::fromDomDocument($domDocument);
$visualHtml = $converter->convertCssToVisualAttributes()->render();
branch-alias
entry to
point to the release after the upcoming release.