Skip to content

Purple Numbers (for WordPress)

A week ago I wrote (in German) about Violette Zahlen or Purple Numbers which make it possible to address webpages more finely than with the usual way of adding anchors (by the author of the page).

Why is this so?

Purple Numbers are added automatically to the document whereas the usual anchors have to be added by the author thereby limiting (and censoring) the ways in which his document can be addressed.

How?

As I’ve noted in my other post there are different ways to add Purple Numbers to a document:

  • server-side: adding the necessary markup via a script (e.g. with php) on the server and sending the resulting markup to the client.
    This approach is taken by the PurpleNumbers-Plugin for WordPress (which is the blogging-engine used by the blog you are currently reading).
  • client-side: the Purple Numbers and the necessary markup are added at the client.
    This might be done via as Simon Willson’s approach described in plinks – a purple numbers variant does.

Findings…

The first approach, which is taken by the PurpleNumbers-Plugin, produces quite a lot of additional markup that has to be delivered over the network to the client. After I’ve installed that plugin and looked at the resulting source I came to the conclusion that this could not be it since I hate cluttered markup.

The JavaScript of Mr. Willson will only work with paragraphs (which per se is fine) that are idied by the author of the document (which is not what I wanted).

So I opted for the client-side solution, extending Mr. Willson’s script a bit. Since the only dynamically generated part of gungfu.de is this blog, I adopted the script to work with .

The script

function addpLinks() {
  if(!document.getElementsByTagName || !document.getElementById ||  document.getElementsByTagName('h3').length>1) return;
  //don't display purple numbers on the index-page
  //display purple numbers only on pages with single entries...

  var divs = document.getElementsByTagName('div');
  var cont = null;
  for(var i = 0; i< divs.length; i++){
    if(divs[i].className=='storycontent'){
      cont=divs[i];
      break
    }
  }

  if(cont) markup(cont, 'p');

  var com = document.getElementById('commentlist');
  if(com) markup(com, 'c');
}

This is the main function. First, there is some object detection to verify that the functions getElementsByTagName and getElementById are supported by the current browser.

Then the script tries to determine whether it is run from index.php or a page with just one entry. It’s sensible to use that script only on single entries and these pages will have just one h3 (change this to fit the structure of your page and let me know – please – if there is a more intelligent and efficient way of doing this – one could e.g. count the divs with class ’storycontent‘.).

Then the script searches for the div that has the class of ’storycontent‘ and stores it. The children of that div will then be marked up by the markup-function.

The ‚commentlist‘-section of the page will be marked up separately. So the comments can be addressed finely, too.

In order to differentiate between PurpleNumbers of the post itself and the ones from comments I introduced a signum which simply gets included in the genereated anchor. Separating post-anchors and comment-anchors makes it possible to append text to the post without affecting (and thereby falsifying) PurpleNumbers of comments.

Here now the auxiliary markup-function:

function markup(parent, signum){
  var nid = 0;
  var paras = parent.getElementsByTagName('p');

  for (var i = 0; i < paras.length; i++) {
    var current = paras[i];
    if(current.getAttribute('class')=='comMeta') continue;
    //do not ID meta-information of comments. The coAuthor is additional markup not included in standard installation

    if (current.getAttribute('id')=='' || current.getAttribute('id')==null){
      //node does not have id-attr.  / ==null for mozilla/firefox

      current.id="nid-"+signum+nid++;
    }

    // make that paragraph purple
    var plink = document.createElement('a');
    plink.href = document.location.href.split('#')[0] + '#' + current.id;
    plink.className = 'plink';
    plink.appendChild(document.createTextNode('¶'));
    current.appendChild(plink);
  }
}

The script purples only paragraphs but it can be adopted.

The markup-function is a bit WordPress-specific: It does not purple paragraphs with a class of ‚comMeta‘ – which I introduced (change wp-comemnts.php accordingly). The script works even if you do not make that customization.

Note also that the script does not change ids given to paragraphs by the author. I.e. the author can still id paragraphs and use these ids.

The rest of the script is quite like the one from Mr. Willson. It mainly adds a new a-element.

The CSS

Adding some bit of styling and – color. 😉

a.plink {
  font-family: Verdana, sans-serif;
  font-style: normal;
  font-weight: bolder;
  font-size:13px;
  margin:0;padding:0;
  text-decoration: none;
  color:#fff;
  margin-left:.5em;
  display:none!important;
  display:inline;}
a.plink:hover, p:hover a.plink{
  color: #C8A8FF;
  display:inline!important;}

Oh, I forgot: Purple Numbers does not actually display numbers but a ‚‚ – the pilcrow. 😉

The CSS makes the pilcrow look good and then invisible. The last two lines of the first rule hide the pilcrow in real browsers and make it ‚inline‘ in IE (with white on white background).
The second rule makes the pilcrow visible.

Well, ok, that CSS could be a little more condensed but I like it that way.

Download

You can download the JavaScript instead of copy&pasting it from above.
Remove the ‚.txt‘ from the filename and place it somewhere in your WordPress-directory.
Include it by adding <script src="/plinks.js" type="text/javascript"></script> in your index.php and make it listen to the onload-event by adding something like <body onLoad="addpLinks"> or using something cooler like Executing JavaScript on page load.
Don’t forget to add the CSS to your styles-file!

Conclusion

This solution saves bandwidth and adds Purple Numbers to paragraphs in posts and comments automatically. It does not overwrite ids given to paragraphs by the author, though.

Attention

Using Purple Numbers one should not add paragraphs to an entry that already got published. This would spoil the whole idea of making it possible to link to individual paragraphs – the numbers that get generated automatically and are being used inside the anchors would get jumbled.
So it will become necessary to change published entries only by adding to the end of them (if it is for whole paragraphs).
I’d also suggest to use the ins-element for marking small additions or whole paragraphs that got added. There is an entry on DenkZEIT about this, too.

{ 1 } Comments

  1. admin | 2007/3/10 at 11:21 | Permalink

    Thanks for pointing out that the link to the source stopped working – if only I were notified earlier…

    I fixed it. The source is now available via this link, again.

{ 5 } Trackbacks

  1. […] Willison’s Javascript PurpleNumbers generator, plinks. Steffen developed this nice bit of Javascript (install geared only for use in WordPress) with s […]

  2. Open Artifact | 2004/9/4 at 03:40 | Permalink

    Another PurpleNumbers in JS
    Steffen has extended Simon Willison’s Javascript PurpleNumbers generator, plinks. Steffen developed this nice bit of Javascript (install geared only for use in WordPress) with some of the same reasoning Simon did; he didn’t want to actually see th…

  3. […] I’ve already described this there – heck, I like Purple Numbers. […]

  4. […] Eugene mentioned that there was an old plugin but it only worked on WordPress 1.x. The other problem is that the plugin seems to have gone missing. I looked around a little bit and found some interesting discussions about purple numbers with blogs. For example, Chris Dent mentioned a Big Day for Purple Numbers (back in May 2004). Tim Bray was using his own modified version of Simon Willson’s JavaScript-based implementation. I played around with that for a while but had some trouble getting the “id” values generated properly for each paragraph. […]

  5. […] Purple Numbers (for WordPress) […]

Post a Comment

Your email is never published nor shared. Required fields are marked *