Footnote should contain a link back to the place in the text with number

I actually got a similar suggestion by email some time ago. The suggestion below contains your feature and as an additional bonus it uses only html that will pass the default drupal html filter.

I haven't had time to implement this yet, but let's put it up for discussion...

***

I have seen a note already regarding the filters order. If one puts footnote filter before html filter then in case of filtered html the <sup> tag will be filtered out. I deleted <sup> and modified the corresponding line in function _footnotes_replace_callback() as:

return '<a class="see_footnote" href="#footnote' . $n . '">' . $n . '</a>';

i.e. I removed the class definition from <sup> to <a>. As the class was not defined anywhere I defined it in my theme's style.css as:

.see_footnote {
  font-size: smaller;
  vertical-align: text-top;
}

This seems to work satisfactory for me. I also made a small enhancement to make it possible to jump back from the footnote to the place it was referenced. It makes reader's navigation much easier. For this I modified both the reference and the footnote section:

function _footnotes_replace_callback( $matches, $op = '' ) {
  static $n = 0;
  static $store_matches = array();
  $str = '';
 
  if( $op == 'output footer' ) {
    if( $n > 0 ) {
      $str = '<div class="footnotes">';
      for( $m = 1; $m <= $n; $m++ ){
                $str .= '<a class="footnote" name="footnote' . $m . '" href="#footnoteref' . $m . '">' . $m . '.</a>';
                $str .= '&nbsp;&nbsp;' . $store_matches[ $m - 1 ] . "\n\n";     }
      $str .= '</div>';
    }
    $n = 0;
    $store_matches = array();
    return $str;
  }

  //default op: act as called by preg_replace_callback()
  array_push( $store_matches, $matches[1] );
  $n++;
  return '<a class="see_footnote" name="footnoteref' . $n . '" href="#footnote' . $n . '">' . $n . '</a>'; 
}

If one click on the number left to the footnote text, the browser will jump back to the footnote reference location, thus the reader can continue reading the basic text.

I used only filtered html tags, so the html filter will not cause problems.

Sincerely,
Gabor

Here then, are my own comments to the above suggestion.

1) The only reason this wasn't done easily already is that I originally chose to use an ol list for the footnotes. The number of the footnote is the logical place for the back link, and since now the number is generated by the browser, we cannot put the link there.

2) There is no technical problem in doing the numbering from PHP code, as is proven by the above snippet.

3) I did not have time to do this yet, but at least it is up for discussion now.

4) People would have to change their CSS after this change, so it is ok to let it be deferred to some future more major release. (For instance, a release with support for Drupal 5.0)

Voicing my support for this feature to be integrated.
Take a look at how John Grubber (maker of Markdown) does it at http://daringfireball.net/#fnr1-2006-12-18
Notice the little 1, and then in the footnotes how you can jump back up to the original text using the little return carrage character at the end of the footnote.

Damn good idea I say.

Fixing that link above for #3 for example of use of carriage return

http://daringfireball.net/2007/01/os_x#fn1-2007-01-16

Here is how it would look

If you are citing a source 1.


______
1. web.com  ↩

Full props to Mr John Grubber

Hi all

Actually I personally like the idea of making the footnote number a link. Technically a carriage return is ok too and John Grubber's graphical design is pleasing, but I have a couple arguments from the usability and user experience department:

1. Why introduce an extra symbol in other people's text, as it is not absolutely needed?
2. A carriage return character? The arrow points downwards but the link will move you back up! Not an ideal usability solution imho.
3. The footnote number is a logical "anchor point" also because clicking the number in the main text takes you down, clicking the number in the footnote takes you back up. It creates a kind of "pair" that at least for me is easy to grasp.

The code to make the number into a link back to main text is already in this thread, now all that is needed is that someone makes it into a proper patch so that we can test and commit it.

PS: as already announced in another Footnotes issue (http://drupal.org/node/102464), I've become too burdened by my day job to properly maintain a module. Luckily for all of us beginner has promised to help me out by producing a Drupal 5 version of Footnotes. If someone else is interested in helping out with this module, contact me. If you have a track record of contributing to other Drupal modules, I'm willing to give out more CVS commit rights. If you don't have a track record yet, I propose you submit patches as attachments to issues here, just like beginner first did. Then somebody with CVS access will commit them once they have been reviewed here.

So in summary, it should be an easy task to take the code snippet already available in this thread, make it into a patch and submit as an attachment to this thread. This will gave you fame and fortune, and all of us clickable footnotes.

Hello,

As I told Hingo earlier, I have an important deadline to meet next week. Only after that deadline is met, will I be able to study the new cvs branching guidelines and release a proper Drupal 5 version.

If a user provides a proper patch, I shall always find some time to review it, and if it is ready, I'll be here to commit it to cvs. I will at the very least, keep an eye to the list of patches ready for review and reply to all issues on that list, either by committing the patch, or by saying what needs to be modified, etc.

So, even if you guys don't have cvs access, there is plenty you can do to help, and you will not be wasting your time: your patches will be looked at!

Thanks.

I have now implemented this feature and it is available in the 5.x-...-dev version within next 12 hours. Please test and report if something is wrong.

***

1) Use only html allowed by default in HTML filter.
2) Use dl instead of ol for the list of footnotes
3) Make the footnote number a link back to the place where footnote appears in text.
4) Update CSS accordingly