Skip to content

Commit d5d1a51

Browse files
rauschmarauschma
committed
New: readme, numbering headings
1 parent 79cd7ed commit d5d1a51

4 files changed

+78
-52
lines changed

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Demos of HTML document features
2+
===============================
3+
4+
Try online:
5+
6+
- “[JavaScript-enhanced footnotes and references](http://rauschma.github.com/html_demos/footnotes.html)”
7+
- “[Numbering headings](http://rauschma.github.com/html_demos/numbering-headings.html)”

‎footnotes-readme.md

-14
This file was deleted.

‎footnotes.html

+19-38
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,31 @@
22
<html>
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5-
<title>HTML footnotes and references</title>
5+
<title>JavaScript-enhanced footnotes and references</title>
66
<link rel="stylesheet" href="footnotes.css" type="text/css">
77
<script src="footnotes.js"></script>
88
</head>
99
<body>
10-
<h1>HTML footnotes and references</h1>
10+
<h1>JavaScript-enhanced footnotes and references</h1>
11+
12+
<h2>About</h2>
13+
14+
Challenges:
15+
<ul>
16+
<li>On screen, show footnote content close to where the footnote is referenced.</li>
17+
<li>Support touch devices.</li>
18+
<li>In print, show footnotes as usual.</li>
19+
<li>Degrade gracefully if JavaScript is switched off.</li>
20+
</ul>
21+
More information:
22+
<ul>
23+
<li>Companion blog post: “<a href="http://www.2ality.com/2011/12/footnotes.html">Handling footnotes and references in HTML</a>”</li>
24+
<li>Project <a href="https://github.com/rauschma/html_demos">html_demos</a> on GitHub</li>
25+
</ul>
26+
27+
<h2>Demonstration</h2>
1128

1229
You can use an IIFE<a class="ptr">(1)</a> to avoid the global namespace<a class="ptr">(2)</a> being polluted. JavaScript has many functional language constructs <a class="ptr">[1]</a>. For example: consult <a class="ptr">[2]</a> for an introduction to closures.
13-
<p>
14-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
15-
<p>
16-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
17-
<p>
18-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
19-
<p>
20-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
21-
<p>
22-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
23-
<p>
24-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
25-
<p>
26-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
27-
<p>
28-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
29-
<p>
30-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
31-
<p>
32-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
33-
<p>
34-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
35-
<p>
36-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
37-
<p>
38-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
39-
<p>
40-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
41-
<p>
42-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
43-
<p>
44-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45-
<p>
46-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
47-
<p>
48-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4930

5031
<h2>Footnotes</h2>
5132

‎numbering-headings.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>Numbering headings</title>
6+
<style>
7+
/* Switch numbering on by adding class "countheads" to h1 */
8+
/* Prevent numbering for a single heading via class "nocount" */
9+
10+
body {
11+
counter-reset: h2counter;
12+
}
13+
h1 {
14+
counter-reset: h2counter;
15+
}
16+
17+
.countheads ~ h2:before {
18+
content: counter(h2counter) ".\0000a0\0000a0";
19+
counter-increment: h2counter;
20+
}
21+
h2.nocount:before {
22+
content: none;
23+
counter-increment: none;
24+
}
25+
h2 {
26+
counter-reset: h3counter;
27+
}
28+
29+
.countheads ~ h3:before {
30+
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
31+
counter-increment: h3counter;
32+
}
33+
h3.nocount:before {
34+
content: none;
35+
counter-increment: none;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<h1 class="countheads">Numbering headings</h1>
41+
42+
<h2>About</h2>
43+
<ul>
44+
<li>Companion blog post: “<a href="http://www.2ality.com/2012/01/numbering-headings.html">Automatically numbering headings via CSS</a>”</li>
45+
<li>Project <a href="https://github.com/rauschma/html_demos">html_demos</a> on GitHub</li>
46+
</ul>
47+
48+
<h2>Demonstration</h2>
49+
<h3>Subheading</h3>
50+
<h3>One more subheading</h3>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)