HTML5 quote attribution

I often come across the situation when working on a client site where I need to mark up a  soundbite. Usually a client testimonial or similar in some kind of business site. The problem I find is that these sorts of testimonial quotes all come complete with their own source references and I’ve struggled to find a nice way to mark up this associated data. Usually a name, sometimes a company, sometimes even a company URL are provided. At first glance one might think that the ‘cite’ attribute of our element is an appropriate method, as the spec is clear that the…

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

Sounds great, but the spec continues that..

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

Quite clearly inappropriate, intended to reference the source document from which a quote has been lifted. It doesn’t really apply in our use case of recounting a spoken quote as a testimonial or similar. Especially when the only attribution that we might have is the name of a person. HTML4 gave us the perfect solution in the <cite> element, providing the following code example…

[html]As <cite>Harry S. Truman</cite> said,
<q lang="en-us">The buck stops here.</q>[/html]

Unfortunately the current HTML5 Working draft lays a big log in our custard by specifically stating that…

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names.

The best option it can offer us is the <b> tag or a <span> element, but isn’t really clear as to the best practice – almost hinting that these sorts of attributions shouldn’t be used at all.

Looking back at one of my recent projects, I can see that I chose to use the following markup, which on reflection may also not have been the best solution but provides a level of semantics otherwise not provided

[html]<q>They helped me find a great way of marking up testimonial quotes
<span class="author">A.N. Other</span></q>[/html]

A possible solution – the small element

When reading the HTML5 recommendation for the element we find the following paragraph…

Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

…which seems to have slipped under the radar up until now. Maybe I am reading too much into it, but the clause Small print is also sometimes used for attribution implies that the best way to mark up the above would be as follows:

[html]<q>They helped me find a great way of marking up testimonial quotes
<small class="author">A.N. Other<small></q>[/html]

It works for me, but can’t help thinking that I’ve missed something or am making a bit of a leap. Otherwise why wouldn’t the W3C list the <small> element among those that could be used for this purpose?

Maybe I need to think this out a bit more, although what’s more likely is that I should maybe think about it a bit less

CSS quotes and the content property

If there’s one thing I enjoy more than learning new stuff, it is learning new stuff about something that I thought I had boxed off already. The CSS2 ‘quotes’ property pretty much fits that bill.

Here’s the rub if (like me) this is a property that you’re unfamiliar with:

Major browsers will prepend and append quotation marks to the `<q>` element via the CSS ::before and ::after pseudo-elements. This is pre-programmed into the user-agent style sheet, and a quick inspection via Firebug or whichever dev tools you prefer will reveal the following…

q::before {
q::after {

I frequently use the ::before and ::after pseudo-elements to help keep my HTML light when marking up some of the more elaborate designs that are passed my way, normally using ASCII or text strings in the content property. This is the first time (as far as I can recall) that I’ve come across the use of what is essentially a predefined variable within the CSS language. The variable itself is pre-defined by the user-agent (you’ll notice that Firefox uses slightly different ‘open-quote’ and ‘close-quote’ symbols to Safari / Chrome.

Should you wish to override the browser default, you can do so either by changing the ‘content’ property of each individual ::before and ::after declaration, or you can use the ‘quotes’ property of the ‘parent’ (? I’m not sure that this is the correct term ?) element.

The quotes property

The specification for the quotes property goes into great detail on how this may be used to employ different symbols across different languages or different levels of nested quotes, but the basic use would be to declare the ‘open-quote’ value and the ‘close-quote’ value, separated by spaces, as the value of the ‘quotes’ property as follows:

q {
quotes: ‘“’ ‘”’;

Whichever values you define will be used in place of the User-Agent defined symbols throughout your document.

Taking it a little further

This technique does not only have to be applied to <q> elements. It appears that any element can take a ‘quotes’ property, which can subsequently be called in its own ::before or ::after pseudo-elements.

For example, consider the following, using CSS3 attribute selectors :

quotes: ‘As I have said on my weblog: “’ ‘”’;
[cite^=""]::before {
content: open-quote;

What we are doing here is prepending any element with the ‘cite’ attribute starting with ‘’ – i.e. anything that cites this blog as its source – with an ‘open-quote’ value of ‘As I have said on my weblog: “’.

By writing this CSS rule without an element selector, it automatically applies to any element with a matching ‘cite’ attribute – so will also include <blockquote> elements. If we only wanted to match q elements, then we likely wouldn’t need the ::before declaration, because this would already be defined in the user-agent style sheet. Do note that while the ‘cite’ attribute is only valid on a <q> or <blockquote> element, the CSS rules here would also apply to any other element matching the rule.

Taking it a little too far?

It occurs to me that being able to predefine these ::before and ::after content strings could be used outside of the context of quotes, and leant on for use in some elaborate CSS, enabling an element of DRY programming in CSS. The problem is that it feels just a little bit dirty to me to do so at this point. I intend to explore the ‘content’ property further before drawing any conclusions, as there are other possible values that it can take outside of ‘open-quote’, ‘close-quote’ and strings – including the intriguing ‘attr(X)’ – any of which could turn out to be extremely useful to this end.

Using variables in CSS

I’m working on a little PHP script to allow for variables and inheritance in CSS. I know there’s a ruby script that does this somewhere, but I fancy seeing if we can’t get a pure PHP version up & running between us. If you’re somebody that writes their own CSS and are willing to have a play with it to see what problems occur then I’d really appreciate it. If you want to tighten up my regular expressions a bit as well then it probably won’t go amiss, as I’ve only spent 5 minutes on them so far 😉

It’s fairly straightforward, and at the moment just runs some simple find & replace on a stylesheet, nothing too fancy, and it seems to hold it’s own on my dev server, but I’d be interested to see if it works in the hands of others. I don’t have much spare time but will be adding attribute inheritance next – which could be very cool.

you can grab the PHP here, and implement it by saving it as PCSS.php (or whatever you choose) and then linking to your stylesheet as follows:

css" media="screen" rel="stylesheet" />

In case that isn’t clear – instead of linking to your stylesheet within the tag, you link to my PHP file and then tag a ‘?’ and the filename of your stylesheet onto the end.

once running you can declare variables in your stylesheet ‘thusly’, ensuring each begins with a $ and ends with a  line-break:

$pie_blue = #443300
$pie_border = 1px solid #CCC
$pie_padding = 1em

.class {
color: $pie_blue;
border: $pie_border;

and so on…

Again, if anybody does pick this up and play with it, I really appreciate the time and help.

Finding the RSS Feeds of your Facebook Status Updates

Edit:As of recent changes (7/2/2010) to FB, this is no longer working for me. You might have better luck. Why don’t facebook just make this stuff available?

Edit: This method has worked for my account and several others, but fails for some people. If you are greeted with the message “This feed URL is no longer valid. Visit this page to find the new URL, if you have access,” or something similar then you are one of those unfortunate people. Currently looking into a solution for this problem… anyone found it?

I’m working on a ‘lifestream’ plugin for the next version of my website, and hit a little bit of a wall when trying to lay my grubby little paws on an RSS feed of my personal status updates on Facebook.

Although they don’t seem to publicise it on the site, there appear to be RSS feeds available by direct access of almost everything we post. It’s pretty obvious really. The only issue is finding the URL of the feeds.

For a personal page

The simplest way to do this that worked for me (although browsing around there appear to be some people experiencing difficulty) was as follows:

  1. Open up your notifications pop-up in the bottom right of your facebook window and choose ‘view all’
  2. Copy the link location of the ‘Subscribe to Notification > Via RSS’ option on the right of the page (something like – ‘’
  3. Change it from to and paste into any RSS reader
  4. Check you privacy settings – The feed will only display status updates that are marked as being viewable by ‘Everyone’. ‘Friends Only’ status updates will not appear in the Feed. You can set this in your privacy settings, but also on each individual update as you post it.

There are other feeds accessible in a similar manner to this, but for my purposes I’ll not confuse the issue.

For a fan page

MUCH simpler:

  1. Paste the RSS url (where ‘id=’  the ID of your facebook fan page – found in the address bar when you view your page) into any RSS reader
  2. If you’ve already set up your own vanity URL for your page, you can grab your page ID by logging in and clicking ‘Edit Page’. You’l find it tagged on to the url in the address bar.

And there you have it. From researching this, it appears Facebook have a habit of relocating the RSS Feeds without telling anyone – probably why they don’t publicise them too heavily – so you might find that these stop working in the future, but for now I’m all good to go in my project and hope I’ve helped you with yours.



Limiting the number of times a PHP loop will run using the break command

If you’re reading this page then you’re already likely familiar with the standard PHP for, while and foreach loops. If not, then may I suggest some background reading first –

That said, I added a new weapon to my PHP arsenal today in the form of a better understanding of the break command.

I’ve used the break command before of course – it sits inside switch statements to stop each case running into the next one as below:

switch ($i) {
case "apple":
echo "i is apple";
case "bar":
echo "i is bar";
case "cake":
echo "i is cake";

But I didn’t realise that it can be used within any loop to stop the cycle continuing there and then.

This came in handy today when needing to perform a particular loop 8 times only. Normally one would just use a for loop, as that is what they’re -um- ‘for’, but in this instance I wanted to iterate across an array 8 times only. In essence, I wanted a foreach loop to run 8 times and then stop, regardless of how many items it contained.

Usually I would have either used array_slice() to reduce the array to 8 elements only, or introduced a counter and an if statement to my foreach loop as follows:

$i = 0;
foreach($array as $value){
if($i < 8){
echo $value;

Whilst this would work, it’s not an ideal solution because the foreach statement needs to perform the logical test ‘if $i < 8' for every item in the array – of which there could potentially be thousands. Which is where break comes in. Changing my foreach loop to the following…

$i = 0;
foreach($array as $value){
if(++$i == 8) break; //edit suggested by CHris
echo $value;

means that as soon as the loop hits the ninth iteration (when $i is equal to 8) the break command is executed and the loop stops. No unnecessary iterations, and in my opinion much tidier code – which is always a good thing in my book!

Styling HTML elements in CSS without using classes / IDs

Something I came across for the first time recently is the practice of using HTML element attributes to apply CSS styles.

The mathematics can be found at, but a basic example of where I use this technique is as follows…

starting with a basic form…

Demo Form

To lay the form out cleanly we might apply a few simple CSS styles to the input elements, as follows…

input {
border:1px solid #CCC;
font: normal 12px/12px arial,sans-serif;

giving us the following…

Demo Form

All well and good, but the submit button is a little kooky because, being an input element, it picks up all the styling rules that we just applied. It’s easy to fix this by applying a few extra CSS styles to the submit button specifically – changing the background color, maybe a rollover effect, stuff like that – and I’ve generally done this by creating a new class specifically for the styling of form buttons .

While this works perfectly well, adding class=”button” to our HTML is completely unnecesary, because we can isolate all submit buttons via CSS attributes. The syntax follows the pattern…

css rules

…and could work in the following manner:

input[type=submit] {
border-color: #000;

giving us the following:

Demo Form

This can be used to isolate any HTML element you like – all forms with the method=”post” or all anchor tags with target=”_self” – anything really.

In fact now I type this out it occurs to me that the CSS selectors ‘.’ and ‘#’ (class and ID respectively) are just shorthand for the CSS attribute selectors element[class~=value] and element[id~=value] – more on the ‘~’ operator in another post.

The attribute selectors are a lot more powerful than demonstrated here, and I’ll write a bit about them soon but for the meantime you can read up for yourself at