When I last looked at customizing feeds in WordPress, it was all to do with being able to offer a summary and full text feed simultaneously—making use of WordPress' flexible feed URL syntax and a .htaccess file. In this post I look at modifying the actual contents of the feed using a functions.php file (which may already exist as part of your current theme).

Just as WordPress provides a number of hooks for adding or removing actions in your theme header (see here), so to do the core files that generate your feeds. Editing the core files is however discouraged (it makes upgrading a pain), and although you can build your own replacement feed templates an easy alternative is adding a few lines to your theme's functions.php file.

As a perpetual PHP beginner I feel obliged to warn you that use of the following code is at your own risk.

If there are any PHP/ WordPress experts reading this who can improve on my code please make yourself known ;-)

Removing WP version info

Somewhere, a while back, I read a tip about not including the WordPress version you are running in your template header—potentially allowing hackers to identify you as a target if you haven't kept up-to-date. It's easy to remove if present. For example, in the K2 theme just delete the following line from header.php:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

I recently released that version information was still being sent out in my feed. The feed XML contained a line like this:

<generator>http://wordpress.org/?v=2.x</generator>

Thanks to Peter Westwood's helpful post I used my theme's functions.php file to remove this with the following code:

//Remove WP version info
function hide_wp_vers() { return ''; }
add_filter('the_generator','hide_wp_vers');

So wherever the_generator function is called (such as in the feed templates in /wp-includes) it gets replaced with... nothing. Job done.

Adding a feed image

A feed image (e.g. your site logo or avatar) is an optional part of the RSS 2.0 spec and shows up in some feed readers along with the feed description. There are plenty of tutorials (search Google) that tell you how to add a feed image by editing core template files, and there are plugins that will add one for you. I had previously edited my core RSS 2.0 template, and lost the changes during upgrades more than once. To avoid this in future here's what's now in my functions.php file:

//Add a feed image
function feed_image() { echo "<image>\n\t\t<title>bioneural.net</title>\n\t\t<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>\n\t\t<link>http://www.bioneural.net</link>\n\t\t<width>64</width>\n\t\t<height>64</height>\n\t\t<description>bioneural.net</description>\n\t</image>\n"; }
add_action('rss2_head', 'feed_image');

Having created my feed_image function I use add_action (Codex) to insert my function via the rss2_head hook (Codex).

Note that \n means new line, \t means tab, and \r (not shown) carriage return: these are just for the sake of formatting. They have no function other than making the feed XML—which you will likely never see—look more organized:

<image>
	<title>bioneural.net</title>
	<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>
	<link>http://www.bioneural.net</link>
	<width>64</width>
	<height>64</height>
	<description>bioneural.net</description>
</image>

Here's how the above renders when viewed in Bloglines:

Tip: If you want to add a feed image but don't want to do it via a plugin or functions.php, you can use Feed Image Burner from FeedBurner.

Adding a content license

I've noticed a rise in my content appearing on splogs, usually in the form "[Some random name] wrote an interesting post today: here is an excerpt". This violates the Creative Commons licensing of my content, which requires correct attribution. In a similar vein I've noticed some of my images turning up on "all rights reserved" sites with no attribution. While some folk are no doubt just ignorant, the sploggers are simply morons who don't give a damn. I can't do much about the latter (although I'm giving AntiLeech a spin) but it did get me wondering what I can do to improve the visibility of my licensing terms for the benefit of those "unaware".

The Creative Commons Wiki links to an RSS 2.0 module for annotating feeds. While this may be machine-parsable I've yet to come across a feed reader that actually picks up on it. As well as incorporating this extension I wanted to add a human-readable annotation to each feed item. This one took a bit of figuring out:

//Add CC license to namespace, item, inline img link within description
function add_license_ns() { echo "\n\t" . 'xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"' . "\n"; }
add_action('rss2_ns', 'add_license_ns');
function add_license_item() { echo "\t" . '<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>' . "\n"; }
add_action('rss2_item', 'add_license_item');
function add_license_img($join) {
	$join = _e('<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p>') . the_content();
	return $join;
}
add_filter('the_excerpt_rss','add_license_img');

The first function writes the required namespace declaration; add_action then adds this via the rss2_ns hook (Codex). The next function/ action pair writes the module to each feed item using rss2_item (Codex). The third part is the human-readable bit: writing the image, text, and links and concatenating these with the_content() (Codex) to replace the_excerpt_rss() (Codex). Note also the use of the rel-license microformat.

For this to work you must set your Reading Settings in WordPress to Summary, even though we will be displaying the full text (replacing the_excerpt_rss() with the_content()).

The XML will look like this (edited for clarity):

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	...
	xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	...
		<item>
		<title>Web developer widgets</title>
		...
		<description><![CDATA[<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p><p>Mac-based web developers...</p>]]></description>
		...
		<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>
		</item>

Rendered in a feed reader humans will see this:

The Creative Commons icon is hopefully recognisable and links to the correct license; the link to bioneural.net links to additional terms of use.

Tip: If you prefer not to have full text feeds containing HTML tags, you could use the_content_rss('', '', '', 250) (Codex) in place of the_content() to produce a 250 word text-only teaser.

Expanding the feed description

The text of the feed description is ordinarily the same text that appears as the tagline for your blog (set in General Settings). You might want to keep it short in your blog header, but perhaps send a more informative version out with your feed.

In K2 at least the description is only used in the head:

<meta name="description" content="<?php bloginfo('description'); ?>" />

and header:

<p class="description"><?php bloginfo('description'); ?></p>

One solution is therefore to replace the PHP call with short fixed text descriptions (e.g. "stuff worth sharing") in your theme template (header.php) and make the description/ tagline in WP General Settings longer, so it gets into your feed e.g.:

<description>bioneural.net is for stuff worth sharing: commentary by Bruce McKenzie. Major topics covered are gadgets, informatics, Internet, Mac, mobile, musings, New Zealand, photography, Project Koru, quicklinks, rant, rave, travel and Windows</description>

I was unable to successfully utilize rss2_head (Codex) in a way that avoided duplicate descriptions.

Tip: Another way to add a more detailed description to your feed only is to use Title/Description Burner from FeedBurner.

Adding a category image

I previously used the now neglected Category Image(s) plugin to send out a category icon with each feed item, replicating their use on my blog to readily identify Mac-related posts, etc. All I needed to do was replace the default item description with this:

<description><![CDATA[<?php c2c_the_category_image(); ?><br /><br /><?php the_excerpt_rss() ?>]]></description>

Sadly such a trick doesn't work with the Category Icons plugin I am now using, but I've been in touch with the plugin author and submitted this as a feature request.

Mac-based web developers may yet find a use for Dashboard. SeeSS is a CSS property reference detailing inheritance, CSS compliance, Safari support, possible and default values, examples, plus an informative description [screenshot]. PHP Function Reference provides offline access to the PHP manual, a cheat sheet, and an interactive date formatter [screenshot].

I've had a hard time "getting" RDF (e.g. how it differs from XML), but this article helps give it context. The semantic web is being built simultaneously from the bottom up and top down. Typifying the bottom-up approach, RDF content is machine-readable at the outset; powerful but complex (with several advantages over microformats), RDF is all about inter-operability. Top-down approaches introduce "metadata sprinkling" to existing content, simple but limiting by comparison e.g. microformats (using CSS class attributes as in hCard), or meta elements (meta tags such as those for geo-discovery). Both approaches are valid, but RDF is hard whereas microformats help "the rest of us" contribute to the semantic web. There may be a collision ahead, however, between microformats and RDFa (sprinklings of RDF embedded in existing XHTML).

Dr Bruce McKenzie is now available for freelance consultancy as a clinical knowledge architect, addressing the unmet need for usable knowledge resources at the point-of-care in UK general practice. General practitioners (GPs) make more decisions in a day than a typical business executive, and these decisions cost not just money but potentially lives. It's challenging work, and you can but hope your decisions are based on good information. The problem is information overload and access to what you need when you need it: there's just too much and it's too hard to find in the context of a 10 minute consultation. As a GP for 10 years I can relate to this. I also have informatics knowledge and experience, and this puts me in a position to offer you solutions that are built the way a doctor would design them.

The fact is information doesn't become knowledge by itself. After careful needs assessment raw information must be broken down and reconstructed into a usable form as part of a design process that draws upon both the art and science of information architecture. In other words it's a creative process, but it also necessitates solid technical insight into the context in which a knowledge resource will be used.

With my primary care background, grasp of medical informatics, passion for writing, and practical experience in delivering concise clinical guidance for use at the point-of-care, I am now available for freelance consultancy as a clinical knowledge architect.

Experience in primary care

Ten years experience in several general practices in the UK and New Zealand has given me a practical understanding of the breadth and depth of primary care, and the opportunity to utilize a variety of decision-support tools. A healthy mix of team working and self-directed activity has afforded me insights into group dynamics without compromising my ability to work as an independent professional. An advocate for evidence-based practice, my most recent NHS position included a contracted weekly session on quality initiatives (including on the Quality & Outcomes Framework and RCGP Quality Practice Award preparation). As a nominated GP representative to the Priorities and Clinical Effectiveness Forum (PACEF) in North Derbyshire I shared my passionate views concerning the appropriate form of information destined for use at the point-of-care, instigating "bottom line" summaries in GP circulars and promoting quick-reference guideline flow charts supported by textual background (rather than the opposite).

Experience in medical informatics

As a web developer since 1994 I have a good understanding of evolving technologies used in the delivery of online content, appreciating their potential and recognizing their limitations. While the Diploma in Medical Informatics provides confirmation of my theoretical knowledge, I have considerable real-world experience in clinical knowledge architecture and in supporting practice intranets (2001–2006). As both an online information provider and consumer I understand that print and online media are not the same and that treating them as such can lessen the impact of your content. In the context of a consultation "less is more" when it comes to effective decision support.

What if you could adhere to national and local guidelines, stick to your prescribing and clinical formularies, ensure you do what counts for QOF, and indicate who is responsible for doing what? What if you could distil all these requirements into a single screen on your computer?

A particular interest, first realized in 2002, is the adaptation of evidence-based guidelines for use during the consultation. Much of the guidance available to primary care clinicians still comprises large amounts of textual information and suffers from poor accessibility as a result. During 2004–2006 part of my self-imposed remit was to distill and homogenize competing guidelines (NICE, NSF, PCT, etc.) into consultation-optimized flow charts, to integrate these with clinical terms and prescribing formularies, to take account of in-house resources and indicate areas of clinical responsibility, to ensure concordance with local secondary care clinical practices, to address quality indicators in the New GMS Contract, and to publish the result on a practice intranet as cross-referenced clickable image maps. This was no small task but completed for all the QOF clinical indicators; my ultimate vision was full clinical system integration (using XML for data exchange).

Experience in technical writing

Being first to the market in 1995 with the paperback Medicine and the Internet demonstrated my commitment and dedication to meeting deadlines (from proposal to shelf within 12 months is highly unusual for a medical textbook). I delivered two subsequent editions of this commercially successful title, further refining my literary abilities to Oxford standards and, in the third edition, my editorial skills. I continue writing for pleasure, often on technical subjects, via my weblog.

Creating knowledge from information needs an architect [© iStockPhoto]

What makes my service unique?

The combination of cross-domain knowledge and experience described above is itself a rarity. Furthermore, being independent yet able to work with the NHS gives me the clinical insight and technical flexibility to help you beyond the limitations of a "one size fits all" NHS informatics service. I don't have to deliver an "out of the box" solution and try to convince you that's what you need: you tell me what you want and I'll work with you to design it.

For more information, please go here.

Microsoft Silverlight is a proprietary cross-browser, almost cross-platform (not yet Linux), and cross-device (WM6 & Symbian only) plug-in vaguely tasked with "delivering the next generation of .NET based media experiences and rich interactive applications for the Web." The developer tools (Windows or Mac) output interactive text, bitmap images, vector graphics, animations, and video (WMV)/ audio (WMA and MP3) playback, in competition primarily with Flash. The plug-in is free (v2 is currently in beta) & curiously you can download the Getting started video in QuickTime for iPod! More here.

A customised version of iBox is used extensively on bioneural.net (e.g. the Flickr photocast here) and iBegin have just released version 2. This free JavaScript lets you display automatically scaling images, external documents, or embedded containers in an overlay dialog without needing to reload the page. iBox has gained some weight since v1.2.1 (2006) but remains compact compared to other Lightbox-alike solutions and just as simple to use, now boasting wider browser support and new plug-in capabilities (e.g. for embedding YouTube videos). In most cases it degrades gracefully when JavaScript is disabled (it won't display hidden inline containers; JavaScript is required to play YouTube videos).

Geotagging (or geocoding if you prefer) is the act of associating your content (blog posts, photos, feeds, etc.) with a geographic location (e.g. via latitude and longitude co-ordinates). Thus tagged authors can "mash" their content together with the likes of Google Maps, or the Flickr Map if photography is your thing. However, co-ordinates are typically encoded within metadata (or microformat) tags making them visible to machines but hidden from people. We have de facto web standard icons to help identify feeds, OPML, and sharing—so why not for geotagged content?

Update 29.02.08: Thanks to everyone who gave feedback or otherwise contributed to the process of taking this proposal forward. Comments are now closed and further feedback should now be directed to geotagicons.com, where you can now download the new community-designed geotag icon.

The goods

I propose a web standard Geotag Icon, to be used freely by any geotagger or geotagging service. Here is what it looks like at 128px:

At 32px:

And at 16px:

Important: These images are not final; this is a proposal. Please do not hotlink to these images. You can download them individually by right-clicking the one you want, or as part of the draft Geotag Icon Development Kit here.

Family line-up

The family resemblance is obvious:

Why not complete the set? Grab the Feed icon, the OPML icon, and the Open Share icon.

Update 27.03.08: The Open Share Icon Project offers a free, open, community-driven alternative to the trademarked and brand-linked ShareThis.com icon.

Icon specification

• It should be similar in style to existing de facto web standard icons (hereafter known as "the Three");
• It should be distinctive in colour from the Three;
• The colour should in some way represent it's purpose (although this is not a feature of the Three);
• It has to be recognizable at 16px yet not look dull at larger sizes;
• It should be format-agnostic (it doesn't matter what geotagging method is used);
• It should not be closely aligned with iconography from an existing service (e.g. people shouldn't say "Ah, that's the default Google Maps marker!"). That is, it should be service-agnostic.

Inspirations

Words or objects you might associate with geotagging abound. For example, map, compass, navigation, co-ordinates, gridlines, waypoints, pins, markers, X marks the spot, GPS satellites, etc. A Google Image search turns up some rather beautiful yet overly detailed (for our purposes) icon examples, such as Magrathea, geoXtract, RouteBuddy, and HoudahGeo. Some are less delicate (e.g. the button used by the geo microformat or the Geocaching.com logo) but closer to the simplicity we are looking for.

The visual essence of geotagging is marking a point with a pointed object (physical or virtual). In the days before the Internet when I dreamed of travelling the world I had a National Geographic world map on my wall into which I placed pins or tacks to indicate places I'd like to visit. I dug around in my wife's stationery draw and found a few examples:

I think we can all relate to the middle one; it's user-friendly, iconic, and best of all it doesn't get stuck into your heel as easily as the drawing pin when scattered on the floor!

Anatomy of an icon

It might not be an obvious choice, but lacking Illustrator or the skills to use it, I often use OmniGraffle as a drawing tool. The interface is world-class and it can export to a number of formats, including PDF, giving me the option to supply a vector version. Here is the recipe I used if you want to bake your own version, or try out a variation of your own design:

The tack itself is white (with no stroke) to match the central elements of the Three (and it so happens that my model pin was white!). As you increase size, greater detail becomes visible. Crucially the detail degrades gracefully at smaller sizes (16px and 32px shown magnified):

Brown is an oft maligned colour although—as David observed—a tinge of bronze prevents it looking too "dirty". Brown of course is the colour of earth—unless you live in Australia's Red Centre. If you do hail from the Land of Oz don't panic, as the devkit allows you to change the tone (e.g. a red dust effect!) in Photoshop. See the included readme.pdf for details.

Usage examples

It's up to you how you use it, but bear in mind it's not intended as a marker replacement (markers with points are generally more appropriate for that). The idea is to add a visual identifier to your content (blog post, photo, etc.) indicating associated geodata. The image doesn't have to link anywhere, but hyperlinks should be used if it makes sense to do so.

For example, I'm using the Geo Mashup plugin for WordPress and display it in several locations. It appears as an overlay on category images (itself a plugin) that have associated geodata, so you know at a glance that the post pertains to a particular location:

Clicking on the icon transports you to that location on my Google Map (see my Travel category for live examples). The relevant template code is:

<div class="catimage">
	<?php c2c_the_category_image(); ?>
	<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag-overlay">'; GeoMashup::show_on_map_link('<img src="../geotag-16px.png" alt="geotag" />'); echo '</span>'; } ?>
</div>

The class .geotag-overlay is styled in CSS with:

.geotag-overlay { width: 16px; height: 16px; position: absolute; margin-top: 16px; margin-left: -16px; }

The Geotag Icon also appears in the actions box at the foot of an entry, adjacent to the coded co-ordinates and direct link to the location on my Google Map:

The relevant template code is:

<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag">Geotagged at lat ' . $coordinates['lat'] . ', lng ' . $coordinates['lng'] . ' ('; GeoMashup::show_on_map_link('View'); echo ' on map)</span>'; } ?>

The CSS for such inline use is:

.geotag { padding: 2px 0 2px 20px; background: url('geotag-16px.png') left center no-repeat; }

Finally, it appears in the info window when you click on a map marker next to the post title:

This is done is CSS only, like so (.locationinfo is a styling hook provided by the Geo Mashup plugin):

.locationinfo h2 { font-size: 1.2em; font-weight: bold; background: url('geotag-16px.png') left center no-repeat; text-align: left; padding: 2px 0 2px 20px !important; }

Credits

Thanks to David for getting me interested in geotagging again, and for early feedback on the proposed icon. Matt Brett, Ken Rossi, and Alex King are responsible for promoting the Three.

Your opinion counts

I am not opposed to change, colour or otherwise, if that is what folk ask for. My interest is in helping the semantic web become more visible to people, and the proposal is here to stimulate discussion and hopefully arrive at some form of consensus (to the extent that is possible on the Internet!).

If you have an opinion, please share it here or participate in the discussion on Flickr.

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.

During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another.

Text shadows, drop shadows, and round corners in Safari 3

A historical precedent

The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.:

<!--[if lte IE 6]>
	<style type="text/css">
	#pnglogo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='../logo-trans.png'); padding-top: 57px; }
	</style>
	<link rel="stylesheet" type="text/css" media="screen" href="../ie6-patches.css" />
<![endif]-->

It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it?

So, if we can hack our way to supporting inferior or out-dated browsers, why should we not also employ hacks to support leading-edge browsers like Safari 3 that are already capable of rendering much of that draft CSS3 goodness?

Using jQuery's CSS injector

There are probably multiple JavaScripts that let you load CSS via the DOM, but since I'm using jQuery anyway that's how I've chosen to do it. If you don't have jQuery installed go get it and load it in your document head e.g.:

<script type="text/javascript" src="../jquery-1.2.3.pack.js"></script>

Below this we create a $(document).ready() function so that the contents load via the DOM and hopefully before the page content is displayed. Inside this function our "content" consists of a series of CSS selectors (inside the first bracket) paired with the CSS properties we wish to inject (name and value, comma-separated) joined via .css. Example:

<!-- Have jQuery inject WebKit CSS via DOM on selected elements -->
<script type="text/javascript">
	$(document).ready(function(){
	$("h1").css("text-shadow","black 0.2em 0.3em 0.2em");
	$(".description").css("text-shadow","black 0.2em 0.3em 0.2em");
	$("#page").css("-webkit-box-shadow","#333 0px 5px 10px");
	$("#footer").css("-webkit-box-shadow","#333 0px 5px 10px");
	$(".container").css("-webkit-box-shadow","#333 0px 5px 10px");
	$(".container").css("-webkit-border-radius","10px");
});
</script>

If you had a div with the class "container koru", for example, Safari 3 will blend the above box-shadow and border-radius styling (as inline CSS3) with any additional CSS2.1 styling for .container or .koru present in your stylesheet. You can see what's going on using that browser's Web Inspector:

Note: A -webkit- or -moz- prefix on CSS properties is used respectively by the Safari and Mozilla/Firefox browsers to indicate tentative support for as yet non-ratified web standards. Thus -webkit-border-radius: 10px; and -moz-border-radius: 10px; are both potentially differing implementations of "border-radius".

OK, so the "how" is easy. Now the "Should you?"

The positives

Effects are rendered without requiring images.

Effects are rendered without requiring add-on JavaScript effects libraries.

Effects are rendered without increasing page size or load time.

Effects are rendered that may be impossible with some JavaScript or image-based techniques (e.g. anti-aliasing, liquid layout support).

Effects can be targeted at specific web browser engines.

No changes to semantic mark-up are required.

Your stylesheets remain W3C-valid (if they were before!).

Browsers simply ignore CSS properties they don't understand, so degradation is graceful.

If JavaScript is disabled browsers will still load your stylesheets, so degradation is graceful.

It is compatible with template-based websites in not requiring page-specific effects scripts to be inserted into mark-up.

When the -webkit- or -moz- prefix gives way to the real deal of W3C-ratified CSS3 we can simply remove the script and move the content to our stylesheet without having to re-design effects elements or edit any mark-up.

If you don't start using CSS3 now you might have retired before it becomes W3C-ratified.

The negatives

Turning off your stylesheet does not disable styling loaded via the DOM.

Effects can be targeted at specific web browser engines (like browser-targeting, a double-edged sword that undermines the uniformity of the "web experience").

It could be construed as cheating. It is.

What are your views, if you have any, on the merits or otherwise of this technique?

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.

Situation recap

In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients:

• We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article);
• Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color;
• We could use JavaScript effects libraries.

It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size.

Extending jQuery

While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of interactive controls that deal with mouse interaction (e.g. resizing, dragging) and other "user interface" extensions. As of this writing the jQuery documentation is incomplete and the developers in the process of transitioning visual effects formerly included in jQuery UI to a new sister library called jQuery Enchant. The controls (also referred to as core interaction plugins, UI widgets, or components) are themselves are almost invariably dependent on other jQuery extensions—needing at least the Dimensions plugin.

So jQuery needs to get its act together in respect of naming conventions, but perhaps this is more indicative of active development rather than lack of direction? I guess jQuery UI/ Enchant are to jQuery as script.aculo.us is to Prototype. In a nutshell we're saying that with some jQuery code that in turn requires a bit more extra code in order to work, in addition to the code that is "jQuery" itself—we can create visual elements like drop shadows! jQuery is thus readily extendible; to use these extra bits of code you just need to load the relevant add-on script in your document head, after having loaded jQuery itself. A picture may help:

Test cases

I've used the same basic test box from Part 1, so our core document structure looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery test cases</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="jquery.gradient.js"></script>
<script type="text/javascript" src="fx.shadow.js"></script>
<style type="text/css">
	...
</style>
<script type="text/javascript">
// <![CDATA[
	$(document).ready(function() {
	...
	});
// ]]>
</script>
</head>
<body>
<div class="className">
	<h4>Lorem ipsum</h4>
	<p>Lorem ipsum dolor...</p>
</div>
</body>
</html>

With all the necessary libraries loaded we can start adding effects to our div by calling them within $(document).ready() (in place of ... above).

Download the test files here (.zip archive, 27KB).

Here is the live link.

Case 1: Round corners

If you wanted to use fancy images to produce round corners yet avoid extra mark-up, you could use this technique. Alternatively use no images at all via the jQuery corner plugin, available here. The plugin supports a variety of corner types and borders as you can see in the demos. The following call will add cornering with a radius of 20px to a div with the class .cornered:

$('div.cornered').corner("20px");

This will have the following effect on our test box:

Case 2: Gradients

The Element gradient plugin, available here, will fill an element (e.g. div) with a linear gradient of specified direction (horizontal or vertical only) and opacity. It requires the Dimensions plugin. The following call will add a vertical gradient from black to white with 40% opacity to a div with the class .gradient:

$('div.gradient').gradient({ topcolor: '#000000', bottomcolor: '#ffffff', horizontal: false, opacity: 40 });

This will have the following effect on our test box:

Note that you can't shorten the hex-code (it must be #ffffff not #fff for white, for example).

Tip: If you leave the gradient as black to white with some opacity you can create colour gradients much more easily but changing only the background colour of the container. This is a jQuery version of the ALA super-easy blendy backgrounds trick.

Case 3: Borders

Back to the jQuery corner plugin; it can also do borders using nested elements i.e. one rounded box inside another. So our mark-up could be edited thus:

<div class="xtra">
<div class="border">
	<h4>Lorem ipsum</h4>
	<p>Lorem ipsum dolor...</p>
</div>
</div>

But we don't want to edit our mark-up do we? We don't have to.

Tip: We can make use of .wrap() to inject the extra container into our mark-up on-the-fly with JavaScript.

The following calls will add a wrapper div with the class .xtra to our box, then proceed to round our inner box (.border) with a radius of 15px, before padding .xtra with 5px of "border" (whitened with CSS on .xtra) and rounding with a 20px radius:

$('div.border').wrap("<div class='xtra'></div>");
$('div.border').corner("15px").parent().css('padding', '5px').corner("20px");

This will have the following effect on our test box:

Case 4: Drop shadows

In researching this article I came across three ways to create drop shadows using jQuery:

• Shadow is an extension that uses tables with multiple rows subject to CSS styling including varying opacity to create a drop shadow illusion;
• A method that uses images and "onion skin" CSS added via .wrap() to add a drop shadow;
• UI/Shadow.

UI/Shadow, available to download here, is being folded into the yet-to-be-released jQuery Enchant library. It wraps your element in nested divs and uses opacity to create the shadow effect. It also requires the Dimensions plugin. The following call will add a drop shadow to a div with the class . dropshadow:

$('div.dropshadow').shadow({ color: "#444", offset: 5, opacity: 0.2 });

This will have the following effect on our test box:

Combining effects and liquid layouts

As you can see while the effects in cases 1–4 work well enough on their own, they sadly don't play together very well (see Case 5). Whether this is a limitation in one or more of the plugins, or in my scripting know-how I'm not sure.

It is possible to create a rounded box with a border that adjusts to change in text size or window width, but using an image to render the gradient (see Case 6). Because the Dimensions plugin employs absolute positioning, effects that use it (gradients, drop shadows) will "detach" from their elements if you try resizing your browser window or changing text size (see the effect on cases 2, 4, and 5).

The final score

To be fair I guess we should use the same scoring system to evaluate jQuery against the other methods we explored in Part 1.

Scoresheet:

Photo background: Supported.

Gradient background: Supported (as image or scripted).

Four rounded corners: Yes.

Border: Yes (without extra mark-up).

Drop shadow: Yes (without images).

Minimal mark-up: Extra containers in mark-up can be avoided with .wrap().

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: No.

Small footprint: 29KB for jQuery plus 19KB for add-on libraries (background images additional). Of course if you're already using jQuery you need only consider the additional size of any add-ons (e.g. shadows for 6KB).

Graceful degradation: Renders as per the master if JavaScript disabled but liquid layouts may cause problems if width is set on containers added with .wrap().

Liquidity: Yes, with the proviso that you avoid Dimensions-reliant effects.

Score: 9/12 (probably less, because of problems combining effects)

Not enough to de-throne CSS 3 which scored 11/12, or 12/12 if it were a standard. But CSS 3 isn't here yet and won't be widely supported by all major browsers for some time. jQuery is here, however, and JavaScript is widely supported.

Upon reflection there's something to be said for the elegant simplicity and refined geometry of straight lines and sharp corners. This is how the Dwarves would choose to build websites, leaving curves and soft edges to the Elves. So the ultimate question, really, is do you relate more to Gimli or Legolas? Your answer to that, Middle-earthlings, will decide the direction you should take ;-)

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!

The traditional approach

The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs:

<div class="curvetop"></div>
<div class="curvemid">
	<h2>Willkommen! Welcome!</h2>
	<p class="german" xml:lang="de" lang="de">Willkommen auf der Projekt Koru Seite, wo Simone &amp; Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einf&uuml;hrung findet Ihr <a href="http://www.bioneural.net/2006/03/17/introducing-project-koru/">hier</a> zusammen mit einer <a href="http://www.bioneural.net/2006/03/30/the-teachings-of-te-koru/">Erkl&auml;rung</a> warum wir das Koru als Symbol unserer Reise gew&auml;hlt haben.</p>
	<p class="english">Welcome to Project Koru, where Simone &amp; Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project <a href="http://www.bioneural.net/2006/03/17/introducing-project-koru/">here</a> together with an <a href="http://www.bioneural.net/2006/03/30/the-teachings-of-te-koru/">explanation</a> of why we chose the koru as the symbol for our journey.</p>
</div>
<div class="curvebottom"></div>

Three gradient images (2 having one rounded corner each) could then be loaded into the background of each of the three "layout classes" via CSS:

.curvetop { height: 15px; background: #fff url('gradient-top.png') bottom left no-repeat; display: block; position: relative; margin-top: 10px; }
.curvemid { background: #fff url('gradient-bg.png') repeat-y; padding: 2px 20px !important; display: block; }
.curvebottom { height: 15px; background: #fff url('gradient-bottom.png') top left no-repeat; display: block; position: relative; margin-bottom: 10px; }

The result:

You could use this exact same technique for adding embellishments like borders, drop shadows and the like—but not without some Photoshop skills and a decent collection of bandwidth-hogging images if you needed multiple box styles.

The challenge

I devised a box that I thought would test the mettle of any technique. It consisted of just one div containing a header and a paragraph, the text in each of which should appear over a different background with one of these being a gradient (but not necessarily an image). The box should be formed with rounded corners (including on images), a white border, and a drop shadow. It should also have a number of functional characteristics:

• Minimal mark-up i.e. avoiding nested and/or empty tags;
• No changes to mark-up required (but extra CSS allowed, since this could be moved to an external stlesheet);
• Valid XHTML and CSS (2.1);
• Anti-aliasing on the corners (inner and outer border edges);
• Small footprint (let's say under 20KB);
• If using JavaScript it should degrade gracefully (i.e. still looks OK if JavaScript is disabled);
• Liquid container (adjusting container width to both content size and browser window dimensions).

Why the requirement for minimal markup? Forward planning. Eventually CSS3 will arrive, and there'll be no need to scour your database in order to clean out all that redundant mark-up. Just amend your CSS and delete any unemployed images or JavaScript.

My template XHTML and CSS rendered the following:

Here is the live link.

Finding a solution to fulfil most if not all of my form and function requirements was going to be something of a mission. There's a useful roundup of techniques here, divided into those based on CSS and those based on JavaScript, with examples in both groups requiring anything from no images at all through to eight images. A particular difficulty was finding techniques not restricted by the dimensions of any required image; many of the earlier established methods were clearly devised before the availability of 23" widescreen displays (example.)

I made a shortlist (in no particular order) of techniques that looked promising and set to work. I'm not going to post all the code directly into this article or it will become over-long. The files I used for each technique, together with the master template and original full packages where applicable, are available for download should you wish checkout the code or conduct further experiments. I've tested only in Safari and Firefox.

Download the test files here (.zip archive, 428KB).

Nifty Corners Cube

First up is Nifty Corners Cube by Alessandro Fulciniti. This method uses JavaScript and CSS; no images other than those you wish to use as backgrounds are required. Here is the result:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: While you can produce a convincing rounded border, using padding on the container, this would require extra mark-up in our example in order to retain the cornering on our background images.

Drop shadow: Not supported.

Minimal mark-up: An extra container is required to render a border with inside and outside rounding.

Static mark-up: Mark-up edited to add extra container plus insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Anti-aliasing is not working on the background images or border, although it does work on solid colour boxes in the examples.

Small footprint: 10KB for CSS and JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered (and in the third case for .xtra) supports liquid layouts (case four).

Score: 8/12

curvyCorners

Cameron Cooke's curvyCorners is another image-free JavaScript solution:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: There are rounded corners, but these are rendered adjacent to our background content rather than on top of it. This example illustrates rounding on a background image, but adding a border to the containing div merely fills the cornered area with "extra" offset background (see here).

Border: Obtained by applying background and border to container.

Drop shadow: Not a feature of this technique.

Minimal mark-up: Yes.

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Yes, but only on the outside of the rounded border (not on images).

Small footprint: 24KB for JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered supports liquid layouts (case four).

Score: 7/12

SRCCB

The "simple rounded corner CSS boxes" technique was devised by Ryan Thrash, also accessible in the form of an online generator as Spiffy Box. It uses no JavaScript and a single image combined with moderately complex CSS (which would have to be recalculated for each box size):

Here is the live link.

Scoresheet:

Photo background: Supported (integrated into container background).

Gradient background: Supported (integrated into container background).

Four rounded corners: Yes (integrated into container background).

Border: Yes (integrated into container background).

Drop shadow: Yes (integrated into container background).

Minimal mark-up: Requires two additional divs for positioning purposes.

Static mark-up: Mark-up edited to insert two additional divs.

W3C validity: Yes.

Anti-aliasing: Yes (integrated into container background).

Small footprint: 6KB image overhead compared to master with original 2 background images.

Graceful degradation: Not applicable as no JavaScript.

Liquidity: Depends upon fixed-width images.

Score: 9/12

swfIR

The SWF Image Replacement (swfIR) technique is offered by Jon Aldinger, Mark Huot, and Dan Mall. It applies to inline (cf background) images and uses JavaScript and Flash to swap out the original and deck it out with bling. It does more than we require—image rotation and stretching for example, and at first glance it certainly looked like the wrong tool for the job. I wondered, however, if we could use CSS positioning to overlay our text on top of the replaced images. It turns out you can:

Here is the live link.

Scoresheet:

Photo background: Supported (as an inline image!).

Gradient background: Supported (as an inline image!).

Four rounded corners: Actually you get 6! (you could potentially blot out the bottom border on the heading using a third positioned inline image—a real hack!).

Border: Yes (specified in JavaScript).

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: Requires insertion of two inline images.

Static mark-up: Mark-up edited to insert inline images plus box-specific script.

W3C validity: Yes. It does validate, but should I say "No" because it depends on Flash?

Anti-aliasing: Yes.

Small footprint: 25KB (24KB JavaScript and SWF; 1KB image overhead compared to master with original 2 background images.)

Graceful degradation: Acceptable (just) with JavaScript disabled.

Liquidity: Positioning depends upon fixed-width images.

Score: 7/12

ShadedBorder

Steffen Ruzee brings you ShadedBorder, a full-featured solution that uses only JavaScript:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes (specified in JavaScript), but height on .sb-inner causes blue background to show through (why isn't this also an issue with the h4 background image?). Setting height to 0 removes the bar but also takes out the gradient! Admittedly, you could style the background to tone in better.

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: A headline with it's own style can be achieved with extra mark-up, and extra script in the head, and another script that must be inserted before the closing body tag. This makes it fatally flawed for use in a templated system like WordPress, IMHO.

Static mark-up: As above, mark-up edited at 3 points, including a necessary change from div class to ID.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 9KB JavaScript.

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Yes (comment out width on #cornered; not shown due to duplicate IDs).

Score: 9/12

SVG

Firefox 2 and Safari 3 can both display standalone Scalable Vector Graphics (SVG) images, an unloved W3C standard. They can't load SVG from CSS, however, making SVGs unusable as background images at this time. The option to use SVG in CSS hasn't gone beyond a proposal, with Wikipedia noting "the use of SVG on the web is in its infancy". It took me quite a few hours to get to grips with the examples in the 1.1 spec and create a valid and functional XHTML/SVG file for testing purposes. The basic idea is to create a bordered box with rounded corners, fill it with a gradient, and apply a Gaussian blur to a slightly offset box of the same dimensions—all with a few lines of XML. Here is our box using Opera 9.25 (Mac):

Here is the live link (SVG-aware browser required).

Scoresheet:

Photo background: Supported in CSS, but you loose the rounded corners.

Gradient background: Supported without CSS via linearGradient.

Four rounded corners: Yes via rx on rect.

Border: Yes via stroke on rect.

Drop shadow: Yes via filter with feGaussianBlur, feOffset, and feMerge.

Minimal mark-up: Requires insertion of inline SVG image(s).

Static mark-up: SVG must (currently) be added inline; also necessitates DOCTYPE change and .xhtml file extension.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 0KB (background image additional; gradient image not required).

Graceful degradation: No (Internet Explorer 6 and 7 choke).

Liquidity: Positioning depends upon fixed-width SVG images; resizing text size or browser window is problematic.

Score: 7/12

Update 18.03.08: Safari 3.1 adds support for SVG images in img elements and CSS images.

CSS3

CSS3, if it ever arrives, promises not only rounded corners but drop shadows and multiple background images too (oddly the draft spec doesn't mention gradients). Apple's Safari (available for Mac and PC) already includes support for such effects—but of course it's not valid CSS. You can preview CSS3 rounded corners here and here in Firefox or Safari 3. Here is our box using Safari-specific not-quite-CSS3:

Here is the live link (WebKit browser required).

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes.

Drop shadow: Yes.

Minimal mark-up: Yes.

Static mark-up: Yes.

W3C validity: No, but only because the standard isn't yet established.

Anti-aliasing: Yes, but note anti-aliasing artefact in the bottom corners.

Small footprint: 0KB (background images additional).

Graceful degradation: Yes (non-CSS3 aware browsers see a plain box).

Liquidity: Yes.

Score: 11/12

Summing up

Which technique you choose ultimately depends upon what you're after and what you prioritise. There is no one "best" solution that fits all requirements. In terms of form and function CSS3 has to be the clear winner if one must be chosen, with a perfect score blown only by the fact that it isn't a W3C standard (yet). Herein lies CSS3's only significant yet overwhelming drawback: what good is it if the majority users can't see the effects? At the same time I'm not personally sold on any of the alternative methods. The end results may look good; it's how they achieve them that I don't much care for. Although a method validates it typically involves cheating the validator (seemingly JavaScript's raison d'être). Just take a look at the live links with Safari's Web Inspector (example).

Before I put a lid on this little adventure, as Jobs would say, there's just one more thing... what about jQuery? The jQuery library (included with WordPress and the K2 theme) can be extended to render corners, shadows, and gradients. If this article was Part 1, then that exposition forms Part 2. Coming soon.