Basic demo page for Easy Footnotes

This is a demo page showing the basic functionality of the Easy Footnotes for Web Pages (Accessibility friendly) system.

Note that in the CSS there are media query sections for settings for printing, you can try printing in both basic and prettifried modes.

(Updated 31 Mar 2024)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper libero sapien, id facilisis turpis efficitur mattis. Etiam tempus sem elit, sed hendrerit diam eleifend in. Sed in lorem ut ex iaculis blandit. Nam condimentum vitae quam sed mattis. Pellentesque sodales dolor ut nisl elementum, nec convallis nibh fringilla. Nullam eu eros a velit cursus rhoncus. Praesent sit amet dapibus justo. Proin tincidunt tellus justo, vel commodo arcu tincidunt vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra elementum augue sit amet ullamcorper.

 

Suspendisse sollicitudin libero congue quam dignissim consequat. Vestibulum tempus non nisl ac venenatis. Praesent pellentesque blandit dui, nec vulputate nunc tempus non. (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 !) Integer ut justo ut mi mattis auctor. Vestibulum quis convallis elit, tincidunt ultricies massa. Proin placerat ornare urna mattis lacinia. Nullam sed metus molestie, sagittis felis vel, consequat mi.

 

Pellentesque mattis luctus turpis, eu rhoncus nibh rhoncus ac. Pellentesque ac sem sodales, elementum elit feugiat, vestibulum arcu. Donec blandit interdum magna, ut lacinia felis faucibus sit amet. Ut ac viverra magna. Donec vel ullamcorper ipsum. Etiam condimentum, elit pulvinar gravida pretium, ante nunc auctor justo, vel imperdiet augue libero porta sem. Donec et nibh felis. Maecenas varius nibh a massa rutrum, vitae venenatis est fermentum. Duis venenatis in quam eu finibus. Aliquam tristique scelerisque faucibus. Suspendisse diam turpis, porttitor eu diam ac, pharetra finibus libero. Donec orci felis, ornare efficitur fermentum dignissim, ornare vitae nisi. (Footnote: This footnote is referenced by the first of two immediately consecutive footnote reference numbers.)  (Footnote: This footnote is the second of two immediately consecutive footnote reference numbers.)

 

Nam quis urna sit amet nulla aliquet gravida ac sed orci. Etiam sagittis vitae nisl ac lacinia. Sed non nunc elementum, dapibus leo id, luctus elit. Sed et maximus felis. Aenean ultricies orci laoreet, fermentum elit eu, mollis ipsum. Vestibulum id lectus eget dui rhoncus fermentum et bibendum lacus. Sed sollicitudin lectus eros, eu tincidunt elit ullamcorper ac. Integer pharetra euismod magna, eget tempus odio suscipit eu. Curabitur rutrum metus urna, nec fringilla eros posuere ut. Nulla lobortis eros euismod iaculis rutrum. Aliquam egestas tincidunt libero, nec efficitur metus consequat eu. Donec euismod vel eros a dictum. Aenean ultrices risus ac aliquet varius.

 

Nam nibh orci, auctor quis pharetra sed, accumsan eu augue. In dictum augue eget leo maximus porttitor. Praesent sit amet fermentum enim. Maecenas lacus ante, elementum in ex in, egestas volutpat nulla. In hac habitasse platea dictumst. Nulla vel placerat massa. Suspendisse pretium urna a nisi efficitur, sit amet aliquam ante egestas. Morbi libero ex, interdum et leo ut, ultricies rhoncus quam. Nullam neque ligula, ultricies blandit neque in, pulvinar scelerisque nulla. Donec consequat felis justo, eget volutpat dolor viverra non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin fringilla lorem sapien, eget gravida leo dapibus at. Pellentesque sit amet imperdiet nisl, sed ornare tellus. Proin a enim id purus rhoncus fringilla. Cras interdum a nisi sit amet condimentum.

 

Etiam porttitor pulvinar turpis nec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pulvinar laoreet dolor vitae lobortis. (Footnote: As a single person I don’t have the resources such as big operators like Wikipedia might have.) Nulla est sapien, commodo at dictum in, pellentesque non neque. Mauris at lacinia est. Ut at massa a elit lacinia molestie sit amet quis nunc. Sed sollicitudin ipsum arcu, quis commodo nunc dignissim vitae. Aliquam auctor congue felis, a commodo ante iaculis ut. Sed mattis faucibus. (Footnote: Only plain JavaScript is used and does not require any additional library.) Nullam pharetra sem tortor, ac volutpat leo vestibulum quis. Sed egestas molestie lacus, laoreet hendrerit dolor maximus sed. Curabitur elementum nibh a nulla venenatis tristique. Aliquam quis turpis tempor mi ultrices faucibus. Mauris id blandit libero. Vivamus nec lectus et leo faucibus condimentum nec convallis nibh. (Footnote: The footnotes are not restricted to just plain text, for example hyper-links can be included, e.g. my home page.) Nulla consectetur sapien id justo blandit vulputate. Vivamus ut elit at est venenatis pretium eget sit amet arcu. Nulla ut finibus dolor, sit amet porttitor diam. Vestibulum eu purus sed nisi rhoncus rutrum. Duis nec dictum nibh. Maecenas facilisis sem quis enim tincidunt dictum. Mauris cursus sapien sit amet bibendum dapibus. Sed cursus dui sit amet nunc sollicitudin consequat. Donec sapien velit, convallis ac dui at, vehicula aliquam arcu. Morbi rutrum interdum tempor. Nam eu pretium neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

 

Notes

Note that this footnote system allows for multiple groups of footnotes for different sections of a webpage. This page is itself divided into two sections and uses two different footnote groups. Note that the footnote references and footnotes can be styled differently for different groups, as seen in the Side Box here.

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 the essential functionality.
  3. Appearance easily modified with CSS.
  4. Hyperlinks can be included in the footnotes.
  5. Tooltips can be included in the footnotes.
  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.

You can download copies of the demo files here:

 

 


Footnotes: