DenkZEIT

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 JavaScript 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 WordPress.

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.