5

Guys, I need to develop a tool which would meet following requirements:

  1. Input: XHTML document with CSS rules within head section.
  2. Output: XHTML document with CSS rules computed in tag attributes

The best way to illustrate the behavior I want is as follows.

Example input:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <style type="text/css" media="screen">
 .a { color: red; }
 p { font-size: 12px; }
 </style>
</head>
<body>
 <p class="a">Lorem Ipsum</p>
 <div class="a">
 <p>Oh hai</p>
 </div>
</body>
</html>

Example output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
 <p style="color: red; font-size: 12px;">Lorem Ipsum</p>
 <div style="color: red;">
 <p style="font-size: 12px;">Oh hai</p>
 </div>
</body>
</html>

What tools/libraries will fit best for such task? I'm not sure if BeautifulSoup and cssutils is capable of doing this.

Python is not a requirement. Any recommendations will be highly appreciated.

asked Apr 23, 2009 at 11:53
5
  • 1
    Are you sure you want to do that? I don't see any reason why that would be useful... Commented Apr 23, 2009 at 11:58
  • My first question would be why? Commented Apr 23, 2009 at 11:59
  • 1
    I wanted to spare you background of this :). In short it's about sending CSS-driven e-mails. So it's a tool to make development of such messages easier. And no, it's not about sending spam. Commented Apr 23, 2009 at 12:04
  • And the reason for adding the CSS rules to the elements themselves, again and again, instead of having them once in the <head> would be? Commented Apr 23, 2009 at 12:11
  • 1
    We use some 3rd party mailing software. I'm not sure and even interested if it's sender or client fault, but e.g. Gmail client has very poor CSS support unless you put the styles within attributes. Commented Apr 23, 2009 at 12:13

4 Answers 4

3
answered Apr 23, 2009 at 14:48
Sign up to request clarification or add additional context in comments.

Comments

1
answered Nov 7, 2009 at 18:17

Comments

1

While I do not know any specific tool to do this, here is the basic approach I would take:

Load as xml document
Extract the css classes and styles from document
For each pair of css class and style
Construct xpath query from css class
For each matching node
Set the style attribute for that class
Remove style node from document Convert document to string

answered Apr 23, 2009 at 15:17

Comments

0

Depends on how complicated your CSS is going to be. If it's a simple matter of elements ("p {}", "a {}"), IDs/Classes (#test {}), then probably easiest to use regular expressions. You'd have to have one to find all the style definitions and then parse them, then use more regular expressions to find instances of tags that match.

For, for example, if you found you had a style for A tags, you could use a regular expression like:

<a\b[^>]*>(.*?)</a>

To get them, then you'd have to do a replace to add the style. Of course you'd want the regex to accept the tag as a parameter (the A tag in this case).

If you got into child selection or anything more than just root elements and ID/classes this could get messy fast.

Consider just defining the styles inline to begin with?

answered Apr 23, 2009 at 14:38

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.