Integrating CSS and Restructured Text By: John - Paul Gillespie     Those who are not familiar restructured text may initially bemoan it's lack of power and flexibility when compared to XHTML, but as often the case in life, initial appearances can be deceiving. Although the use of CSS for styling and presentation is "best practice" in XHTML, it is not yet mandatory, which allows anyone with knowledge of such "deprecated" tags as "align=center" or "font", to illegally wreck havoc with your beautiful CMS-based site. Outside of a mandatory 2 month course in basic XHTML and CSS, one solution which desperate webmasters have often deployed is to force site editors and contributors to work with WYSIWYG editors configured to strip out any and all illegal tags. Not only is this a somewhat draconian solution, and immensely frustrating from a user point of view, but it still doesn't bring your site any closer to being beautifully or correctly formatted. Just not illegally so. And don't get me started on tables... Restructured text on the other hand forces compliance to XHTML best practise precisely because it is not XHTML. By allowing users to work in an environment much closer to the simple text notepad which almost everybody is familiar with, and without a single (more often than not forgotten) tag in sight, the simplicity of ReST leaves the site contributor the concentrate on content, as God would have intended it, and takes care of the parsing of said content into strict XHTML for them. But that's not all. Presentation is still possible via CSS—also as God intends it—yet much to the relief of the site designer and webmaster—outside of the control of a user whose obsession with "beautifying" one little plant can be to the detriment of the wellbeing of the entire garden. And not just the presentation of your basic paragraph and heading tags, but, watching closely, the ReST figure directive, which in combination with a little CSS jiggery-pokery detailed below is capable of deploying some quite remarkable effects. The Polaroid Effect Through deployment solely of the class "float-right-360" to the figure directive below, it is possible to add a polaroid effect to a photograph in the following manner: As reStructuredText: .. figure:: /images/the_moon.jpg :alt: the moon :figclass: float-right-360 The moon during a lunar-eclipse. Pretty! To produce the following image and caption: the moon See result at: A Blog about Plone Which is achieved with the following css: .float-right-360 { position: relative; float: right; text-align: left; background-image: url(polaroid_360_270.png); background-repeat: no-repeat; margin: 10px 0 10px 20px; padding: 1px 8px 8px 1px; border: none; } .float-right-360 img { border: #fff 7px solid; border-bottom: #fff 36px solid; width: 247px; height: 308px; } .float-right-360 p.caption { position: absolute; font: normal 11px/13px Arial, Helvetica, sans-serif !important;; color: #000; margin: 0; padding: 0 10px 0 0; top: 321px; left: 10px; } Note there is one limitation to this effect—the image used must be exactly 308px H by 247px W, because there simply aren't enough "hooks" inside the figure directive to deploy the necessary number of background images to allow scaling. As a work around to this limitation, one could create a variety of classes for pre-determined image sizes and orientations, which would also have the added benefit of forcing your users to stick to creating images in sizes complimentary to the overall site design. Which raises another sore point about CMS's which don't employ image-sizing engines—but that would be another topic... John Gillespie is a designer, web developer and video editor who lives in Auckland, New Zealand. A member of the Sri Chinmoy Centre, he uses his practice of meditation as a source of energy and inspiration for his many creative activities. Amongst other activities he produces podcasts for Sri Chinmoy TV. http://www.vasudevaservice.com/sri_chinmoy/ Article Source: zeronese.net article directory. Article Word Count Appx. : 569 Article Category: Articles » HTML-and-CSS » CSS See all articles by John - Paul Gillespie Note: Copying of article contents in whole is permitted provided that article body and article author by-lines are kept intact and unchanged. Hyperlinks and/or URLs including article source link provided by authors and/or zeronese must remain active at all times.       The views and opinions of authors expressed on Zeronese Article Directory web sites do not necessarily state or reflect those of the Zeronese.net .