-
Notifications
You must be signed in to change notification settings - Fork 0
/
single-paragraph-reading.html
152 lines (149 loc) · 7.39 KB
/
single-paragraph-reading.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reading One Paragraph — A Place for Asides</title>
<meta name="description" content="Title: Reading One Paragraph; Date: 2022-04-07; Author: Peter Mortimer">
<meta name="author" content="Peter">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="./theme/html5.js"></script>
<![endif]-->
<link href="./theme/css/ipython.css" rel="stylesheet">
<link href="./theme/css/jquery.tocify.css" rel="stylesheet">
<link href="./theme/css/lightbox.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!--
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/minty/bootstrap.min.css" rel="stylesheet">
-->
<link href="./theme/css/local.css" rel="stylesheet">
<link href="./theme/css/pygments.css" rel="stylesheet">
</head>
<body>
<div class="container main">
<div class="page-header">
<div class="row">
<div class="col-8 col-sm-8">
<h1><a href="./">A Place for Asides</a>
<br> </div>
<div class="col-4 col-sm-4 page-header-links">
<p><a href="/pages/about.html">About</a> | <a href="/pages/publications.html">Publications</a> | <a href="/pages/previous-projects.html">Previous Projects</a> | <a href="/">Blog</a> | <a href="/pages/books.html">Book List</a> </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="article" itemscope itemtype="http://schema.org/BlogPosting">
<div class="text-center article-header">
<h1 itemprop="name headline" class="article-title">Reading One Paragraph</h1>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<h4 itemprop="name">Peter Mortimer</h4>
</span>
<time datetime="2022-04-07T23:00:00+02:00" itemprop="datePublished">April 07 2022</time>
</div>
<div itemprop="articleBody" class="article-body"><p>Inspired by <a href="https://www.newyorker.com/books/page-turner/reading-on-the-clock">this New Yorker</a> and from books like <a href="https://www.goodreads.com/book/show/11529008-why-red-doesn-t-sound-like-a-bell">Why Red Doesn't Sound Like a Bell</a>, I wanted to see if it is possible to create an endless seeming paragraph on a website without the reader really noticing the manipulations done on the text.</p>
<p>Let me know what you think of the demo below: testtest</p>
<p class="paragraph"><span class="word1">Fixation</span> <span class="word2">or</span> <span class="word3">visual</span> <span class="word4">fixation</span> <span class="word5">is</span> <span class="word6">the</span> <span class="word7">maintaining</span> <span class="word8">of</span> <span class="word9">the</span> <span class="word10">gaze</span> <span class="word11">on</span> <span class="word12">a</span> <span class="word13">single</span> <span class="word14">location</span>. <span class="word15">An</span> <span class="word16">animal</span> <span class="word17">can</span> <span class="word18">exhibit</span> <span class="word19">visual</span> <span class="word20">fixation</span> <span class="word21">if</span> <span class="word22">it</span> <span class="word23">possess</span> <span class="word24">a</span> <span class="word25">fovea</span> <span class="word26">in</span> <span class="word27">the</span> <span class="word28">anatomy</span> <span class="word29">of</span> <span class="word30">their</span> <span class="word31">eye</span>. <span class="word32">The</span> <span class="word33">fovea</span> <span class="word34">is</span> <span class="word35">typically</span> <span class="word36">located</span> <span class="word37">at</span> <span class="word38">the</span> <span class="word39">center</span> <span class="word40">of</span> <span class="word41">the</span> <span class="word42">retina</span> <span class="word43">and</span> <span class="word44">is</span> <span class="word45">the</span> <span class="word46">point</span> <span class="word47">of</span> <span class="word48">clearest</span> <span class="word49">vision</span>.</p>
<p><link rel="stylesheet" href="extra/vis/paragraph-reading/paragraph.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="extra/vis/paragraph-reading/paragraph.js"></script></p></div>
<hr>
<div>
Category:
<span itemprop="articleSection">
<a href="./category/reading.html" rel="category">Reading</a>
</span>
</div>
<div>
Tags:
<span itemprop="keywords">
<a href="./tag/javascript.html" rel="tag">javascript</a>
</span>
<span itemprop="keywords">
<a href="./tag/essays.html" rel="tag">essays</a>
</span>
</div>
</div>
</div>
</div> <!-- <hr> -->
</div> <!-- /container -->
<footer class="aw-footer bg-danger">
<div class="container"> <!-- footer -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
<h4>Navigation</h4>
<ul class="list-unstyled my-list-style">
<li><a href=".">A Place for Asides</a></li>
<li><a href="./pages/about.html"><i class="fa fa-About "></i> About</a></li>
<li><a href="./pages/blogroll.html"><i class="fa fa-Blogroll "></i> Blogroll</a></li>
<li><a href="./pages/books.html"><i class="fa fa-Books I've Read "></i> Books I've Read</a></li>
<li><a href="./pages/previous-projects.html"><i class="fa fa-Previous Projects "></i> Previous Projects</a></li>
<li><a href="./pages/publications.html"><i class="fa fa-Publications "></i> Publications</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Author</h4>
<ul class="list-unstyled my-list-style">
<li><a href="https://github.com/tonyromarock">GitHub</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Categories</h4>
<ul class="list-unstyled my-list-style">
<li><a href="./category/linux.html">Linux (1)</a></li>
<li><a href="./category/nonfiction.html">Nonfiction (1)</a></li>
<li><a href="./category/python.html">Python (4)</a></li>
<li><a href="./category/reading.html">Reading (1)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<div class="container bottom">
<div class="row">
<div class="col-md-12 text-center center-block aw-bottom">
<p>© Peter 2020</p>
<p>Powered by Pelican</p>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./theme/js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="./theme/js/jquery.tocify.min.js"></script>
<script src="./theme/js/lightbox.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("div.collapseheader").click(function () {
$header = $(this).children("span").first();
$codearea = $(this).children(".input_area");
$codearea.slideToggle(500, function () {
$header.text(function () {
return $codearea.is(":visible") ? "Collapse Code" : "Expand Code";
});
});
});
});
$(function() {
var toc = $("#toc").tocify({
context:"div.article-body",
selectors:"h1,h3",
showAndHide:"false",
extendPage:"false",
history:"true",
scrollHistory:"true"
}).data("toc-tocify");
});
lightbox.option({
'wrapAround': true
});
</script>
</body>
</html>