Have You Seen the Saucer?


h2{clear:none}. Demo Pages

Here are screenshots of ${fs} in action. Click on an image to see it full-size. These are all taken from our "demo apps":./demos.html running in our "browser" demo application. These pages are simple XHTML we threw together to show (and test) our CSS coverage.

We apologize for the quality of the thumbnails--this batch was done quickly using a desktop tool--we'll fix them shortly.

If you have any good-looking screenshots of Flying Saucer rendering your own pages, please get in touch with us so we can post them, thanks! 

divStart(thumbnail).

<a href="../images/screenshots/backgrounds.png"><img src="../images/screenshots/backgrounds-thumb.png" alt="" width="140" height="115" /></a><br />Backgrounds

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/formatted.png"><img src="../images/screenshots/formatted-thumb.png" alt="" width="140" height="115" /></a><br /> Formatting

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/font-size.png"><img src="../images/screenshots/font-size-thumb.png" alt="" width="140" height="115" /></a><br /> Sizing

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/positioned.png"><img src="../images/screenshots/positioned-thumb.png" alt="" width="140" height="115" /></a><br /> Positioning

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/z-index.png"><img src="../images/screenshots/z-index-thumb.png" alt="" width="140" height="115" /></a><br /> Layering

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/tables.png"><img src="../images/screenshots/tables-thumb.png" alt="" width="140" height="115" /></a><br /> Tabling

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/alice.png"><img src="../images/screenshots/alice-thumb.png" alt="" width="140" height="115" /></a><br /> Floating

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/pure-xml.png"><img src="../images/screenshots/pure-xml-thumb.png" alt="" width="140" height="115" /></a><br /> XML-ing

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/hover.png"><img src="../images/screenshots/hover-thumb.png" alt="" width="140" height="115" /></a><br /> Pseudoselecting

divEnd.


h2{clear:both}. Websites 

Disclaimer: The following screenshots are from publically-available websites and are shown here in order to demonstrate the rendering capabilities of the Flying Saucer rendering panel. Images, content, design etc. belong to the owners of the respective content on the respective websites. URLs to each site are hyperlinked to the text shown.

Many of these sites may be in "legacy" HTML. No tricks were used to load them--however they are all run through the TagSoup HTML parser to convert them to valid XML. You will note some minor problems in rendering some of these sites. 

Taken using JDK 6 running on Ubuntu Feisty Fawn with anti-aliasing turned on.

divStart(thumbnail).

<a href="../images/screenshots/w3c-org.png"><img src="../images/screenshots/w3c-org-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://www.w3c.org">W3C Home</a>

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/css21-spec.png"><img src="../images/screenshots/css21-spec-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://www.w3.org/TR/CSS21/">CSS 2.1 Spec</a>

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/wikipedia.png"><img src="../images/screenshots/wikipedia-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://en.wikipedia.com/wiki/css">Wikipedia</a>

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/alistapart.png"><img src="../images/screenshots/alistapart-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://www.alistapart.com">A List Apart</a>

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/java-net.png"><img src="../images/screenshots/java-net-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://www.java.net">Java.net</a>

divEnd.

divStart(thumbnail).

<a href="../images/screenshots/csszengarden-icicle.png"><img src="../images/screenshots/csszengarden-icicle-thumb.png" alt="" width="140" height="115" /></a><br /> <a href="http://csszengarden.com">Zen Garden</a>

divEnd.


divEnd.