Improve Article Perception - with toc, navigation and footnotes

Introduction

When reading articles on Codeproject I often encounter the same issues over and over again:

1. If the article is very long, I miss a table of contents (toc). This would help deciding at a short glance if it's worth to read on.
2. Human perceptivity is capable to grasp about 15 words per text line only. If it is about 30 words, like many articles have on wide screens, the readability suffers.
3. Navigation elements like footnote and back to top links help to jump back and forth on difficult or lengthy articles.

Issue

The readability suffers a lot, which may encourage readers to downgrade the article only for layout issues or for not supporting their laziness sufficiently. Scrolling an article up and down, back and forth to understand the subject is an effort.

Solution

A solution every author could easily provide is to add some extra html and css code to the articles. I don't know if this is compliant to CodeProject rules but at least it is possible to do so.

Using the code

Switch your editor to html or source code view and copy and paste this snippet. Adjust it to your needs.

<!-- outer div, encapsulate article to keep max-width and to keep words per line low -->
<div style="margin: 5px; padding: 10px; text-align: justify; 
    display: block; max-width: 640px;">


  <!-- inner div to display toc at the right width round borders -->
  <div style="margin: 15px 1px 15px 20px; padding: 5px; border-radius: 5px; border: 1px solid currentcolor; float: right; display: block;">

     <h3>Table of Contents</h3>

     <p id="section-toc"><br /></p> <!-- anchor for back to top link  -->

     <ol>  <!-- toc elements have links to anchors  -->
       <li> <a href="#section-1"> Introduction </a></li>
       <li> <a href="#section-2"> Background </a></li>
       <li> <a href="#section-3"> Using the Code </a></li>
       <li> <a href="#section-4"> Section A </a></li>
       <li> <a href="#section-5"> Section B </a></li>
       <li> <a href="#section-6"> Appendix </a></li>
       <li> <a href="#section-7"> Output </a></li>
       <li> <a href="#section-8"> Footnotes </a></li>
       <li> <a href="#section-9"> History </a></li>
    </ol>
  </div> <!-- end of toc div  -->



  <h2>1 Introduction</h2> 
  <p id="section-1"> <!-- anchors are incorporated in p tags  -->
    Your article intro which can have footnotes  <a href="#footnote-1">[1]</a>.  
    And some other lengthy text which is displayed properly now.
 
  </p>



  <h2> 2 Background </h2> 
  <p id="section-2">
   Your article background, and so on ...
 
  </p>


  <h2>8 Footnotes</h2>

  <p id="section-8">&nbsp;</p>

  <p id="footnote-1">[1] This is a footnote or book reference. </p>


</div > <!-- end outer div tag at the very end of your article text -->

Points of Interest

While writing this tip the old article editor worked better in formatting the code sections well. The new editor got confused several times. So when experience formatting issues too, try the old editor.

Result

The result of the code snippet above can be seen here. The background color is actually transparent but put in yellow here for a better display.