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 viaJavaScript
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 id
ied 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 div
s 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 id
s given to paragraphs by the author. I.e. the author can
still id
paragraphs and use these id
s.
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 id
s 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
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
[…] Willison’s Javascript PurpleNumbers generator, plinks. Steffen developed this nice bit of Javascript (install geared only for use in WordPress) with s […]
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…
[…] I’ve already described this there – heck, I like Purple Numbers. […]
[…] 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. […]
[…] Purple Numbers (for WordPress) […]
Post a Comment