Click here to Skip to main content
13,005,192 members (60,161 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 7 Aug 2014

Improve Article Perception - with toc, navigation and footnotes

, 7 Aug 2014
Rate this:
Please Sign up or sign in to vote.
Format CodeProject articles: table of contents and less words per line

Editorial Note

Having trouble writing or posting articles? These articles aim to gather together tips and tricks from authors and mentors to help you write great articles.


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.


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.


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>
  </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.

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

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


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.

1 Introduction

Your article intro which can have footnotes [1]. And some other lengthy text which is displayed properly now.

2 Background

Your article background, and so on ...

8 Footnotes


[1] This is a footnote or book reference.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Germany Germany
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170627.1 | Last Updated 7 Aug 2014
Article Copyright 2014 by Chris875
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid