This page is keyboard accessible:
• Use Tab, Shift + Tab keys to traverse the main menu. To enter a sub-menu use the Right Arrow key. To leave a sub-menu use the Left Arrow or the Escape key.
• The Enter or the Space key opens the active menu item.
• To skip the menu and move to the main content, press Tab after the page loads to reveal a skip button.
• To get back to the top of the page anytime, press the Home key.
• For more information, click here: Accessibility   Close this tip.

Note: Full functionality of this web page requires JavaScript to be enabled in your browser.
 

Easy Footnotes for Web Pages (Accessibility friendly)

How to make footnotes for web pages that are very simple to insert and really easy to maintain. If you need to edit, add or delete a footnote, or move the position of its reference in the text, it is easy with this system.

 

Maybe you would like to include footnotes in your web-pages, but find that the hassle involved in ensuring that the numbering is always correct is more bother than it is worth. If so, then this page is for you - now you can easily add footnotes to your web-pages without having to worry about the numbering at all.

 

The problem with footnotes in general arises from the fact that they are numbered sequentially. This means that if you make a change such as adding or deleting a footnote you have to re-number all subsequent footnote references and the footnotes also.

 

And, furthermore, in a web-page, if you have clickable links from the footnote reference numbers (Footnote: Like this! This is simply a long footnote which has been put here to demonstrate this footnote system. Please understand that many of the footnotes have been inserted on this page principally for demonstration purposes! ) in the text to the actual footnote, you then have three numbers in the reference (a numbered id for returning to the reference from the footnote, a link href to the numbered id of the footnote and the number that is visible to the reader), and similarly there are also three such numbers for the footnote itself. Traditionally, all these numbers are written in manually as part of the HTML of the web-page. This means that adding, deleting, or moving a footnote can involve numerous changes to subsequent references and footnotes, and besides that being a major pain, mistakes can easily be made.

 

I searched on the web for a ready-made solution but didn't find anything suitable. I found details of how to do footnotes by the laborious method described above, such as Footnotes, endnotes, and sidenotes on Web pages, Web Experience Toolkit, Accessible Footnotes with CSS, How to Create Footnotes in HTML, Creating footnotes - HTML anchors, Handling footnotes and references in HTML and JavaScript enhanced footnotes and references. Some of them gave me ideas, but none gave me what I wanted.

 

For this reason I decided to implement a very simple method (Footnote: I am a single person and don't have the resources such as big operators like Wikipedia might have. ) whereby each footnote is simply written into the HTML code at the place where you want the reference number to appear. The footnote is enclosed by a span with a class name that identifies that span as a footnote. JavaScript then does all the tedious work for you. (Footnote: The JavaScript now does not utilize jQuery, although a polyfill is required for IE9, see below. ) When the page loads, JavaScript goes through all the footnote spans, inserts a reference to each footnote, then hides the footnote span, and inserts the text (Footnote: The footnotes are not restricted to just plain text, for example hyper-links can be included, e.g., my home page. ) of the footnote in a div that has an id that identifies it as the correct div for the footnotes. The script enables the footnotes to appear as tooltips when a footnote reference number is clicked, as well as appearing in the desired location such as the foot of the page. The footnotes and their references are all automatically assigned the correct consecutive numbers. Hence there is no need to assign any number at all to the footnotes when writing the web-page. Readers who are familiar with Latex will recognize this as the same method that Latex uses for footnotes.

 

Note that this footnote system allows for multiple groups of footnotes for different sections of a web-page; this is detailed below. This page is itself divided into two sections and uses three different footnote groups. Note that the footnote references and footnotes can be styled differently for different groups, as seen in the Side Box here. Of course, for demonstration purposes, there is an overuse of footnotes on this page - such overuse should be avoided.

 

Summary of advantages of the Easy Footnote system

  1. Easy to insert, add, move or delete footnotes, or the references thereto.
  2. Very little JavaScript and CSS required for essential functionality, no jQuery required.
  3. Appearance easily modified with CSS.
  4. Hyperlinks can be included in the footnotes. (Footnote: For example, this footnote includes a hyper-link to My Home Page. )
  5. Tooltips can be included in the footnotes. (Footnote: For example, this footnote includes a tooltip for function. )
  6. Multiple groups of footnotes can be used. (Footnote: In this setup, the footnotes are all numbered consecutively. If it is desired that each group of footnotes starts at "1" then the JavaScript code could be modified for this purpose. My thoughts are that different footnotes with the same number, albeit in different sections, could be confusing. )
  7. The footnotes and the references are accessible and give the correct content and semantics to a screen reader.
  8. Even if JavaScript and/or CSS is disabled, the correct footnote content is nevertheless present and is semantically correct (but see note below re IE8 and lower).

The system has been tested and found to work in modern browsers, IE9 and above. A quirk of some non-current browsers is that when the footnote tooltip is closed (by clicking on the x), the browser creates a line break after the footnote reference. This does not affect the readability of the material.

 

No attempt has been made to make the system work in the obsolete IE8 and below. However, if you require that the footnotes must appear on the page in IE8, then see the notes below regarding the JavaScript code.

 

 

Footnotes:

 

 

Details of the Code

Very little code is required to provide the essential functionality of the system, as described below. Note that double-clicking inside a code box will select the code for copying.

 

The HTML code

The HTML code for the footnotes consists of a tiny bit of code that wraps the footnote content. It is identical for all footnotes which means that it can be saved as a code snippet for repeated use:

Note that generally you will not want a space between the character immediately before the footnote reference - for this, there should be no space between the footnote reference number and the <span class="footnote"> that is the start of the footnote span. Note that since the footnote content is within a span element, only inline elements should be used within the footnote content (in HTML5 such elements are now referred to as phrasing content elements).

 

And for location of the actual footnotes, the HTML code for the div is a single line which can be saved as a code snippet:

 

Note that there can be several different footnote groups in different locations on the web-page. To enable this, simply add a unique suffix to the class name "footnote" of each relevant footnote span and add the same suffix to the id "Footnotes" of the Footnotes div where the footnotes are to be located.

 

For example, on this page, I used the basic class "footnote" for the footnote span and the basic id "Footnotes" of the Footnotes div for the first group of footnotes, and I used the class "footnoteCode" of the footnote span and the id "FootnotesCode" of the Footnotes div for the bottom group of footnotes, and I used the class "footnoteSide" of the footnote span and the id "FootnotesSide" of the Footnotes div for the Side Box group of footnotes. Note that this means that in the code snippets shown above the suffixes will need to be added manually. (Footnote: Alternatively, if the same method is being used often, additional code snippets could be made. )

 

The CSS code

Very little CSS is required for the basic functionality:

And for basic functionality for printing the following is required:

 

Notes:

  1. The footnote “display:block” property is used to ensure that the footnotes appear in an acceptable format in the text if JavaScript is not enabled.
  2. The purpose of the "invis" class is to hide the text visually, but it will be read by a screen reader; this means that the content and the semantics will be correct for a screen reader. Elements with the "hide" class will not be visible, nor seen by a screen reader.
  3. The purpose of the "hasJS" spans is to prevent the footnotes showing briefly and causing a flicker if JavaScript is enabled; see the notes on the JavaScript code.

 

The JavaScript Code

The JavaScript code consists of a function which sets up the footnotes and the footnote references once the DOM is loaded, and a function which is called by the user and which either shows the footnotes as tooltips or hides the tooltip. Note that the resultant entire footnote reference number together with its two square end brackets is a clickable link, which makes it easier to select than the number on its own.

 

The script is standalone. However, while most current browsers work with the JavaScript as is, on some browsers such as IE9, there is not inherent support for the classList method, so a polyfill for the classList method is required, to be inserted before the Easy Footnotes script. You can find one at classList polyfill.

 

If JavaScript is not enabled, there will be no footnotes at the foot of the page. However, they will appear within the text, marked as being footnotes, so the content and the meaning is still present. Each footnote will appear in the text, but separated from the main text by line breaks, viz:

 

… blah blah blah blah blah blah blah blah … preceding text here
(Footnote: FOOTNOTE CONTENT HERE)
the following text here … blah blah blah blah blah blah …

 

However, if JavaScript is enabled, unless steps are taken to prevent it, the page loads the footnotes as visible within the text, and after that the JavaScript hides the footnotes that are within the text, which means that on slow systems, the page may flicker briefly with the footnotes visible within the text before the JavaScript hides them. To prevent this I use a line of JavaScript which must be within the head and which adds the class "hasJS" to the <html> tag:

<script>document.documentElement.className = 'hasJS';</script>

The CSS defines that the tags with the appropriate classes (Footnote: Classes beginning with "footnote", and the class "tipContent". ) will not display provided the <html> tag has the class "hasJS", hence these tags will not display as the page loads.

 

In IE8, however, this will cause the footnotes not to appear at all, since IE8 will not process the JavaScript correctly. If it is required that the footnotes must show in IE8 and below, (Footnote: In this case the footnotes will only appear within the text. ) then you need to add an extra line which negates the previous line:

<script>document.documentElement.className = 'hasJS';</script>
<!--[if lt IE 9]><script>document.documentElement.className = '';</script><![endif]-->

 

If you have any comments, suggestions, or questions about the Easy Footnotes system, please feel free to contact me.

 

Finally, I must thank Alex Gorbatchev for his SyntaxHighlighter system for displaying HTML, CSS, and JS code.

 

Note: Since writing the above my attention has been drawn to a web-page Footnotes with JavaScript & CSS written as long ago as 2006 that uses essentially the same method as my own, although it does not use the more advanced capabilities of modern browsers. It does not implement the footnotes as in-line pop-ups, and it requires an extra script line at the end of the page for each section that requires separate footnotes. That author considers that the footnote references should be accessible via the keyboard. I considered this and rejected it, as that means that the footnote references have to be ploughed thorough to get to the other links on the page, which are the links of principal interest to the reader - the footnotes are of peripheral interest and are viewable anyway.

 

 

Footnotes:

 

 

Diverse opinions and criticisms are welcome, but messages that are frivolous, irrelevant or devoid of logical basis will be blocked (comments will be checked before appearing on this site). Difficulties in understanding the site content are usually best addressed by contacting me by e-mail. Note: you will be asked to provide an e-mail address - this will only be used to notify you of replies to your comments - it will never be used for any other purpose, will never be displayed and does not require verification. Comments are common to the entire website, so please indicate what section of the site you are commenting on.

 

If you cannot see any comments below, it may be that a plug-in on your browser is blocking Disqus comments from loading. Avast anti-virus in particular is known to do this, especially with Internet Explorer and Safari. See Disqus Browser plug-in/extension conflicts or Why isn’t the comment box loading?.

 

 

Please wait for comments to load …  

 

The Lighter Side

 

NEWS

Peter Smith’s ‘Proof’

It has come to my notice that, when asked about the demonstration of the flaw in his proof (see A Fundamental Flaw in an Incompleteness Proof by Peter Smith PDF), Smith refuses to engage in any logical discussion, and instead attempts to deflect attention away from any such discussion. If any other reader has tried to engage with Smith regarding my demonstration of the flaw, I would be interested to know what the outcome was.

 

 

There’s something about Gödel by Francesco Berto

There is a new addition to the page Yet another flawed incompleteness proof, where Berto’s proof of incompleteness in his book There’s something about Gödel comes under scrutiny.

 

 

Easy Footnotes

I found that making, adding or deleting footnotes in the traditional manner proved to be a major pain. So I developed a different system for footnotes which makes inserting or changing footnotes a doddle. You can check it out at Easy Footnotes for Web Pages (Accessibility friendly).

 

 

O’Connor’s “computer checked” proof

I have now added a new section to my paper on Russell O’Connor’s claim of a computer verified incompleteness proof. This shows that the flaw in the proof arises from a reliance on definitions that include unacceptable assumptions - assumptions that are not actually checked by the computer code. See also the new page Representability.

 

 

New page on Chaitin’s Constant

There is now a new page on Chaitin’s Constant (Chaitin’s Omega), which demonstrates that Chaitin has failed to prove that it is actually algorithmically irreducible.

 

Previous Blog Posts  

 

13 May 2015 Good Math, Bad Math?

 

16th Mar 2015 Bishops Dancing with Pixies?

 

23rd Feb 2015 Artificial Intelligence

 

31 Mar 2015 Cranks and Crackpots

 

30 Apr 2015 The Chinese Room

 

Links  

 

For convenience, there are now two pages on this site with links to various material relating to Gödel and the Incompleteness Theorem

 

– a page with general links:

Gödel Links

 

– and a page relating specifically to the Gödel mind-machine debate:

Gödel, Minds, and Machines

 

Printer Friendly

 

All pages on this website are printer friendly, and will print the main content in a convenient format. Note that the margins are set by your browser print settings.


Note: for some browsers JavaScript must be enabled for this to operate correctly.

 

Comments

 

Comments on this site are welcome, please see the comment section.

 

Please note that this web site, like any other is a collection of various statements. Not all of this web site is intended to be factual. Some of it is personal opinion or interpretation.

 

If you prefer to ask me directly about the material on this site, please send me an e-mail with your query, and I will attempt to reply promptly.

 

Feedback about site design would also be appreciated so that I can improve the site.

 


Copyright © James R Meyer 2012 - 2017  
www.jamesrmeyer.com