How to parse HTML content and add inline CSS

Question

I have a HTML editor where the admin can enter their content for a HTML email, but for consistent styles between browsers/clients this needs to include inline css. E.g for a paragraph:

Convert:

<p class="standard">

Into:

<p class="standard" style="-ms-text-size-adjust:100%; mso-line-height-rule:exactly; font-family:Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; color:<?php echo $body_font_color; ?>; margin-top:0px; margin-bottom:0px;">

I think this is the same as the popular Mail Chimp works by adding inline styles if they dont exist.

Paragraphs are just example, I also have tables and other classes to add styles into.

I guess I could use simple HTML dom to actually find the different elements using their class name, but how would I go about modifying the inline css — John Magnolia
– John Magnolia, Commented Jun 23, 2013 at 7:27
possible duplicate of What tools to automatically inline CSS style to create email HTML code? — Fabien Ménager
– Fabien Ménager, Commented Jun 23, 2013 at 7:59

user1864610 · Accepted Answer · 2013-06-23 08:10:20Z

3

Load the document into a PHP DOMDocument object. Then you'll have all the methods you need to traverse the DOM tree and make whatever changes you need.

For example:

$doc = DOMDocument::loadHTML($html);

foreach($doc->getElementsByTagName('p') as $para){
  // Get existing style
  if($para->hasAttribute('style')){
    $currStyle = $para->getAttribute('style');
    $para->removeAttribute('style');
  } else {
    $currStyle="";
  }

  // Perform whatever operations on the style you want.

  // comletely replace existing style.
  $para->setAttribute('style','your style string here');
}
$newdoc = $doc->saveHTML();

The PHP reference is here

answered Jun 23, 2013 at 8:10

user1864610

Sign up to request clarification or add additional context in comments.

Comments

Fabien Ménager · Accepted Answer · 2013-06-23 07:58:29Z

2

There are tools like inline styler, which aims to make all CSS inline for e-mails.

answered Jun 23, 2013 at 7:58

Fabien Ménager

140k3 gold badges45 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to parse HTML content and add inline CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related