-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
66 lines (51 loc) · 10.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Improved Print</title>
<style>
body {
padding: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: sans-serif;
font-size: 1.125em;
}
</style>
</head>
<body>
<improved-print>
<h1><a href="https://pimdewit.github.io/improved-print/index.html">Improved Print</a></h1>
<p>A component that turns hyperlinks into listed footnotes!</p>
<p>Hit print to try it out!</p>
<p>Or check out the <a href="https://github.com/pimdewit/improved-print/blob/master/improved-print.js">source of this demo</a>.</p>
<p><strong>Improved Print</strong> is a <code>leaf</code> custom-element.</p>
<p>It's sole purpose is to encapsulate HTML, strip out the links within the content, and make a nice list of footnotes when attempting to print.</p>
<p>This web component is based on an A List Apart article from 2005(!), written by <a href="https://twitter.com/AaronGustafson">@AaronGustafson</a>.</p>
<p>Visit the <a href="https://alistapart.com/article/improvingprint">original article</a></p>
</improved-print>
<hr>
<improved-print>
<article>
<h2>A snippet from <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Hyperlink" target="_blank">Wikipedia</a></h2>
<p>The term "hyperlink" was coined in 1965 (or possibly 1964) by <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Ted_Nelson" title="Ted Nelson">Ted Nelson</a> at the start of <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Project_Xanadu" title="Project Xanadu">Project Xanadu</a>. Nelson had been inspired by "<a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/As_We_May_Think" title="As We May Think">As We May Think</a>", a popular 1945 essay by <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Vannevar_Bush" title="Vannevar Bush">Vannevar Bush</a>. In the essay, Bush described a microfilm-based machine (the <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Memex" title="Memex">Memex</a>) in which one could link any two pages of information into a "trail" of related information, and then scroll back and forth among pages in a trail as if they were on a single microfilm reel.</p>
<p>In a series of books and articles published from 1964 through 1980, Nelson transposed Bush's concept of automated cross-referencing into the computer context, made it applicable to specific text strings rather than whole pages, generalized it from a local desk-sized machine to a theoretical proprietary worldwide computer network, and advocated the creation of such a network. Though Nelson's Xanadu Corporation was eventually funded by <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Autodesk" title="Autodesk">Autodesk</a> in the 1980s, it never created this proprietary public-access network. Meanwhile, working independently, a team led by <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Douglas_Engelbart" title="Douglas Engelbart">Douglas Engelbart</a> (with <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Jeff_Rulifson" title="Jeff Rulifson">Jeff Rulifson</a> as chief <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Programmer" title="Programmer">programmer</a>) was the first to implement the hyperlink concept for scrolling within a single document (1966), and soon after for connecting between paragraphs within separate documents (1968), with <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/NLS_(computer_system)" title="NLS (computer system)">NLS</a>. <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Ben_Shneiderman" title="Ben Shneiderman">Ben Shneiderman</a> working with graduate student Dan Ostroff designed and implemented the highlighted link in the <a rel="noopener noreferrer nofollow" rel="nofollow" class="external text" href="http://www.cs.umd.edu/hcil/hyperties/">HyperTIES system</a> in 1983. HyperTIES was used to produce the world's first electronic journal, the July 1988 Communications of ACM, which was cited as the source for the link concept in <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a>'s Spring 1989 manifesto for the Web. In 1988, <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Ben_Shneiderman" title="Ben Shneiderman">Ben Shneiderman</a> and Greg Kearsley used HyperTIES to publish "Hypertext Hands-On!", the world's first electronic book.</p>
</article>
</improved-print>
<improved-print>
<article>
<h2><a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Pallas%27s_leaf_warbler" target="_blank">Pallas's leaf warbler</a></h2>
<p>The <b>Pallas's leaf warbler</b> or <b>Pallas's warbler</b> (<i>Phylloscopus proregulus</i>) is a bird that breeds in mountain forests from southern <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Siberia" title="Siberia">Siberia</a> east to northern Mongolia and northeastern China. It is named for German <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Zoology" title="Zoology">zoologist</a> <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Peter_Simon_Pallas" title="Peter Simon Pallas">Peter Simon Pallas</a>, who first formally described it. This <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Leaf_warbler" title="Leaf warbler">leaf warbler</a> is strongly <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Bird_migration" title="Bird migration">migratory</a>, wintering mainly in southern China and adjacent areas of southeast Asia, although in recent decades increasing numbers have been found in Europe in autumn.</p>
<p>Pallas's leaf warbler is one of the smallest Eurasian warblers, with a relatively large head and short tail. It has greenish upperparts and white underparts, a lemon-yellow rump, and yellow double wingbars, <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Supercilium" title="Supercilium">supercilia</a> and central crown stripe. It is similar in appearance to several other Asian warblers, including some that were formerly considered to be its <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Subspecies" title="Subspecies">subspecies</a>, although its distinctive vocalisations aid identification.</p>
<p>The female builds a cup nest in a tree or bush, and incubates the four to six eggs, which hatch after 12–13 days. The chicks are fed mainly by the female and <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Fledge" title="Fledge">fledge</a> when they are 12–14 days old; both parents then bring food for about a week. Pallas's leaf warbler is <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Insectivore" title="Insectivore">insectivorous</a>, feeding on the adults, <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Larva" title="Larva">larvae</a> and <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Pupa" title="Pupa">pupa</a> of small <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Insect" title="Insect">insects</a> and <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Spider" title="Spider">spiders</a>. Birds forage in bushes and trees, picking items from leaves or catching prey in short flights or while hovering. The Pallas's leaf warbler has a large range, and its numbers are believed to be stable. It therefore is evaluated as of "<a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Least-concern_species" title="Least-concern species">least concern</a>" by the <a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/International_Union_for_Conservation_of_Nature" title="International Union for Conservation of Nature">International Union for Conservation of Nature</a> (IUCN).</p>
</article>
</improved-print>
<article>
<h2><a rel="noopener noreferrer nofollow" href="https://en.wikipedia.org/wiki/Intertextuality" target="_blank">Intertextuality</a> (this section should not have footnotes)</h2>
<p><b>Intertextuality</b> is the shaping of a text's meaning by another text. It is the interconnection between similar or related works of literature that reflect and influence an audience's interpretation of the text. Intertextual figures include: <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Allusion" title="Allusion">allusion</a>, <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Quotation" title="Quotation">quotation</a>, <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Calque" title="Calque">calque</a>, <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Plagiarism" title="Plagiarism">plagiarism</a>, <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Translation" title="Translation">translation</a>, <i><a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Pastiche" title="Pastiche">pastiche</a></i> and <a rel="noopener noreferrer nofollow" target="_blank" href="/wiki/Parody" title="Parody">parody</a>.<sup id="cite_ref-Genette97_1-0" class="reference"><a rel="noopener noreferrer nofollow" target="_blank" href="#cite_note-Genette97-1">[1]</a></sup><sup id="cite_ref-Hallo2010_2-0" class="reference"><a rel="noopener noreferrer nofollow" target="_blank" href="#cite_note-Hallo2010-2">[2]</a></sup><sup id="cite_ref-Cancogni1985_3-0" class="reference"><a rel="noopener noreferrer nofollow" target="_blank" href="#cite_note-Cancogni1985-3">[3]</a></sup> Intertextuality is a literary device that creates an 'interrelationship between texts' and generates related understanding in separate works.<sup id="cite_ref-4" class="reference"><a rel="noopener noreferrer nofollow" target="_blank" href="#cite_note-4">[4]</a></sup> These references are made to influence the reader and add layers of depth to a text, based on the readers' prior knowledge and understanding. Intertextuality is a literary discourse strategy utilised by writers in novels, poetry, theatre and even in non-written texts (such as performances and digital media).<sup id="cite_ref-5" class="reference"><a rel="noopener noreferrer nofollow" target="_blank" href="#cite_note-5">[5]</a></sup> Examples of intertextuality are an author's borrowing and transformation of a prior text, and a reader's referencing of one text in reading another.</p>
</article>
<script src="./improved-print.min.js"></script>
</body>
</html>