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 during a lunar-eclipse. Pretty!
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…