1 | <?php |
---|
2 | /* |
---|
3 | UPDATES |
---|
4 | |
---|
5 | 2008-08-10 Fixed CSS comment stripping regex to add PCRE_DOTALL (changed from '/\/\*.*\*\//U' to '/\/\*.*\*\//sU') |
---|
6 | 2008-08-18 Added lines instructing DOMDocument to attempt to normalize HTML before processing |
---|
7 | 2008-10-20 Fixed bug with bad variable name... Thanks Thomas! |
---|
8 | 2008-03-02 Added licensing terms under the MIT License |
---|
9 | Only remove unprocessable HTML tags if they exist in the array |
---|
10 | 2009-06-03 Normalize existing CSS (style) attributes in the HTML before we process the CSS. |
---|
11 | Made it so that the display:none stripper doesn't require a trailing semi-colon. |
---|
12 | 2009-08-13 Added support for subset class values (e.g. "p.class1.class2"). |
---|
13 | Added better protection for bad css attributes. |
---|
14 | Fixed support for HTML entities. |
---|
15 | 2009-08-17 Fixed CSS selector processing so that selectors are processed by precedence/specificity, and not just in order. |
---|
16 | 2009-10-29 Fixed so that selectors appearing later in the CSS will have precedence over identical selectors appearing earlier. |
---|
17 | 2009-11-04 Explicitly declared static functions static to get rid of E_STRICT notices. |
---|
18 | 2010-05-18 Fixed bug where full url filenames with protocols wouldn't get split improperly when we explode on ':'... Thanks Mark! |
---|
19 | Added two new attribute selectors |
---|
20 | 2010-06-16 Added static caching for less processing overhead in situations where multiple emogrification takes place |
---|
21 | 2010-07-26 Fixed bug where '0' values were getting discarded because of php's empty() function... Thanks Scott! |
---|
22 | 2010-09-03 Added checks to invisible node removal to ensure that we don't try to remove non-existent child nodes of parents that have already been deleted |
---|
23 | 2011-04-08 Fixed errors in CSS->XPath conversion for adjacent sibling selectors and id/class combinations... Thanks Bob V.! |
---|
24 | 2011-06-08 Fixed an error where CSS @media types weren't being parsed correctly... Thanks Will W.! |
---|
25 | 2011-08-03 Fixed an error where an empty selector at the beginning of the CSS would cause a parse error on the next selector... Thanks Alexei T.! |
---|
26 | 2011-10-13 Fully fixed a bug introduced in 2011-06-08 where selectors at the beginning of the CSS would be parsed incorrectly... Thanks Thomas A.! |
---|
27 | 2011-10-26 Added an option to allow you to output emogrified code without extended characters being turned into HTML entities. |
---|
28 | Moved static references to class attributes so they can be manipulated. |
---|
29 | Added the ability to clear out the (formerly) static cache when CSS is reloaded. |
---|
30 | 2011-12-22 Fixed a bug that was overwriting existing inline styles from the original HTML... Thanks Sagi L.! |
---|
31 | 2012-01-31 Fixed a bug that was introduced with the 2011-12-22 revision... Thanks Sagi L. and M. Bąkowski! |
---|
32 | Added extraction of <style> blocks within the HTML due to popular demand. |
---|
33 | Added several new pseudo-selectors (first-child, last-child, nth-child, and nth-of-type). |
---|
34 | 2012-02-07 Fixed some recent code introductions to use class constants rather than global constants. |
---|
35 | Fixed some recent code introductions to make it cleaner to read. |
---|
36 | 2012-05-01 Made removal of invisible nodes operate in a case-insensitive manner... Thanks Juha P.! |
---|
37 | 2013-10-10 Add preserveStyleTag option |
---|
38 | */ |
---|
39 | |
---|
40 | define('CACHE_CSS', 0); |
---|
41 | define('CACHE_SELECTOR', 1); |
---|
42 | define('CACHE_XPATH', 2); |
---|
43 | |
---|
44 | class Emogrifier { |
---|
45 | |
---|
46 | // for calculating nth-of-type and nth-child selectors |
---|
47 | const INDEX = 0; |
---|
48 | const MULTIPLIER = 1; |
---|
49 | |
---|
50 | private $html = ''; |
---|
51 | private $css = ''; |
---|
52 | private $unprocessableHTMLTags = array('wbr'); |
---|
53 | private $caches = array(); |
---|
54 | |
---|
55 | // this attribute applies to the case where you want to preserve your original text encoding. |
---|
56 | // by default, emogrifier translates your text into HTML entities for two reasons: |
---|
57 | // 1. because of client incompatibilities, it is better practice to send out HTML entities rather than unicode over email |
---|
58 | // 2. it translates any illegal XML characters that DOMDocument cannot work with |
---|
59 | // if you would like to preserve your original encoding, set this attribute to true. |
---|
60 | public $preserveEncoding = false; |
---|
61 | |
---|
62 | // by default, emogrifier removes <style> tags, set preserveStyleTag to true to keep them |
---|
63 | public $preserveStyleTag = false; |
---|
64 | |
---|
65 | public function __construct($html = '', $css = '') { |
---|
66 | $this->html = $html; |
---|
67 | $this->css = $css; |
---|
68 | $this->clearCache(); |
---|
69 | } |
---|
70 | |
---|
71 | public function setHTML($html = '') { $this->html = $html; } |
---|
72 | public function setCSS($css = '') { |
---|
73 | $this->css = $css; |
---|
74 | $this->clearCache(CACHE_CSS); |
---|
75 | } |
---|
76 | |
---|
77 | public function clearCache($key = null) { |
---|
78 | if (!is_null($key)) { |
---|
79 | if (isset($this->caches[$key])) $this->caches[$key] = array(); |
---|
80 | } else { |
---|
81 | $this->caches = array( |
---|
82 | CACHE_CSS => array(), |
---|
83 | CACHE_SELECTOR => array(), |
---|
84 | CACHE_XPATH => array(), |
---|
85 | ); |
---|
86 | } |
---|
87 | } |
---|
88 | |
---|
89 | // there are some HTML tags that DOMDocument cannot process, and will throw an error if it encounters them. |
---|
90 | // in particular, DOMDocument will complain if you try to use HTML5 tags in an XHTML document. |
---|
91 | // these functions allow you to add/remove them if necessary. |
---|
92 | // it only strips them from the code (does not remove actual nodes). |
---|
93 | public function addUnprocessableHTMLTag($tag) { $this->unprocessableHTMLTags[] = $tag; } |
---|
94 | public function removeUnprocessableHTMLTag($tag) { |
---|
95 | if (($key = array_search($tag,$this->unprocessableHTMLTags)) !== false) |
---|
96 | unset($this->unprocessableHTMLTags[$key]); |
---|
97 | } |
---|
98 | |
---|
99 | // applies the CSS you submit to the html you submit. places the css inline |
---|
100 | public function emogrify() { |
---|
101 | $body = $this->html; |
---|
102 | |
---|
103 | // remove any unprocessable HTML tags (tags that DOMDocument cannot parse; this includes wbr and many new HTML5 tags) |
---|
104 | if (count($this->unprocessableHTMLTags)) { |
---|
105 | $unprocessableHTMLTags = implode('|',$this->unprocessableHTMLTags); |
---|
106 | $body = preg_replace("/<\/?($unprocessableHTMLTags)[^>]*>/i",'',$body); |
---|
107 | } |
---|
108 | |
---|
109 | $encoding = mb_detect_encoding($body); |
---|
110 | $body = mb_convert_encoding($body, 'HTML-ENTITIES', $encoding); |
---|
111 | |
---|
112 | $xmldoc = new DOMDocument; |
---|
113 | $xmldoc->encoding = $encoding; |
---|
114 | $xmldoc->strictErrorChecking = false; |
---|
115 | $xmldoc->formatOutput = true; |
---|
116 | $xmldoc->loadHTML($body); |
---|
117 | $xmldoc->normalizeDocument(); |
---|
118 | |
---|
119 | $xpath = new DOMXPath($xmldoc); |
---|
120 | |
---|
121 | // before be begin processing the CSS file, parse the document and normalize all existing CSS attributes (changes 'DISPLAY: none' to 'display: none'); |
---|
122 | // we wouldn't have to do this if DOMXPath supported XPath 2.0. |
---|
123 | // also store a reference of nodes with existing inline styles so we don't overwrite them |
---|
124 | $vistedNodes = $vistedNodeRef = array(); |
---|
125 | $nodes = @$xpath->query('//*[@style]'); |
---|
126 | foreach ($nodes as $node) { |
---|
127 | $normalizedOrigStyle = preg_replace('/[A-z\-]+(?=\:)/Se',"strtolower('\\0')", $node->getAttribute('style')); |
---|
128 | |
---|
129 | // in order to not overwrite existing style attributes in the HTML, we have to save the original HTML styles |
---|
130 | $nodeKey = md5($node->getNodePath()); |
---|
131 | if (!isset($vistedNodeRef[$nodeKey])) { |
---|
132 | $vistedNodeRef[$nodeKey] = $this->cssStyleDefinitionToArray($normalizedOrigStyle); |
---|
133 | $vistedNodes[$nodeKey] = $node; |
---|
134 | } |
---|
135 | |
---|
136 | $node->setAttribute('style', $normalizedOrigStyle); |
---|
137 | } |
---|
138 | |
---|
139 | // grab any existing style blocks from the html and append them to the existing CSS |
---|
140 | // (these blocks should be appended so as to have precedence over conflicting styles in the existing CSS) |
---|
141 | $css = $this->css; |
---|
142 | $nodes = @$xpath->query('//style'); |
---|
143 | foreach ($nodes as $node) { |
---|
144 | // append the css |
---|
145 | $css .= "\n\n{$node->nodeValue}"; |
---|
146 | // remove the <style> node |
---|
147 | if (!$this->preserveStyleTag) { |
---|
148 | $node->parentNode->removeChild($node); |
---|
149 | } |
---|
150 | } |
---|
151 | |
---|
152 | // filter the CSS |
---|
153 | $search = array( |
---|
154 | '/\/\*.*\*\//sU', // get rid of css comment code |
---|
155 | '/^\s*@import\s[^;]+;/misU', // strip out any import directives |
---|
156 | '/^\s*@media\s[^{]+{\s*}/misU', // strip any empty media enclosures |
---|
157 | '/^\s*@media\s+((aural|braille|embossed|handheld|print|projection|speech|tty|tv)\s*,*\s*)+{.*}\s*}/misU', // strip out all media types that are not 'screen' or 'all' (these don't apply to email) |
---|
158 | '/^\s*@media\s[^{]+{(.*})\s*}/misU', // get rid of remaining media type enclosures |
---|
159 | ); |
---|
160 | |
---|
161 | $replace = array( |
---|
162 | '', |
---|
163 | '', |
---|
164 | '', |
---|
165 | '', |
---|
166 | '\\1', |
---|
167 | ); |
---|
168 | |
---|
169 | $css = preg_replace($search, $replace, $css); |
---|
170 | |
---|
171 | $csskey = md5($css); |
---|
172 | if (!isset($this->caches[CACHE_CSS][$csskey])) { |
---|
173 | |
---|
174 | // process the CSS file for selectors and definitions |
---|
175 | preg_match_all('/(^|[^{}])\s*([^{]+){([^}]*)}/mis', $css, $matches, PREG_SET_ORDER); |
---|
176 | |
---|
177 | $all_selectors = array(); |
---|
178 | foreach ($matches as $key => $selectorString) { |
---|
179 | // if there is a blank definition, skip |
---|
180 | if (!strlen(trim($selectorString[3]))) continue; |
---|
181 | |
---|
182 | // else split by commas and duplicate attributes so we can sort by selector precedence |
---|
183 | $selectors = explode(',',$selectorString[2]); |
---|
184 | foreach ($selectors as $selector) { |
---|
185 | |
---|
186 | // don't process pseudo-elements and behavioral (dynamic) pseudo-classes; ONLY allow structural pseudo-classes |
---|
187 | if (strpos($selector, ':') !== false && !preg_match('/:\S+\-(child|type)\(/i', $selector)) continue; |
---|
188 | |
---|
189 | $all_selectors[] = array('selector' => trim($selector), |
---|
190 | 'attributes' => trim($selectorString[3]), |
---|
191 | 'line' => $key, // keep track of where it appears in the file, since order is important |
---|
192 | ); |
---|
193 | } |
---|
194 | } |
---|
195 | |
---|
196 | // now sort the selectors by precedence |
---|
197 | usort($all_selectors, array($this,'sortBySelectorPrecedence')); |
---|
198 | |
---|
199 | $this->caches[CACHE_CSS][$csskey] = $all_selectors; |
---|
200 | } |
---|
201 | |
---|
202 | foreach ($this->caches[CACHE_CSS][$csskey] as $value) { |
---|
203 | |
---|
204 | // query the body for the xpath selector |
---|
205 | $nodes = $xpath->query($this->translateCSStoXpath(trim($value['selector']))); |
---|
206 | |
---|
207 | foreach($nodes as $node) { |
---|
208 | // if it has a style attribute, get it, process it, and append (overwrite) new stuff |
---|
209 | if ($node->hasAttribute('style')) { |
---|
210 | // break it up into an associative array |
---|
211 | $oldStyleArr = $this->cssStyleDefinitionToArray($node->getAttribute('style')); |
---|
212 | $newStyleArr = $this->cssStyleDefinitionToArray($value['attributes']); |
---|
213 | |
---|
214 | // new styles overwrite the old styles (not technically accurate, but close enough) |
---|
215 | $combinedArr = array_merge($oldStyleArr,$newStyleArr); |
---|
216 | $style = ''; |
---|
217 | foreach ($combinedArr as $k => $v) $style .= (strtolower($k) . ':' . $v . ';'); |
---|
218 | } else { |
---|
219 | // otherwise create a new style |
---|
220 | $style = trim($value['attributes']); |
---|
221 | } |
---|
222 | $node->setAttribute('style', $style); |
---|
223 | } |
---|
224 | } |
---|
225 | |
---|
226 | // now iterate through the nodes that contained inline styles in the original HTML |
---|
227 | foreach ($vistedNodeRef as $nodeKey => $origStyleArr) { |
---|
228 | $node = $vistedNodes[$nodeKey]; |
---|
229 | $currStyleArr = $this->cssStyleDefinitionToArray($node->getAttribute('style')); |
---|
230 | |
---|
231 | $combinedArr = array_merge($currStyleArr, $origStyleArr); |
---|
232 | $style = ''; |
---|
233 | foreach ($combinedArr as $k => $v) $style .= (strtolower($k) . ':' . $v . ';'); |
---|
234 | |
---|
235 | $node->setAttribute('style', $style); |
---|
236 | } |
---|
237 | |
---|
238 | // This removes styles from your email that contain display:none. |
---|
239 | // We need to look for display:none, but we need to do a case-insensitive search. Since DOMDocument only supports XPath 1.0, |
---|
240 | // lower-case() isn't available to us. We've thus far only set attributes to lowercase, not attribute values. Consequently, we need |
---|
241 | // to translate() the letters that would be in 'NONE' ("NOE") to lowercase. |
---|
242 | $nodes = $xpath->query('//*[contains(translate(translate(@style," ",""),"NOE","noe"),"display:none")]'); |
---|
243 | // The checks on parentNode and is_callable below ensure that if we've deleted the parent node, |
---|
244 | // we don't try to call removeChild on a nonexistent child node |
---|
245 | if ($nodes->length > 0) |
---|
246 | foreach ($nodes as $node) |
---|
247 | if ($node->parentNode && is_callable(array($node->parentNode,'removeChild'))) |
---|
248 | $node->parentNode->removeChild($node); |
---|
249 | |
---|
250 | if ($this->preserveEncoding) { |
---|
251 | return mb_convert_encoding($xmldoc->saveHTML(), $encoding, 'HTML-ENTITIES'); |
---|
252 | } else { |
---|
253 | return $xmldoc->saveHTML(); |
---|
254 | } |
---|
255 | } |
---|
256 | |
---|
257 | private function sortBySelectorPrecedence($a, $b) { |
---|
258 | $precedenceA = $this->getCSSSelectorPrecedence($a['selector']); |
---|
259 | $precedenceB = $this->getCSSSelectorPrecedence($b['selector']); |
---|
260 | |
---|
261 | // we want these sorted ascendingly so selectors with lesser precedence get processed first and |
---|
262 | // selectors with greater precedence get sorted last |
---|
263 | return ($precedenceA == $precedenceB) ? ($a['line'] < $b['line'] ? -1 : 1) : ($precedenceA < $precedenceB ? -1 : 1); |
---|
264 | } |
---|
265 | |
---|
266 | private function getCSSSelectorPrecedence($selector) { |
---|
267 | $selectorkey = md5($selector); |
---|
268 | if (!isset($this->caches[CACHE_SELECTOR][$selectorkey])) { |
---|
269 | $precedence = 0; |
---|
270 | $value = 100; |
---|
271 | $search = array('\#','\.',''); // ids: worth 100, classes: worth 10, elements: worth 1 |
---|
272 | |
---|
273 | foreach ($search as $s) { |
---|
274 | if (trim($selector == '')) break; |
---|
275 | $num = 0; |
---|
276 | $selector = preg_replace('/'.$s.'\w+/','',$selector,-1,$num); |
---|
277 | $precedence += ($value * $num); |
---|
278 | $value /= 10; |
---|
279 | } |
---|
280 | $this->caches[CACHE_SELECTOR][$selectorkey] = $precedence; |
---|
281 | } |
---|
282 | |
---|
283 | return $this->caches[CACHE_SELECTOR][$selectorkey]; |
---|
284 | } |
---|
285 | |
---|
286 | // right now we support all CSS 1 selectors and most CSS2/3 selectors. |
---|
287 | // http://plasmasturm.org/log/444/ |
---|
288 | private function translateCSStoXpath($css_selector) { |
---|
289 | |
---|
290 | $css_selector = trim($css_selector); |
---|
291 | $xpathkey = md5($css_selector); |
---|
292 | if (!isset($this->caches[CACHE_XPATH][$xpathkey])) { |
---|
293 | // returns an Xpath selector |
---|
294 | $search = array( |
---|
295 | '/\s+>\s+/', // Matches any element that is a child of parent. |
---|
296 | '/\s+\+\s+/', // Matches any element that is an adjacent sibling. |
---|
297 | '/\s+/', // Matches any element that is a descendant of an parent element element. |
---|
298 | '/([^\/]+):first-child/i', // first-child pseudo-selector |
---|
299 | '/([^\/]+):last-child/i', // last-child pseudo-selector |
---|
300 | '/(\w)\[(\w+)\]/', // Matches element with attribute |
---|
301 | '/(\w)\[(\w+)\=[\'"]?(\w+)[\'"]?\]/', // Matches element with EXACT attribute |
---|
302 | '/(\w+)?\#([\w\-]+)/e', // Matches id attributes |
---|
303 | '/(\w+|[\*\]])?((\.[\w\-]+)+)/e', // Matches class attributes |
---|
304 | |
---|
305 | ); |
---|
306 | $replace = array( |
---|
307 | '/', |
---|
308 | '/following-sibling::*[1]/self::', |
---|
309 | '//', |
---|
310 | '*[1]/self::\\1', |
---|
311 | '*[last()]/self::\\1', |
---|
312 | '\\1[@\\2]', |
---|
313 | '\\1[@\\2="\\3"]', |
---|
314 | "(strlen('\\1') ? '\\1' : '*').'[@id=\"\\2\"]'", |
---|
315 | "(strlen('\\1') ? '\\1' : '*').'[contains(concat(\" \",@class,\" \"),concat(\" \",\"'.implode('\",\" \"))][contains(concat(\" \",@class,\" \"),concat(\" \",\"',explode('.',substr('\\2',1))).'\",\" \"))]'", |
---|
316 | ); |
---|
317 | |
---|
318 | $css_selector = '//'.preg_replace($search, $replace, $css_selector); |
---|
319 | |
---|
320 | // advanced selectors are going to require a bit more advanced emogrification |
---|
321 | // if we required PHP 5.3 we could do this with closures |
---|
322 | $css_selector = preg_replace_callback('/([^\/]+):nth-child\(\s*(odd|even|[+\-]?\d|[+\-]?\d?n(\s*[+\-]\s*\d)?)\s*\)/i', array($this, 'translateNthChild'), $css_selector); |
---|
323 | $css_selector = preg_replace_callback('/([^\/]+):nth-of-type\(\s*(odd|even|[+\-]?\d|[+\-]?\d?n(\s*[+\-]\s*\d)?)\s*\)/i', array($this, 'translateNthOfType'), $css_selector); |
---|
324 | |
---|
325 | $this->caches[CACHE_SELECTOR][$xpathkey] = $css_selector; |
---|
326 | } |
---|
327 | return $this->caches[CACHE_SELECTOR][$xpathkey]; |
---|
328 | } |
---|
329 | |
---|
330 | private function translateNthChild($match) { |
---|
331 | |
---|
332 | $result = $this->parseNth($match); |
---|
333 | |
---|
334 | if (isset($result[self::MULTIPLIER])) { |
---|
335 | if ($result[self::MULTIPLIER] < 0) { |
---|
336 | $result[self::MULTIPLIER] = abs($result[self::MULTIPLIER]); |
---|
337 | return sprintf("*[(last() - position()) mod %u = %u]/self::%s", $result[self::MULTIPLIER], $result[self::INDEX], $match[1]); |
---|
338 | } else { |
---|
339 | return sprintf("*[position() mod %u = %u]/self::%s", $result[self::MULTIPLIER], $result[self::INDEX], $match[1]); |
---|
340 | } |
---|
341 | } else { |
---|
342 | return sprintf("*[%u]/self::%s", $result[self::INDEX], $match[1]); |
---|
343 | } |
---|
344 | } |
---|
345 | |
---|
346 | private function translateNthOfType($match) { |
---|
347 | |
---|
348 | $result = $this->parseNth($match); |
---|
349 | |
---|
350 | if (isset($result[self::MULTIPLIER])) { |
---|
351 | if ($result[self::MULTIPLIER] < 0) { |
---|
352 | $result[self::MULTIPLIER] = abs($result[self::MULTIPLIER]); |
---|
353 | return sprintf("%s[(last() - position()) mod %u = %u]", $match[1], $result[self::MULTIPLIER], $result[self::INDEX]); |
---|
354 | } else { |
---|
355 | return sprintf("%s[position() mod %u = %u]", $match[1], $result[self::MULTIPLIER], $result[self::INDEX]); |
---|
356 | } |
---|
357 | } else { |
---|
358 | return sprintf("%s[%u]", $match[1], $result[self::INDEX]); |
---|
359 | } |
---|
360 | } |
---|
361 | |
---|
362 | private function parseNth($match) { |
---|
363 | |
---|
364 | if (in_array(strtolower($match[2]), array('even','odd'))) { |
---|
365 | $index = strtolower($match[2]) == 'even' ? 0 : 1; |
---|
366 | return array(self::MULTIPLIER => 2, self::INDEX => $index); |
---|
367 | // if there is a multiplier |
---|
368 | } else if (stripos($match[2], 'n') === false) { |
---|
369 | $index = intval(str_replace(' ', '', $match[2])); |
---|
370 | return array(self::INDEX => $index); |
---|
371 | } else { |
---|
372 | |
---|
373 | if (isset($match[3])) { |
---|
374 | $multiple_term = str_replace($match[3], '', $match[2]); |
---|
375 | $index = intval(str_replace(' ', '', $match[3])); |
---|
376 | } else { |
---|
377 | $multiple_term = $match[2]; |
---|
378 | $index = 0; |
---|
379 | } |
---|
380 | |
---|
381 | $multiplier = str_ireplace('n', '', $multiple_term); |
---|
382 | |
---|
383 | if (!strlen($multiplier)) $multiplier = 1; |
---|
384 | elseif ($multiplier == 0) return array(self::INDEX => $index); |
---|
385 | else $multiplier = intval($multiplier); |
---|
386 | |
---|
387 | while ($index < 0) $index += abs($multiplier); |
---|
388 | |
---|
389 | return array(self::MULTIPLIER => $multiplier, self::INDEX => $index); |
---|
390 | } |
---|
391 | } |
---|
392 | |
---|
393 | private function cssStyleDefinitionToArray($style) { |
---|
394 | $definitions = explode(';',$style); |
---|
395 | $retArr = array(); |
---|
396 | foreach ($definitions as $def) { |
---|
397 | if (empty($def) || strpos($def, ':') === false) continue; |
---|
398 | list($key,$value) = explode(':',$def,2); |
---|
399 | if (empty($key) || strlen(trim($value)) === 0) continue; |
---|
400 | $retArr[trim($key)] = trim($value); |
---|
401 | } |
---|
402 | return $retArr; |
---|
403 | } |
---|
404 | } |
---|