{"id":1759,"date":"2011-08-24T23:44:23","date_gmt":"2011-08-24T15:44:23","guid":{"rendered":"http:\/\/www.mudone.com\/?p=1759"},"modified":"2011-08-29T09:26:02","modified_gmt":"2011-08-29T01:26:02","slug":"headless-html-rendering-engines","status":"publish","type":"post","link":"https:\/\/www.mudone.com\/?p=1759","title":{"rendered":"Headless HTML rendering engines"},"content":{"rendered":"

http:\/\/www.holovaty.com\/writing\/headless-html-rendering-engine\/<\/a>
\n\u8fd9\u7bc7\u6587\u7ae0\u7684\u8bc4\u8bba\u91cc\u8ba8\u8bba\u4e86\u5404\u79cd\u89e3\u51b3\u65b9\u6848\u3002\u3002<\/p>\n

Request: Headless HTML rendering engine?<\/p>\n

Written by Adrian Holovaty on May 2, 2008<\/p>\n

Warning: Seriously geeky request ahead!<\/p>\n

I’m looking for a way to render arbitrary Web pages — including CSS and JavaScript — and access the resulting DOM tree programatically, i.e., in an automated\/headless fashion. I want to be able to ask the following questions of the resulting DOM tree:<\/p>\n

For a given element, what font family, size, and color is the text?
\nHow tall and wide (in pixels) is a given<\/p>\n

,
\n, etc.? What are the x\/y coordinates of a given element (from the upper-left corner of the page, or lower-left, or wherever)? For a given element, what is its text content?<\/div>\n

The rendering must be state-of-the-art, handling advanced CSS that Firefox, Safari and IE handle. It should work on Linux. Bonus points if there’s a Python API for this magical DOM tree.<\/p>\n

This is all stuff that standard in-page JavaScript could accomplish, but the catch with me is that I need to be able to do it in a completely automated way, on arbitrary pages, on a headless server.<\/p>\n

I know Gecko and Webkit provide this, but I’m not sure where to start with them. The docs and articles I’ve read seem to be focused more on embedding the full browser window in a GUI application than embedding the rendering engine itself and manipulating the resulting pages.<\/p>\n

Help! If you have any clues, I’d be grateful if you left a comment or got in touch with me.
\nComments
\nPosted by Andrew Sutherland on May 2, 2008 at 2:45 a.m.:<\/p>\n

PyXPCOM (http:\/\/developer.mozilla.org\/en\/docs\/PyXPCOM) should handle the Python part of the Gecko equation.<\/p>\n

I myself am no specific help on the gecko side of things, but I think the following post\/thread on the PyXPCOM mailing list may be of assistance:<\/p>\n

http:\/\/aspn.activestate.com\/ASPN\/Mail\/Message\/pyxpcom\/3619998
\nPosted by Rene Dudfield on May 2, 2008 at 3:19 a.m.:<\/p>\n

You can set up a headless X server, then run firefox, or whatever browser with a standard build.
\nPosted by Michael Twomey on May 2, 2008 at 4:46 a.m.:<\/p>\n

If you want an example of using webkit to do headless stuff you could look at webkit2png which is a tool for taking screenshots of websites from command line. It uses webkit and pyobjc, so you’ll need a mac. It doesn’t do any DOM stuff that I can see but I might be a useful starting point for writing an automated tool.
\nPosted by Justin Mason on May 2, 2008 at 5:01 a.m.:<\/p>\n

http:\/\/khtml2png.sourceforge.net\/ might be useful, if you’re doing this on a *NIX platform. Looks like it’s well-maintained, too, since the most recent release was only a couple of weeks ago.
\nPosted by G\u00e1bor Farkas on May 2, 2008 at 5:10 a.m.:<\/p>\n

in case of firefox, there are 2 issues:<\/p>\n

1. run it somehow in a headless mode: for this, try Xvfb. it starts a headless X server. then you can run firefox in it.<\/p>\n

2. communicate with the firefox instance. there is PyXPCOM, as others already mentioned, which could make it work.
\nPosted by Jason on May 2, 2008 at 7:04 a.m.:<\/p>\n

If you want to muck in C++ code you could look at RenderTreeAsText in Webkit. For actually setting up the rendering engine, there’s some relatively simple high-level apis in the wx and qt ports that seem pretty readable; the kind of api you’d use for those neat “write a web browser in 5 lines of code” demos. See WebFrame in particular. Disclaimer: I’ve never written anything with webkit, but it might be fun to learn.
\nPosted by anonymous on May 2, 2008 at 8:15 a.m.:<\/p>\n

What about Selenium? or Watir?
\nPosted by anonymous on May 2, 2008 at 8:50 a.m.:<\/p>\n

I haven’t tried this (but am planning to), so I don’t know if it really meets your needs, but HTMLUnit is a Java-based headless browser (designed for testing).
\nPosted by anonymous on May 2, 2008 at 10:15 a.m.:<\/p>\n

Attributes such as pixel width, height, font etc will either be determined by CSS, or they will be agent (and user setup) specific.<\/p>\n

The pixel width of a div of width 50% will depend on the size of the viewport – which of course would be anything. Do you intend to ‘fake’ the settings of a user agent? If so, then a simple calculation would get the pixel width (as you would know your viewport dimensions).<\/p>\n

I really would consider seeing how far you can get by simply manipulating the dom and parsing the css (both of which are easily achieved with the python libraries urllib, lxml \/ beautifulsoup and cssutils).<\/p>\n

I know, I know; None of this helps with javascript dependent attributes.<\/p>\n

RC
\nPosted by alan taylor on May 2, 2008 at 10:36 a.m.:<\/p>\n

Have you looked at JSSh? Not sure if it fits the bill, but it just might – it’s a “Mozilla C++ extension module that allows other programs (such as telnet) to establish JavaScript shell connections to a running Mozilla process via TCP\/IP” I know it can return some parts of the DOM, but not sure how much detailed info you can get beack from it. http:\/\/www.croczilla.com\/jssh
\nPosted by Matthew Marshall on May 2, 2008 at 10:42 a.m.:<\/p>\n

I’ve played with doing this a little. The best I came up with was using PyKDE and khtml. I’m pretty sure it requires an X server, but if nothing else you could use a vnc server.<\/p>\n

MWM
\nPosted by Kumar McMillan on May 2, 2008 at 11:40 a.m.:<\/p>\n

There are probably several ways to do it, but the first that comes to mind is using the Python driver for Selenium RC …<\/p>\n

from selenium import selenium<\/p>\n

# with the selenium-rc (Java) proxy sever running at localhost:4444 …<\/p>\n

selenium = selenium(“localhost”, 4444, “*firefox”, “http:\/\/thewebsite.com”)<\/p>\n

selenium.open(“\/”)<\/p>\n

selenium.wait_for_page_to_load(‘30000’)<\/p>\n

selenium.get_html_source() # this is includes any JavaScript DOM manipulations, of course<\/p>\n

selenium.get_element_position_left(“xpath=\/\/div[1]”)<\/p>\n

selenium.get_element_position_top(“xpath=\/\/div[1]”)<\/p>\n

selenium.get_element_height(“xpath=\/\/table[1]”)<\/p>\n

selenium.capture_screenshot(‘\/tmp\/site.png’)<\/p>\n

… but I’m not sure how you get the font\/text info. Selenium RC is designed to run headless and also has a “grid” implementation so you can throw more hardware at it. Scaling up to the grid is very transparent — same code as above, more or less.<\/p>\n

Links:<\/p>\n

http:\/\/selenium-rc.openqa.org\/<\/p>\n

http:\/\/selenium-rc.openqa.org\/python.html<\/p>\n

http:\/\/selenium-grid.openqa.org\/
\nPosted by anonymous on May 2, 2008 at 12:02 p.m.:<\/p>\n

seconding the jssh suggestion http:\/\/www.urbanhonking.com\/ideasfordozens\/archives\/2008\/03\/automating_fire.html
\nPosted by Ryan Shaw on May 2, 2008 at 12:26 p.m.:<\/p>\n

You might want to check out Crowbar:<\/p>\n

Crowbar is a web scraping environment based on the use of a server-side headless mozilla-based browser. Its purpose is to allow running javascript scrapers against a DOM to automate web sites scraping but avoiding all the syntax normalization issues.
\nPosted by mikeal on May 2, 2008 at 1:49 p.m.:<\/p>\n

I would go with windmill over Selenium if you’re going down that road. We have far more comprehensive javascript support, you can use execJS to get back the result of any arbitrary js.<\/p>\n

http:\/\/windmill.osafoundation.org<\/p>\n

And jssh is great, but MozRepl is jssh on crack.<\/p>\n

http:\/\/hyperstruct.net\/projects\/mozrepl<\/p>\n

The whole interface is much much nicer and I’m in the middle of a Python JavaScript bridge using MozRepl that I’ll be sure to send you a link to once it’s public.
\nPosted by Henning on May 2, 2008 at 2:29 p.m.:<\/p>\n

Qt 4.4 is available on all platforms and contains a WebKit port. Fortunately the newest PyQt snapshots also contain support for WebKit. Because Qt can render every widget to a pixmap, is should be fairly easy. To run Qt headless you could use xvfb.<\/p>\n

To access the DOM you can query with Javascript.<\/p>\n

The following is _not_ tested:<\/p>\n

from PyQt4.QtCore import *<\/p>\n

from PyQt4.QtGui import *<\/p>\n

from PyQt4.QtWebKit import *<\/p>\n

import sys<\/p>\n

app = QApplication(sys.argv)<\/p>\n

browser = QWebView()<\/p>\n

browser.show()<\/p>\n

browser.resize(800,600)<\/p>\n

#browser.setHtml(“Hello, world”)<\/p>\n

browser.load(“http:\/\/\/www.djangoproject.com”)<\/p>\n

pm = QPixmap.grabWidget(browser)<\/p>\n

pm.save(“website.jpg”)<\/p>\n

body = browser().page().mainFrame().evaluateJavaScript(“getElementByName(‘body’)”)
\nPosted by anonymous on May 2, 2008 at 6:08 p.m.:<\/p>\n

HTMLUnit is a very good headless browswer implementation. It supports different browsers and Jacascript (using Rhino I think). And finally, is under active development.<\/p>\n

http:\/\/htmlunit.sourceforge.net\/<\/p>\n

Unfortuantely, its a Java library but you could use jpython to access it.
\nPosted by anonymous on May 2, 2008 at 6:12 p.m.:<\/p>\n

I looked at a few open source projects to do headless rendering.<\/p>\n

It’s tempting to use firefox\/gecko but the learning curve is steep,<\/p>\n

it’s 2 mln lines of netscape legacy C++ code.<\/p>\n

But if you figure it out you’ll have a fine tool.<\/p>\n

What is working for me now is lobo renderer (from cobra browser) (in java).<\/p>\n

It’s not the best rendering engine, but it’s decent, and easy to program.<\/p>\n

You can get rendered blocks and dom objects, and answer all the questions<\/p>\n

as to block location, color, text etc.<\/p>\n

It can be made to work on linux completely headless without an x server,<\/p>\n

the way I have it working is it takes in a url or html, and saves to another<\/p>\n

textual file format. What’s important is to encapsulate your choice<\/p>\n

of rendering engine, because it will change.<\/p>\n

Email me at dmitrim at yahoo dot com if you need help.
\nPosted by Phil on May 2, 2008 at 7:31 p.m.:<\/p>\n

Personally I’d try it with MozRepl and an X virtual framebuffer: http:\/\/emacspeak.blogspot.com\/2007\/06\/firebox-put-fox-in-box.html
\nPosted by Daniel on May 2, 2008 at 7:46 p.m.:<\/p>\n

As suggested above, run firefox on a virtual X server. Use a firefox extension (mozrepl or jssh) to get automated control over the browser.<\/p>\n

I set up a system doing exactly this (for taking screenshots) last summer. In the end it barely took any code, just a fair amount of faffing with config files. Happy to give more details if it’s helpful: (my first name) at ohuiginn.net
\nPosted by rex on May 3, 2008 at 8:44 a.m.:<\/p>\n

I went throught trying to work out a way to do this ages ago.<\/p>\n

Not sure if you’re feeling the same, Adrian, but what bothered me (purely from a principle level) was that I really wanted to be able to do this on my server _without_ having to run a headless X server, or an instance of firefox or whatever.. i wanted a library that was able to do it.. and give back my responses without having the uneccessary overhead of a browser, x server etc running (i know very little about it… but i can’t help but feel that these are uneccessary elements in the equation).<\/p>\n

Surely there is a way to do what you’re asking without having a program running that is designed to actually render the pictures on a screen… *shrug*
\nPosted by anonymous on May 5, 2008 at 4:55 a.m.:<\/p>\n

rex: Rendering HTML nowadays is a heavy complex task. So there is no light library, unfortunately. It sounds like using PyQt is the smartest approach because it does not load a full appliaction but only a rendering engine you can fully control. Having a dummy X-server on Unix seems to be a necessary evil.
\nPosted by Eric Moritz on May 5, 2008 at 3:50 p.m.:<\/p>\n

I was thinking of this very issue a while back:<\/p>\n

http:\/\/eric.themoritzfamily.com\/2008\/02\/08\/python-interface-mozilla-dom\/<\/p>\n

I came across this guy’s post:<\/p>\n

http:\/\/ejohn.org\/blog\/bringing-the-browser-to-the-server\/<\/p>\n

He’s using Rhino and some custom javascript to emulate the browser’s window object.
\nPosted by John Herren on May 13, 2008 at 1:20 a.m.:<\/p>\n

Rhino ftw<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

http:\/\/www.holovaty.com\/writing\/headless-html-rendering […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1759","post","type-post","status-publish","format-standard","hentry","category-passed-times"],"_links":{"self":[{"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/posts\/1759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mudone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1759"}],"version-history":[{"count":2,"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/posts\/1759\/revisions"}],"predecessor-version":[{"id":1761,"href":"https:\/\/www.mudone.com\/index.php?rest_route=\/wp\/v2\/posts\/1759\/revisions\/1761"}],"wp:attachment":[{"href":"https:\/\/www.mudone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mudone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mudone.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}