git.stricted.de - GitHub/WoltLab/WCF.git/blob

   1 <?php
   2
   3 declare(strict_types=1);
   4
   5 namespace Pelago\Emogrifier\HtmlProcessor;
   6
   7 /**
   8  * This HtmlProcessor can convert style HTML attributes to the corresponding other visual HTML attributes,
   9  * e.g. it converts style="width: 100px" to width="100".
  10  *
  11  * It will only add attributes, but leaves the style attribute untouched.
  12  *
  13  * To trigger the conversion, call the convertCssToVisualAttributes method.
  14  *
  15  * @author Oliver Klee <github@oliverklee.de>
  16  */
  17 class CssToAttributeConverter extends AbstractHtmlProcessor
  18 {
  19     /**
  20      * This multi-level array contains simple mappings of CSS properties to
  21      * HTML attributes. If a mapping only applies to certain HTML nodes or
  22      * only for certain values, the mapping is an object with a whitelist
  23      * of nodes and values.
  24      *
  25      * @var mixed[][]
  26      */
  27     private $cssToHtmlMap = [
  28         'background-color' => [
  29             'attribute' => 'bgcolor',
  30         ],
  31         'text-align' => [
  32             'attribute' => 'align',
  33             'nodes' => ['p', 'div', 'td'],
  34             'values' => ['left', 'right', 'center', 'justify'],
  35         ],
  36         'float' => [
  37             'attribute' => 'align',
  38             'nodes' => ['table', 'img'],
  39             'values' => ['left', 'right'],
  40         ],
  41         'border-spacing' => [
  42             'attribute' => 'cellspacing',
  43             'nodes' => ['table'],
  44         ],
  45     ];
  46
  47     /**
  48      * @var string[][]
  49      */
  50     private static $parsedCssCache = [];
  51
  52     /**
  53      * Maps the CSS from the style nodes to visual HTML attributes.
  54      *
  55      * @return self fluent interface
  56      */
  57     public function convertCssToVisualAttributes(): self
  58     {
  59         /** @var \DOMElement $node */
  60         foreach ($this->getAllNodesWithStyleAttribute() as $node) {
  61             $inlineStyleDeclarations = $this->parseCssDeclarationsBlock($node->getAttribute('style'));
  62             $this->mapCssToHtmlAttributes($inlineStyleDeclarations, $node);
  63         }
  64
  65         return $this;
  66     }
  67
  68     /**
  69      * Returns a list with all DOM nodes that have a style attribute.
  70      *
  71      * @return \DOMNodeList
  72      */
  73     private function getAllNodesWithStyleAttribute(): \DOMNodeList
  74     {
  75         return $this->xPath->query('//*[@style]');
  76     }
  77
  78     /**
  79      * Parses a CSS declaration block into property name/value pairs.
  80      *
  81      * Example:
  82      *
  83      * The declaration block
  84      *
  85      *   "color: #000; font-weight: bold;"
  86      *
  87      * will be parsed into the following array:
  88      *
  89      *   "color" => "#000"
  90      *   "font-weight" => "bold"
  91      *
  92      * @param string $cssDeclarationsBlock the CSS declarations block without the curly braces, may be empty
  93      *
  94      * @return string[]
  95      *         the CSS declarations with the property names as array keys and the property values as array values
  96      */
  97     private function parseCssDeclarationsBlock(string $cssDeclarationsBlock): array
  98     {
  99         if (isset(self::$parsedCssCache[$cssDeclarationsBlock])) {
 100             return self::$parsedCssCache[$cssDeclarationsBlock];
 101         }
 102
 103         $properties = [];
 104         foreach (\preg_split('/;(?!base64|charset)/', $cssDeclarationsBlock) as $declaration) {
 105             $matches = [];
 106             if (!\preg_match('/^([A-Za-z\\-]+)\\s*:\\s*(.+)$/s', \trim($declaration), $matches)) {
 107                 continue;
 108             }
 109
 110             $propertyName = \strtolower($matches[1]);
 111             $propertyValue = $matches[2];
 112             $properties[$propertyName] = $propertyValue;
 113         }
 114         self::$parsedCssCache[$cssDeclarationsBlock] = $properties;
 115
 116         return $properties;
 117     }
 118
 119     /**
 120      * Applies $styles to $node.
 121      *
 122      * This method maps CSS styles to HTML attributes and adds those to the
 123      * node.
 124      *
 125      * @param string[] $styles the new CSS styles taken from the global styles to be applied to this node
 126      * @param \DOMElement $node node to apply styles to
 127      */
 128     private function mapCssToHtmlAttributes(array $styles, \DOMElement $node): void
 129     {
 130         foreach ($styles as $property => $value) {
 131             // Strip !important indicator
 132             $value = \trim(\str_replace('!important', '', $value));
 133             $this->mapCssToHtmlAttribute($property, $value, $node);
 134         }
 135     }
 136
 137     /**
 138      * Tries to apply the CSS style to $node as an attribute.
 139      *
 140      * This method maps a CSS rule to HTML attributes and adds those to the node.
 141      *
 142      * @param string $property the name of the CSS property to map
 143      * @param string $value the value of the style rule to map
 144      * @param \DOMElement $node node to apply styles to
 145      */
 146     private function mapCssToHtmlAttribute(string $property, string $value, \DOMElement $node): void
 147     {
 148         if (!$this->mapSimpleCssProperty($property, $value, $node)) {
 149             $this->mapComplexCssProperty($property, $value, $node);
 150         }
 151     }
 152
 153     /**
 154      * Looks up the CSS property in the mapping table and maps it if it matches the conditions.
 155      *
 156      * @param string $property the name of the CSS property to map
 157      * @param string $value the value of the style rule to map
 158      * @param \DOMElement $node node to apply styles to
 159      *
 160      * @return bool true if the property can be mapped using the simple mapping table
 161      */
 162     private function mapSimpleCssProperty(string $property, string $value, \DOMElement $node): bool
 163     {
 164         if (!isset($this->cssToHtmlMap[$property])) {
 165             return false;
 166         }
 167
 168         $mapping = $this->cssToHtmlMap[$property];
 169         $nodesMatch = !isset($mapping['nodes']) || \in_array($node->nodeName, $mapping['nodes'], true);
 170         $valuesMatch = !isset($mapping['values']) || \in_array($value, $mapping['values'], true);
 171         $canBeMapped = $nodesMatch && $valuesMatch;
 172         if ($canBeMapped) {
 173             $node->setAttribute($mapping['attribute'], $value);
 174         }
 175
 176         return $canBeMapped;
 177     }
 178
 179     /**
 180      * Maps CSS properties that need special transformation to an HTML attribute.
 181      *
 182      * @param string $property the name of the CSS property to map
 183      * @param string $value the value of the style rule to map
 184      * @param \DOMElement $node node to apply styles to
 185      */
 186     private function mapComplexCssProperty(string $property, string $value, \DOMElement $node): void
 187     {
 188         switch ($property) {
 189             case 'background':
 190                 $this->mapBackgroundProperty($node, $value);
 191                 break;
 192             case 'width':
 193                 // intentional fall-through
 194             case 'height':
 195                 $this->mapWidthOrHeightProperty($node, $value, $property);
 196                 break;
 197             case 'margin':
 198                 $this->mapMarginProperty($node, $value);
 199                 break;
 200             case 'border':
 201                 $this->mapBorderProperty($node, $value);
 202                 break;
 203             default:
 204         }
 205     }
 206
 207     /**
 208      * @param \DOMElement $node node to apply styles to
 209      * @param string $value the value of the style rule to map
 210      */
 211     private function mapBackgroundProperty(\DOMElement $node, string $value): void
 212     {
 213         // parse out the color, if any
 214         $styles = \explode(' ', $value, 2);
 215         $first = $styles[0];
 216         if (\is_numeric($first[0]) || \strncmp($first, 'url', 3) === 0) {
 217             return;
 218         }
 219
 220         // as this is not a position or image, assume it's a color
 221         $node->setAttribute('bgcolor', $first);
 222     }
 223
 224     /**
 225      * @param \DOMElement $node node to apply styles to
 226      * @param string $value the value of the style rule to map
 227      * @param string $property the name of the CSS property to map
 228      */
 229     private function mapWidthOrHeightProperty(\DOMElement $node, string $value, string $property): void
 230     {
 231         // only parse values in px and %, but not values like "auto"
 232         if (!\preg_match('/^(\\d+)(\\.(\\d+))?(px|%)$/', $value)) {
 233             return;
 234         }
 235
 236         $number = \preg_replace('/[^0-9.%]/', '', $value);
 237         $node->setAttribute($property, $number);
 238     }
 239
 240     /**
 241      * @param \DOMElement $node node to apply styles to
 242      * @param string $value the value of the style rule to map
 243      */
 244     private function mapMarginProperty(\DOMElement $node, string $value): void
 245     {
 246         if (!$this->isTableOrImageNode($node)) {
 247             return;
 248         }
 249
 250         $margins = $this->parseCssShorthandValue($value);
 251         if ($margins['left'] === 'auto' && $margins['right'] === 'auto') {
 252             $node->setAttribute('align', 'center');
 253         }
 254     }
 255
 256     /**
 257      * @param \DOMElement $node node to apply styles to
 258      * @param string $value the value of the style rule to map
 259      */
 260     private function mapBorderProperty(\DOMElement $node, string $value): void
 261     {
 262         if (!$this->isTableOrImageNode($node)) {
 263             return;
 264         }
 265
 266         if ($value === 'none' || $value === '0') {
 267             $node->setAttribute('border', '0');
 268         }
 269     }
 270
 271     /**
 272      * @param \DOMElement $node
 273      *
 274      * @return bool
 275      */
 276     private function isTableOrImageNode(\DOMElement $node): bool
 277     {
 278         return $node->nodeName === 'table' || $node->nodeName === 'img';
 279     }
 280
 281     /**
 282      * Parses a shorthand CSS value and splits it into individual values
 283      *
 284      * @param string $value a string of CSS value with 1, 2, 3 or 4 sizes
 285      *        For example: padding: 0 auto; '0 auto' is split into top: 0, left: auto, bottom: 0, right: auto.
 286      *
 287      * @return string[] an array of values for top, right, bottom and left (using these as associative array keys)
 288      */
 289     private function parseCssShorthandValue(string $value): array
 290     {
 291         /** @var string[] $values */
 292         $values = \preg_split('/\\s+/', $value);
 293
 294         $css = [];
 295         $css['top'] = $values[0];
 296         $css['right'] = (\count($values) > 1) ? $values[1] : $css['top'];
 297         $css['bottom'] = (\count($values) > 2) ? $values[2] : $css['top'];
 298         $css['left'] = (\count($values) > 3) ? $values[3] : $css['right'];
 299
 300         return $css;
 301     }
 302 }