all folders committed

master
poni 4 years ago
parent 220183ca0f
commit 12e9cb369d

@ -0,0 +1,21 @@
// Reveal text
Array.from(document.querySelectorAll(".reveal")).forEach(function(reveal) {
reveal.addEventListener("click", function (e) {
console.log("Surprise, there's text!");
reveal.classList.toggle("tada");
})
});
// Reveal visual
//Array.from(document.querySelectorAll(".reveal-visual")).forEach(function(revealVisual) {
// revealVisual.addEventListener("click", function (f) {
// console.log("Surprise, a visual!");
// revealVisual.classList.toggle("tada");
// var body = document.body;
// body.classList.toggle("switched");
// })
//});

@ -0,0 +1,161 @@
{
margin: 0;
padding: 0;
}
body {
font-family: 'Fira Mono', monospace;
font-size: 16px;
color: red;
}
body.switched {
font-family: 'Fira Mono', monospace;
font-size: 16px;
color: black;
}
main {
width: 100vw;
max-width: 1440px;
margin: 2em auto;
}
section {
width: 95%;
max-width: 680px;
margin: 0 auto;
}
section > figure {
max-width: 200px;
}
section > figure.left-aligned {
margin-left: -280px;
position: absolute;
}
section > figure.right-aligned {
margin-left: calc(635px + 4vw);
position: absolute;
}
section > figure > img {
width: 130%;
padding-bottom: 0.2em;
}
h1 {
font-size: 2em;
margin-bottom: 0em;
}
h2 {
font-size: 1.25em;
margin-bottom: 0.75em;
}
p {
font-size: 1em;
line-height: 140%;
margin-bottom: 0.75em;
}
h3 {
font-size: 0.75em;
line-height:140%;
margin-bottom: 0.75em;
color: black;
}
figcaption {
font-size: 0.8em;
color: black;
}
/* Reveal */
span.reveal {
cursor: pointer !important;
}
span.reveal.tada > .emoji {
display: none;
}
span.reveal > span.text {
display: none;
}
span.reveal.tada > span.text {
display: inline;
}
span.reveal.footnote {
color: black;
padding-left: 3px;
font-size: 1em !important;
font-weight: normal;
}
span.reveal.tada.footnote {
color: black;
}
span.reveal.footnote > .emoji {
font-size: 1.5em;
}
/*
figure.reveal-visual > img:nth-child(1) {
cursor: pointer;
}
figure.reveal-visual > img:nth-child(2) {
cursor: pointer;
display: none;
}
*/
figure.reveal-visual.tada > img:nth-child(1) {
display: none;
}
figure.reveal-visual.tada > img:nth-child(2) {
display: block;
}
body.switched span.reveal > .emoji,
body.switched span.reveal.tada > .emoji {
display: none;
}
body.switched span.reveal > .text,
body.switched span.reveal.tada > .text {
display: inline;
}
body.switched span.reveal.footnote {
font-size: 1em !important;
}
body.switched span.reveal.footnote > .emoji {
font-size: 1em !important;
display: none;
}
body.switched span.reveal.footnote > .text {
display: inline;
}
/* Content */
section#title {
margin-bottom: 2em;
}

Binary file not shown.

Binary file not shown.

@ -0,0 +1,32 @@
<input type="checkbox" id="toggle">
<label id="shown" for="toggle">
<span style="color: red;">?</span>
</label>
<label id="hidden" for="toggle" >
<span style="color: red;">!</span>
</label>
<style>
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
#shown {
display: block;
}
#hidden {
display: none;
}
#toggle:checked ~ #hidden{
display: block;
}
#toggle:checked ~ #shown {
display: none;
}
</style>

File diff suppressed because one or more lines are too long

@ -0,0 +1,207 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="language.css">
<title></title>
<style>
body {
background: white;
margin: 100px;
line-height:1.2;
font-family: monospace;
font-size: 10pt;
color: red
}
div.left {
position: fixed;
top: 0;
left: 0;
width: 600;
}
div.right {
position: fixed;
top: 0;
right: 0;
width: 600;
}
</style>
</head>
<!-- FLAG BEGINS HERE -->
<div class="left">
<font size="-1">
<pre>
<font color=#bebebe>?!!!?!!?!!???!???!!!!?!?!?!?!!!?!!?!!?!??!!!!?!???!!???!!!??!??????!!!!!?!!!????????!?!?!?!?!!?!?!!?</font>
<font color=#bebebe>!!!!?!!??!??!!!!!??!!?!!!?!!!!?!?!??!?!!??!!!?!?!?!??!!!?!!??!?!??!!!!??!!!???????!!!!!!!??!????!!?!</font>
<font color=#bebebe>???!!?!!!!?!?!!!??!!!!!!?!?!!!??!!?!?!?!?!?!???!????!!!?!!?!???!!!?!?!!???!?!!!?!!?!!!!!???!?!????!!</font>
<font color=#bebebe>!!?!?!???!!!!??????!!!!???!!!?????!??!!!?!?!?????!!!?!?!!!????!??!!??!!!!?!?!??!?????!!!!??!??!!?!??</font>
<font color=#bebebe>!?!!!????!?!???!!!??!??!!?!??!??!!!???!!??!!!?!!???!???!!!!!!?!?????!!???!?!!???!????!??????!?!!?!?!</font>
<font color=#bebebe>?!!!!!??!!!!?!???!?!??!??!!??!???!!!???!!!???!!??!!!!?!??!????!??!!?!?!!??!!!?????!!?????!?!!!?!!!??</font>
<font color=#bebebe>???!?!!!!?!!?!!!!!!?!?!??!??!?!!?!!?????!!?!!?????!?!?????????!!??!?!??!?!?!!!!???!??!??!?!!!!?!!!??</font>
<font color=silver>!!!!?????!?!!?!?!?!?!??!!??!!?!!!!!??!???!!?!?!?!???!!!!!?!?!!?!??!!!!!!!!!!??????!???!???!!!!!???!!</font>
<font color=#131313>???!?!!?!??!??!!?!!!!???!!?!!?!!!?!?!??!??!!???!???!!?!?!?!??!!!?!?!?!!??!?!!?!?!!!?!!!!???!!!??!!!?</font>
<font color=black>!?!?!?!??!?!?!??!?!??!??!?????!!??!?!?!?!!??!!!?!!!?!!!?!!??!!!!!?!??!????!?!!!??!?!?!??!????!!!?!!?</font>
<font color=black>!??!?!?!!?!????!!!??!?!!?!!???!?!??!?!??!??!!?!??!!?!!!?!!!!??!??!!?!???!!??!!!!?!????????!?!!!??!!?</font>
<font color=black>?!??!!??!??!?!!???!???!!?!?!!!!?!!?!??!!?!!????!?!!!!!!???!?!??!?!?????????!!?!????!!!???!!!!???!??!</font>
<font color=black>!??!!?!?!???!!???!!!?!!?!?!?!!!?!?!?!?????!?!!!?!!????!!!?!!!?!!!!??!?!!!??!!?!?!!!!!!?????!!?!!!??!</font>
<font color=black>!??????!???!!!!??!?!!!!!!??????!?!!!?????!?!?!?!?!?!!??!!!????!?!??!!?!??!!!?!?!???!!?!!?!!!!?!???!?</font>
<font color=black>?!!!??????!???!!!???!!??!!??!???????!!?!?!!?!!!?!??!!?!!?!!??????!?!!!?!?!?!?!!?!?!!?!?!?!?!!!!?!!!!</font>
<font color=black>!!??!??!?!????!!!??!!!!!??!!?!!!?!!?????!!?!?!?!?!!!!!!!!!!!!!!!?!!!???!!???!!!!!?!!!??!??!!?!!!!??!</font>
<font color=#202020>!!!!?!??!!!!!!!???!!!!??!!!!!!?!??!!!??!!!??!???!!!!???!?!!!??????!???!?!?!???!!??!!!!?!????!!!?!?!?</font>
<font color=#fefefe>?!!?!!?!!??!????!?!!!?!!?!?!??!?????!!???!!!?!!!!!!??!???!?!??!!?!!????!!!??!????!?!?!???!?!!?!!?!??</font>
<font color=#f6f6f6>??!?!!!??????!!??!!?!!?!!?!??!!?!?!!!?!?!!!!?!?!?!?!!??!!!!????!?????!!??!!??!??!?!?!??!?!!???!?????</font>
<font color=#f6f6f6>!?!!?????!?!??!!?!??!!???!!!!??!!???????!?!?!!?!??!!!???!??!?!!!????!?!??!!??!!?????!??!????!???!?!!</font>
<font color=#f6f6f6>?!?!??!?!??!??!?!?!!?!???!??!?!!!?????!?!!?!??!!!??!?!??!!?!!???!!!!!!???!!??!?!?!?!???????!!???!!?!</font>
<font color=#f6f6f6>!???!?!?!??!!?!?!?!?!?!?!?!?!!???!!!!?!!?!!????!?!!!?!!?!!??!!!??!???!???!!!?!!?!??!!?!??!!!??!!!??!</font>
<font color=#f6f6f6>!????!!?!?!!!!???!?!!?!?!!??!!?!!!?!!???!!???!!???!!!!!??!!?!!!??????!!!!?!!?!?!!!!?!??!!???!??!!!!!</font>
<font color=#f6f6f6>?!!!?!?!?!?!?!??!???????!?!!!??!!!!!???!!!!?!!!!!??!??????!????!!!!?????!!??!!!!?!?!????!?!?!?!!!!?!</font>
<font color=#f6f6f6>!!!?!??!?????!!????!!???!??!!???!?!??!!!????!!!!?!!!?!??!!!!!??!!!!?!?????!!!!!!?!!?!?!????!???!?!?!</font>
</pre>
</font>
</div>
<!-- FLAG ENDS HERE -->
<!-- FLAG BEGINS HERE -->
<div class="right">
<font size="-1">
<pre>
<font color=#363636>!???!!!??!!!!?!?!?!!?!!?!????!!!??!?!!???!?!?????!????!!?!!??!!!?!?!?!?????!!!!!??!?!?!!!!!!!!??!?!!</font>
<font color=#323232>?!!!!!?????!!!?????!!!????!!?!!!!!!???????!!!!??!?!!!?!!!??!!!?!!?!?!??!??!!??!!!?!!?!!!!??!?!?!!!??</font>
<font color=#313131>????????!?!!?!?!!?!!!!?!!!?!??!!?!??!?!?!?!?!??!!?!??!???!?!!??!?!!?!?!???!!???!!!!!?!??!??!??!?!??!</font>
<font color=#313131>!??????!!!?!?!!!!???!??!!!!!?!?!!?!???!?!?!!?!?!??!????!!??!??!!!?????!!?!?!?!??!??!??!?!?!???!!!??!</font>
<font color=#313131>!??!!?!?!?!??!?????!!!?!????!!!!!?!!??!!!!!!!?!!!!!!!!???!!!!!?!!?????!!?!!??????!!?!?????!!!!!!!!?!</font>
<font color=#313131>?!?!!!??!!!?!?!???!!!!?!!?!?!?!??!!!!??!!!???!!?!?!?!?!?!!????!???!??!!!!??!!!?!!!!!????!?!??!?!?!??</font>
<font color=#313131>!!!!?!!????????!!??!!!!?!?!?????!?!!??!?!???!?!!??!?????!?????!?!?????!!!!!?!???!!!?????!???!!???!?!</font>
<font color=#393939>?!?!?!!??!??!!?!???????!!!???????!??!?!!!?!?!??</font><font color=#383838>!?</font><font color=#393939>!???!??!!??</font><font color=#383838>?</font><font color=#393939>!!??!??!!?!!!?!?!???????!??!??!!??????!</font>
<font color=#b7b7b7>?!???!??!?!??!!!???!!!??!??!?!????!?</font><font color=#b8b8b8>!</font><font color=#b6b6b6>!</font><font color=#b8b8b8>?</font><font color=#b6b6b6>?</font><font color=#bdbdbd>!</font><font color=#c5c5c5>!</font><font color=#cbcbcb>!</font><font color=#d3d3d3>?</font><font color=#d8d8d8>??</font><font color=#d7d7d7>?</font><font color=#d0d0d0>?</font><font color=#cbcbcb>?</font><font color=#c3c3c3>!</font><font color=#bdbdbd>!</font><font color=#b8b8b8>?!!</font><font color=#b7b7b7>!?!!!</font><font color=#b8b8b8>??!</font><font color=#b6b6b6>?</font><font color=#b8b8b8>!</font><font color=#b7b7b7>!??!!?!!!!?!?!!!?!???!??????!!!!!?!!</font>
<font color=#cccccc>!!!??!?!??!!!!???!??!?!?!!?!!!??</font><font color=#cbcbcb>!</font><font color=#cccccc>!!?</font><font color=#cacaca>!</font><font color=#cfcfcf>!</font><font color=#dddddd>!</font><font color=#f1f1f1>?</font><font color=#fafafa>!</font><font color=#fefefe>!</font><font color=white>??</font><font color=#f5f5f5>!</font><font color=#ebebeb>!</font><font color=#e0e0e0>?</font><font color=#dedede>?</font><font color=#dddddd>?</font><font color=#dbdbdb>?</font><font color=#dcdcdc>!</font><font color=#d5d5d5>?</font><font color=#cecece>?</font><font color=#cbcbcb>?</font><font color=#cacaca>!</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?</font><font color=#cccccc>?!?</font><font color=#ebebeb>?</font><font color=#dadada>?</font><font color=#cbcbcb>!</font><font color=#cccccc>?!?</font><font color=#cdcdcd>?</font><font color=#cbcbcb>?</font><font color=#cccccc>?!!?!?!??!!!!?!!?!??!!?!?!?!?!!!</font>
<font color=#cbcbcb>??!!?????!?!?!?!!?!!??!??!???!!!?</font><font color=#cccccc>!</font><font color=#cbcbcb>!</font><font color=#cfcfcf>?</font><font color=#dbdbdb>!</font><font color=#f8f8f8>!</font><font color=white>???</font><font color=#fefefe>!</font><font color=#efefef>!</font><font color=#d4d4d4>?</font><font color=#cbcbcb>!??</font><font color=#cdcdcd>?</font><font color=#cbcbcb>?!!</font><font color=#cacaca>?</font><font color=#cccccc>?</font><font color=#cdcdcd>!?</font><font color=#d6d6d6>?</font><font color=#f0f0f0>!</font><font color=#e8e8e8>?</font><font color=#e0e0e0>!</font><font color=#e8e8e8>?</font><font color=white>!</font><font color=#fdfdfd>!</font><font color=#dedede>!</font><font color=#e3e3e3>?</font><font color=#ebebeb>!</font><font color=#e9e9e9>?</font><font color=#cdcdcd>!</font><font color=#cccccc>?</font><font color=#cbcbcb>!!?!?!!???!!??!?!??!?!?!!!!!!?!?</font>
<font color=#cbcbcb>??!???????!!!??!?!???!???!?!?!??</font><font color=#cccccc>?!</font><font color=#cdcdcd>!</font><font color=#d8d8d8>!</font><font color=#fdfdfd>?</font><font color=white>!?!?</font><font color=#f2f2f2>!</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?!</font><font color=#cccccc>!</font><font color=#cbcbcb>!</font><font color=#cccccc>!</font><font color=#cbcbcb>?!!?</font><font color=#cdcdcd>?</font><font color=#cbcbcb>!</font><font color=#cccccc>!</font><font color=#d2d2d2>?</font><font color=#e5e5e5>?</font><font color=white>??!!?!!</font><font color=#f9f9f9>!</font><font color=#dbdbdb>?</font><font color=#cdcdcd>??</font><font color=#cccccc>!??</font><font color=#cbcbcb>!!!???!!????!!!??!??!!!????!!</font>
<font color=#cbcbcb>!!!??!!?!?!??????!??!??!?????!???</font><font color=#cccccc>?</font><font color=#cdcdcd>?</font><font color=#e8e8e8>?</font><font color=white>?!!!?</font><font color=#e2e2e2>!</font><font color=#cdcdcd>?!</font><font color=#cbcbcb>!!!??!!!?</font><font color=#d3d3d3>?</font><font color=#e4e4e4>!</font><font color=#ededed>!</font><font color=#f9f9f9>!</font><font color=white>??!!???</font><font color=#fefefe>?</font><font color=#f6f6f6>?</font><font color=#eaeaea>?</font><font color=#dedede>!</font><font color=#cdcdcd>!</font><font color=#cecece>?</font><font color=#cbcbcb>!!!!???!!?!!??!!!???!!!?!!??!?</font>
<font color=#cbcbcb>!?!?!!!???!!?!???!!!??!?!?!!????</font><font color=#cccccc>!</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?</font><font color=#dadada>?</font><font color=#fefefe>!</font><font color=white>??!?</font><font color=#f5f5f5>?</font><font color=#d1d1d1>?</font><font color=#cccccc>?</font><font color=#cbcbcb>?!!?!?!</font><font color=#cccccc>!</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?</font><font color=#cccccc>!?</font><font color=#e6e6e6>!</font><font color=white>?</font><font color=#fbfbfb>!!</font><font color=white>??</font><font color=#fafafa>?</font><font color=#fdfdfd>!</font><font color=#fbfbfb>?</font><font color=#d5d5d5>?</font><font color=#cccccc>!!</font><font color=#cbcbcb>!!??!!!???!?!!!?!!?????!!???!!??</font>
<font color=#cbcbcb>???!?!??!??!??!?!?!???????!!!!!?</font><font color=#cccccc>?</font><font color=#cacaca>!</font><font color=#cccccc>??</font><font color=#dddddd>!</font><font color=#fafafa>?</font><font color=white>!?!!</font><font color=#fafafa>!</font><font color=#e7e7e7>?</font><font color=#d3d3d3>!</font><font color=#cccccc>?</font><font color=#cacaca>!</font><font color=#cdcdcd>?</font><font color=#cccccc>?!</font><font color=#cbcbcb>?</font><font color=#cccccc>!</font><font color=#cbcbcb>!</font><font color=#cfcfcf>?</font><font color=#cbcbcb>!</font><font color=#d3d3d3>?</font><font color=#e0e0e0>?</font><font color=#d6d6d6>?</font><font color=#d3d3d3>!</font><font color=#d7d7d7>!</font><font color=#fdfdfd>!</font><font color=#f4f4f4>!</font><font color=#d0d0d0>!</font><font color=#d3d3d3>!</font><font color=#d9d9d9>?</font><font color=#e0e0e0>?</font><font color=#d2d2d2>?</font><font color=#cacaca>?</font><font color=#cbcbcb>!???!!?!!!!!?!!?!!????!??!?!???!</font>
<font color=#cbcbcb>?!!??!!!!?!!!???????!!??!?!!!??!?!???</font><font color=#cecece>!</font><font color=#dedede>?</font><font color=#f0f0f0>?</font><font color=#fafafa>?</font><font color=#fefefe>?</font><font color=white>??!</font><font color=#fafafa>?</font><font color=#efefef>!</font><font color=#eaeaea>!</font><font color=#e8e8e8>?</font><font color=#e9e9e9>!</font><font color=#e5e5e5>!</font><font color=#e2e2e2>!</font><font color=#dadada>!</font><font color=#cbcbcb>!</font><font color=#cdcdcd>?</font><font color=#cccccc>!</font><font color=#cbcbcb>?</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?</font><font color=#cccccc>!</font><font color=#d9d9d9>?</font><font color=#cdcdcd>!</font><font color=#cecece>!</font><font color=#cccccc>!</font><font color=#cdcdcd>!</font><font color=#cbcbcb>?!???!!??!?!!!!?!?!!????!!?!?!?!!!?</font>
<font color=#afafaf>?!?!??!?!!?!!?!????!?!!!!??!!??!!!??!</font><font color=#aeaeae>?</font><font color=#afafaf>!</font><font color=#aeaeae>!</font><font color=#b4b4b4>?</font><font color=#b9b9b9>?</font><font color=#c1c1c1>!</font><font color=#c7c7c7>!</font><font color=#cdcdcd>!</font><font color=#cfcfcf>!</font><font color=#cccccc>!</font><font color=#c7c7c7>?</font><font color=silver>?</font><font color=#b9b9b9>?</font><font color=#b3b3b3>!</font><font color=#afafaf>!</font><font color=#b0b0b0>?</font><font color=#afafaf>!?!</font><font color=#aeaeae>!</font><font color=#afafaf>?</font><font color=#aeaeae>!</font><font color=#afafaf>?!?!</font><font color=#aeaeae>!</font><font color=#afafaf>?!??!!!?!?????!?!!!??!?!?!?!??!!!??!</font>
<font color=#0a0a0a>??!!!!?!!!!!?!!!!?!!!??!?!!?!??!?!????!???!!?!!!??????!!!?!??!?!!!?!??!!!!!???!???!!!???!??????!?!??</font>
<font color=black>!?!!!!!!!!??!???!?!???!!???!!!!???!!?!????!??!!????!????!?!??!!?????!???!!??!?!!????!??!?!?!!!!??!!!</font>
<font color=black>?!?!!!?!!!!?!???!?!!!??!!?!!??!!?!!!!?!?!??!!???!!??!!!!???!??!!?!?!?!!!!??!!??!!!???!!!??!!!!!????!</font>
<font color=black>!!!??!?!!?!?!??!!?!?!??!???!?!!???!!?!!???!!?!???!!?!?!!!!?!!!??!?!??!???!?!!!!?!????!!!!!???!!!!!!?</font>
<font color=black>?!?!!!!!????!!?!??!?!!!!!!!?!?!!??!!!!?!?!???!?!!!!???!!!!?!?!!?!?????!!!?!!!!!!?!??!!?!??!!???!???!</font>
<font color=black>!?!!!?????!??!!???!?!?!??!??!??????!!?!!!!!!!?!!??!!!???!???!!!!!!??!?!??!!?!!??????!???!!!!!??!??!?</font>
<font color=black>??!?!?!??!?!!!?!???!!??!?!!?!!???!???!!?!!????!!???!!????!!!????!!!?????!??!?!?!?????!!!?!?!!???!!!!</font>
<font color=#060606>?!!????!?!?!!!??!?!!!!??!?????!!!!?!?!?????!!!!!!!???!?!?!??!!???!???!!!!?!!?!?!?!!!?!??!????!!!????</font>
</pre>
</font>
</div>
<!-- FLAG ENDS HERE -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1><span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span> / <span style="color: black;" class="fpunct"><span class="question">?</span><span style="color: black;" class="bang">!</span></span></h1>
<body>
Nina Power
<p>Part 1: <span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span></p>
<p>“[T]he entire thrust of the LTI The Langue of the Third Reich was towards visualisation, and if this process of visualizing could be achieved with recourse to Germanic traditions, by means of a runic sign, then so much the better. And as a jagged character the rune of life was related to the SS symbol, and as an ideological symbol also related to the spokes of the wheel of the sun, <pre><span style="color: black;" class="fpunct"><span class="question">the swastica</span><span style="color: black;" class="bang">
!!!!!
!!
!!
!!!!!!!
!!
!!
!!!!!
</span></span></pre> … Renans position: the question mark the most important of all punctuation marks. A position in direct opposition to National Socialist intransigence and self-confidence … From time to time it is possible to detect, both amongst individuals and groups, a characteristic preference for one particular punctuation mark. Academics love the semicolon; their hankering after logic demands a division which is more emphatic than a comma, but not quite as absolute a demarcation as a full stop. Renan the sceptic declares that it is impossible to overuse the question mark.” Victor Klemperer, Punctuation from The Language of the Third Reich.[1]</p>
<p>In the era of <span style="color: black;" class="fpunct"><span class="question">😡</span><span style="color: black;" class="bang">emojis</span></span>, we have forgotten about the politics of <span style="color: black;" class="fpunct"><span class="question">!?.,</span><span style="color: black;" class="bang">punctuation</span></span>. Which mark or sign holds sway over us in the age of Twitter, Facebook, YouTube comments, emails, and text messages<span style="color: black;" class="fpunct"><span class="question">?</span><span style="color: black;" class="bang">!</span></span> If we take the tweets of <span style="color: black;" class="fpunct"><span class="question">🍊</span><span style="color: black;" class="bang">Donald Trump</span></span> as some kind of symptomatic indicator, we can see quite well that it is the exclamation mark <span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span> that dominates. A quick look at his tweets from the last 48 hour period shows that almost all of them end with a single declarative sentence or word followed by a <span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>: Big trade imbalance<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, No more<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, Theyve gone CRAZY<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, Happy National Anthem Day<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, REST IN PEACE BILLY GRAHAM<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, IF YOU DONT HAVE STEEL, YOU DONT HAVE A COUNTRY<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, (we shall leave the matter of all caps for another time), $800 Billion Trade Deficit-have no choice<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span>, Jobless claims at a 49 year low<span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span> and so on … you get the picture. Trumps exclamation mark is the equivalent of a boss slamming his fist down on the table, an abusive partner shouting at a tentative query, an exasperated shock jock arguing with an imaginary opponent. It is the exclamation mark as the final word, which would not be so frightening if Trumps final word was not also backed up by nuclear annihilation, the US army, the police, court and prison system, vast swathes of the US media and electorate, and multiple people around him too afraid to say no. This is the exclamation mark as apocalypse, not the <span style="color: black;" class="fpunct"><span class="question">!</span><span style="color: black;" class="bang">?</span></span> of surprise, amusement, girlish shyness, humour, or ironic puncture. This is the exclamation of doom.</p>
<p>The Sturm and Drang needed an unusually large number of exclamation marks, suggests Klemperer, and, though you might suspect the LTI (Lingua Tertii Imperii the language of the Third Reich as Klemperer calls it) would adore the exclamation mark, “given its fundamentally rhetorical nature and constant appeal to the emotions,” in actual fact “they are not at all conspicuous” in Nazi writings.[2] Why did the Nazis not need the exclamation mark<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> Klemperer states, “t is as if [the LTI] turns everything into a command or proclamation as a matter of course and therefore has no need of a special punctuation mark to highlight the fact where after all are the sober utterances against which the proclamation would need to stand out<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span>”[3]</p>
<p>This point alone should herald a terrible warning. “Sober utterances” from rational debate, to well-researched news, to public and open discussion when these go, the exclamation marks will go too, because there will be no opposition left to be falsely outraged against. There will be no critical press, no free thought, no social antagonism, because anyone who stands against the dominant discourse will disappear, and perhaps social death will suffice, rather than murder, if only because it is easier to do. When Trump and others attack the media, it is so that one day their tweets will no longer need the exclamation of opposition. It is so that all statements from above will be a command or proclamation in a frictionless, opposition-less universe.</p>
<p>But we are also tempted by the exclamation mark because it is also a sign, in some contexts, of another kind of disbelief. Not the Trump kind in which he cannot reconcile the fact that others disagree with him (or even that they exist), but the kind which simply says oh my goodness<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> or thats great<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> or Im shocked/surprised/happy stunned<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> But then we use them all the time and they grow tired and weak…and we use them defensively, when we say: Im sorry this email is so late<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>, I have been so useless lately<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>, Im so tired I can hardly see<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> and so on, ad infinitum … (and what of the ellipses<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> … another time, another time).</p>
<p>If you look at the comments to YouTube videos (a sentence to which nothing good is ever likely to be added), you will find a particular use of the exclamation mark. Take, for example, the currently number one trending video: Jennifer Lawrence Explains Her Drunk Alter Ego “Gail”, where the actress talks to Ellen DeGeneres on the latters popular programme The Ellen Show about how when shes on holiday and drinks rum she becomes a masculine, adrenalin-junkie, alter-ego Gail who jumps into shark-infested waters to amuse her friends, eats live sea creatures, and challenges people to arm-wrestling competitions. Apart from the slight melancholy induced by wondering why Jennifer Lawrence has to split herself into different beings in order to have a break from work, how does the public response to the video tell us anything about the various uses of the exclamation mark<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> While many of the comments suggest that Lawrence is the victim of MKUltra mind control, and a victim of child abuse, or that she is fake, some of the comments shed a small, pitiful, grey kind of light on the exclamation mark as a kind of pleading into the void the mark that will never be registered, because the speaker is speaking primarily to reassure him or herself. </p>
<p>There is the pleading, compassionate use: “love how she is so open<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>” says Kailey Bashaw, to which Oliver 2000 responds, “Yeah I love her porn pictures” with no punctuation at all. Lauren Robelto writes: “Everybody commenting about alcoholism makes me so sad. Shes worked very hard and just wants to take a break and have fun and everyones criticizes her. Honestly if I were her I wouldn't be able to stop drinking because of all the hate<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> Lighten up people<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> JLaw is gonna keep thriving with or without your support!!” A similar kind of plea, the plea of the fan, a plea for understanding combined with a passive-aggressive double use of the exclamation mark to signify a kind of double-triumph: the commentator has both convinced themselves and history that leaving negative (or indeed positive) comments on YouTube will in no way affect the reception of whoever they are passionate about.</p>
<p>There is a footnote in Marxs Capital, vol. 1 which does something interesting with the relation between the exclamation mark and the question mark, and I want to insert it here as the perfect dialectical extract for moving from the exclamation mark to the question mark. Here Marx is quoting Wilhelm Roscher writing about J. B. Say, the liberal economist famous for arguing that production creates its own demand. All the comments in parentheses are Marxs own: “Ricardos school is in the habit of including capital as accumulated labour under the heading of labour. This is unskillful (<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>), because (<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>) indeed the owner of capital (<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>) has after all (<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>) done more than merely (!?) create (?) and preserve (??) the same (what same?): namely (?!?) the abstention from the enjoyment of it, in return for which he demands, for instance (!!!) interest. How very skilful is this anatomico-physiological method of political economy, which converts a mere demand into a source of value<span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span>”[4]</p>
<p>Marx was famously brutal and scabrous in his take-downs, devoting hundreds of pages to figures that are now barely remembered, or remembered largely because Marx took them down. But here our interest lies in the use of <span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> and <span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> and !? and ?? and ?!? and !!!. What is Marx signalling here<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> Disbelief in idiocy, incomprehension, mockery, but also perhaps a curious hope. Hope<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> Hope in a better analysis, one worthier of the world, one that will explain rather than mystify…</p>
<p>Part 2: <span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span></p>
<p>Are we today in need of more question marks<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> Klemperer describes, as above, the question mark as being “in direct opposition to National Socialist intransigence and self-confidence.”[5] The question mark is itself a question, a kind of collapsed exclamation mark. A question mark can be an act of aggression or interruption: oh really<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> But it can also function as a kind of pause, a break in the horrible flow, the babble, the endless lies. The question mark is the person who says hang on, what is being said here<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span>, what is happening<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span>, is this okay<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> It is the question of the body that stands against the crowd, head bowed, frightened, but compelled by an inner question of their own is this the right thing, what they are saying<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> It is the feeling and the admission that one doesnt know, and the intuition that there might not be a simple answer to the situation. We are surrounded by people who want to give us their solutions, who tell us how things work, what we should think, how we should be, how we should behave. There are too few Socratic beings, and far too many self-promoters, charlatans, snake-oil salesmen, liars, confidence tricksters. We want to be nice, but we end up getting played. Anyone who claims to have the full picture is someone who wants an image of the world to dominate you so you shut up or give them something they want. They are not your friends.</p>
<p>How to understand the question mark as a symbol, then, of trust<span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> There must be room for exploration, of a mutual, tentative openness. A place where it is possible to say I dont know and not feel ashamed or ignorant, or foolish, or unkind. The internet is so often a place where people are shunned and shamed for asking questions, as if ignorance wasnt a condition for knowledge, and as if we never wanted anyone to go beyond the things everybody already understands. Sometimes ignorance is in fact the greatest kind of intelligence, and sometimes it is the most noble political strategy. Philosophy and psychoanalysis tells us that, in any case, we in fact know less than we think we do know. Knowledge and understanding are not transparent processes: we bury and forget, we lose the ability to ask questions of ourselves, and we when we think we understand ourselves this is when we dismiss others. We want to think that we are solely good, that we have the right position, and that the others are wrong. But if we give up on our inner question mark, we become rigid, like the exclamation mark of condemnation. We forget that other people think differently and that not everyone must think the same thing. We forget about friendship, flexibility, and forgiveness.</p>
<p>If we do not give ourselves enough time to think about the politics of punctuation, we run the risk of being swept away on a wave of someone elses desire. We become passive pawns and stooges. We become victims of the malign desires of others to silence us, to put us down, to make us terrified and confused. Punctuation is not merely linguistic, but imagistic and political through and through. The <span style="color: red;" class="fpunct"><span class="question">!</span><span style="color: red;" class="bang">?</span></span> and the <span style="color: red;" class="fpunct"><span class="question">?</span><span style="color: red;" class="bang">!</span></span> are signs among other signs, but their relation and their power course through us when we are least aware of it. When we are face to face, we can use our expressions, our body as a whole, to dramatize these marks, with a raised eyebrow, a gesture, a shrug a complex combination of the two marks can appear in and about us. But we are apart much of the time, and we must rely on markers that do not capture our collective understanding. We must be in a mode of play with the words and the punctuation we use, to keep a certain openness, a certain humour: not the cruelty of online life or the declarations of the powerful, but the delicate humour that includes the recognition that jokes are always aggressive, and that we live permanently on the edge of violence, but that we must be able to play if we are able to understand our drives, and, at the same time, the possibility of living together differently.</p>
Footnotes
<p>1. Klemperer, Victor. Language of the Third Reich: LTI: Lingua Tertii Imperii. Translated by Martin Brady. New York: Bloomsbury Academic, 2013.
2. Ibid. 67.
3. Ibid. 67.
4. Marx, Karl. [i]Capital, Volume 1: A Critique of Political Economy.[i] New York: International Publishers, 1977. 82.
5. Klemperer, Victor. [i]Language of the Third Reich: LTI: Lingua Tertii Imperii[i]. 74.</p>
</body>
<style>
.fpunct {
cursor: pointer;
}
/* fpunct "normal" */
.fpunct .question { display: inline; }
.fpunct .bang { display: none; }
/* fpunct "flipped" state */
.fpunct.flipped .question { display: none; }
.fpunct.flipped .bang { display: inline; }
</style>
<script>
Array.from(document.querySelectorAll(".fpunct")).forEach(function(punct) {
punct.addEventListener("click", function (e) {
console.log("fpunct CLICK, toggling", punct);
punct.classList.toggle("flipped");
})
});
</script>

@ -0,0 +1,32 @@
<input type="checkbox" id="toggle">
<label id="shown" for="toggle">
<span style="color: red;">?</span>
</label>
<label id="hidden" for="toggle" >
<span style="color: red;">!</span>
</label>
<style>
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
#shown {
display: block;
}
#hidden {
display: none;
}
#toggle:checked ~ #hidden{
display: block;
}
#toggle:checked ~ #shown {
display: none;
}
</style>

@ -0,0 +1,31 @@
<input type="checkbox" id="toggle">
Is this a sentence<label class="shown" for="toggle">?</label><label class="hidden" for="toggle">!</label>
This a sentence<label class="shown" for="toggle">?</label><label class="hidden" for="toggle">!</label>
<style>
input[type=checkbox] {
/* position: absolute; */
top: -9999px;
left: -9999px;
}
.shown {
display: block;
}
.hidden {
display: none;
}
label {
display: inline;
}
#toggle:checked ~ .hidden{
display: block;
}
#toggle:checked ~ .shown {
display: none;
}
</style>

@ -0,0 +1,42 @@
<html>
<body class="checked">
<p>Is this a sentence
<span class="fpunct">
<span class="question">?</span><span class="bang">!</span>
</span>
</p>
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
</body>
<style>
.fpunct {
cursor: pointer;
}
/* fpunct "normal" */
.fpunct .question { display: inline; }
.fpunct .bang { display: none; }
/* fpunct "flipped" state */
.fpunct.flipped .question { display: none; }
.fpunct.flipped .bang { display: inline; }
</style>
<script>
Array.from(document.querySelectorAll(".fpunct")).forEach(function(punct) {
punct.addEventListener("click", function (e) {
console.log("fpunct CLICK, toggling", punct);
punct.classList.toggle("flipped");
})
});
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 836 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>?!</title>
<meta name="description" content="Summary of site">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Fira+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./assets/stylez.css">
</head>
<body>
<main>
<section id="title">
<figure id="visual" class="left-aligned">
<img src="./images/title.jpg">
</figure>
<br>
<br>
<h3><span class="reveal emoji" ><span style="color: red;" class="emoji">Punctuation</span><span class="text">A special symbol that you add to writing</span></span> is not merely linguistic, but imaginistic and political. It creates conflicts and misunderstandings. From its presence in Philosophical texts to Trump tweets punctuation alters wor(l)ds. Youre invited to alter the punctuation in this text and see for yourself how it affects your understanding and perception.</h3>
<br>
<h1>! / ?</h1>
<p2>Nina Power<span style="color: black;" class="reveal emoji" ><span class="emoji"></span><span class="text">(original text)</span></span></p2>
</section>
<section id="part1">
<h2>Part 1: <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span></h2>
<p>“The entire thrust of the LTI The Language<a class="ties" style="font-size: 16pt;" href = "../PRACTICAL_VISION/">P</a> of the Third Reich was towards visualisation, and if this process of visualizing could be achieved with recourse to Germanic traditions, by means of a runic sign, then so much the better.<a class="ties" style="font-size: 16pt;" href = "../OTHERNESS/">O</a> And as a jagged character the rune of life was related to the SS symbol, and as an ideological symbol also related to the spokes of the wheel of the <span class="reveal emoji"><span class="emoji">☀️</span><span class="text">sun</span></span>, the swastika … <span class="reveal emoji"><span class="emoji">🧐</span><span class="text">Renan's</span></span> position: the question mark the most important of all punctuation marks. A position in direct opposition to National Socialist intransigence and self-confidence … From time to time it is possible to detect, both amongst individuals and groups, a characteristic preference for one particular punctuation mark. Academics love the semicolon; their hankering after logic demands a division which is more emphatic than a comma, but not quite as absolute a demarcation as a full stop. <span class="reveal emoji"><span class="emoji">🧐</span><span class="text">Renan's</span></span> the sceptic declares that it is impossible to overuse the question mark.” <span class="reveal emoji"><span class="emoji">👴🏻</span><span class="text">Victor Klemperer</span></span>, Punctuation from The Language of the Third Reich.<span class="reveal footnote"><span class="emoji">&#10112;</span><span class="text"><font size="5">&#10112;</font>Klemperer, Victor. Language of the Third Reich: LTI: Lingua Tertii Imperii. Translated by Martin Brady. New York: Bloomsbury Academic, 2013.</span></span></p>
<figure id="visual" class="left-aligned">
<img src="./images/ascii_trump.jpg">
<figcaption><span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Donald Trump</span></span></figcaption>
</figure>
<figure id="visual" class="right-aligned">
<img src="./images/ascii_flag.jpg">
<figcaption>U.S flag</figcaption>
</figure>
<p>In the era of <span class="reveal emoji"><span class="emoji">😡</span><span class="text">emojis</span></span>, we have forgotten about the politics<a class="ties" style="font-size: 16pt;" href = "../ECO-SWARAJ/">E</a> of punctuation. Which mark or sign holds sway over us in the age of Twitter, Facebook, YouTube <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span>, emails, and text messages<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> If we take the tweets of <span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Donald Trump</span></span> as some kind of symptomatic indicator, we can see quite well that it is the exclamation mark <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> that dominates<a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a>. A quick look at his tweets from the last 48 hour period shows that almost all of them end with a single declarative<a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a> sentence or word followed by a <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>: Big trade imbalance<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, No more<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, Theyve gone CRAZY<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, Happy National Anthem Day<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, <span class="reveal emoji"><span class="emoji">⚰️</span><span class="text">REST IN PEACE</span></span> BILLY GRAHAM<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, IF YOU DONT HAVE STEEL, YOU DONT HAVE A COUNTRY<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, (we shall leave the matter of all caps for another time), $800 Billion Trade Deficit-have no choice<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, Jobless claims at a 49 year low<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> and so on … you get the picture. <span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Trump's</span></span> exclamation mark is the equivalent of a boss slamming his fist down on the table, an abusive partner shouting at a tentative query, an exasperated shock jock arguing with an imaginary opponent. It is the exclamation mark as the final word, which would not be so frightening if <span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Trump's</span></span> final word was not also backed up by <span class="reveal emoji"><span class="emoji">🤯</span><span class="text">nuclear annihilation</span></span>, the US army, the <span class="reveal emoji"><span class="emoji">🚓</span><span class="text">police</span></span>, court and prison system, vast swathes of the US media and electorate, and multiple people around him too afraid to say no. This is the exclamation mark as apocalypse, not the <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> of <span class="reveal emoji"><span class="emoji">😮</span><span class="text">surprise</span></span>, <span class="reveal emoji"><span class="emoji">😂</span><span class="text">amusement</span></span>, <span class="reveal emoji"><span class="emoji">🤭</span><span class="text">girlish shyness</span></span>, <span class="reveal emoji"><span class="emoji">🤡</span><span class="text">humour</span></span>, or ironic puncture. This is the exclamation of doom.</p>
<figure id="visual" class="right-aligned">
<img src="./images/ascii_LTI.jpg">
<figcaption><span class="reveal emoji"><span class="emoji"></span><span class="text">The Language of the Third Reich by V. Klemperer</span></span></figcaption>
</figure>
<p>The Sturm and Drang needed an unusually large number of exclamation marks, suggests <span class="reveal emoji"><span class="emoji">👴🏻</span><span class="text">Klemperer</span></span>, and, though you might suspect the LTI (Lingua Tertii Imperii the language of the Third Reich as <span class="reveal emoji"><span class="emoji">👴🏻</span><span class="text">Klemperer</span></span> calls it) would adore the exclamation mark, “given its fundamentally rhetorical nature and constant appeal to the emotions,” in actual fact “they are not at all conspicuous” in Nazi writings.<span class="reveal footnote"><span class="emoji">&#10113;</span><span class="text"><font size="5">&#10113;</font>Klemperer, Victor. Language of the Third Reich: LTI: Lingua Tertii Imperii. Translated by Martin Brady. New York: Bloomsbury Academic, 2013.</span></span> Why did the Nazis not need the exclamation mark<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> <span class="reveal emoji"><span class="emoji">👴🏻</span><span class="text">Klemperer</span></span> states, “t is as if [the LTI] turns everything into a command or proclamation as a matter of course and therefore has no need of a special punctuation mark to highlight the fact where after all are the sober utterances against which the proclamation would need to stand out<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span><span class="reveal footnote"><span class="emoji">&#10114;</span><span class="text"><font size="5">&#10114;</font>Klemperer, Victor. Language of the Third Reich: LTI: Lingua Tertii Imperii. Translated by Martin Brady. New York: Bloomsbury Academic, 2013.</span></span></p>
<p>This point alone should herald a terrible <span class="reveal emoji"><span class="emoji">⚠️</span><span class="text">warning</span></span>. “Sober utterances” from rational debate, to well-researched news, to public and open discussion when these go, the exclamation marks will go too, because there will be no opposition<a class="ties" style="font-size: 16pt;" href = "../HOPE/">H</a> left to be falsely outraged against. There will be no critical press, no free thought, no social antagonism, because anyone who stands against the dominant discourse <a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a> will disappear, and perhaps social <span class="reveal emoji"><span class="emoji">☠️</span><span class="text">death</span></span> will suffice, rather than <span class="reveal emoji"><span class="emoji">🔪</span><span class="text">murder</span></span>, if only because it is easier to do. When <span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Trump</span></span> and others attack the media, it is so that one day their tweets will no longer need the exclamation of opposition.<a class="ties" style="font-size: 16pt;" href = "../HOPE/">H</a> It is so that all statements from above will be a command or proclamation in a frictionless, opposition-less universe.</p>
<p>But we are also tempted by the exclamation mark because it is also a sign, in some contexts, of another kind of <span class="reveal emoji"><span class="emoji">😤</span><span class="text">disbelief</span></span>. Not the <span class="reveal emoji"><span class="emoji">🍊</span><span class="text">Trump</span></span> kind in which he cannot reconcile the fact that others disagree with him (or even that they exist), but the kind which simply says oh my goodness<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> or thats great<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> or Im <span class="reveal emoji"><span class="emoji">😱</span><span class="text">shocked</span></span>/<span class="reveal emoji"><span class="emoji">😮</span><span class="text">surprised</span></span>/<span class="reveal emoji"><span class="emoji">😃</span><span class="text">happy</span></span>/<span class="reveal emoji"><span class="emoji">😶</span><span class="text">stunned</span></span><span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> But then we use them all the time and they grow tired and weak…and we use them defensively, when we say: Im sorry this email<span class="reveal emoji"><span class="emoji"></span><span class="text">email</span></span> is so late<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, I have been so useless lately<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>, Im so tired I can hardly see<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> and so on, ad infinitum … (and what of the ellipses? … another time, another time).</p>
<figure id="visual" class="left-aligned">
<img src="./images/ascii_ellen.jpg">
<figcaption><span class="reveal emoji"><span class="emoji">👱🏻</span><span class="text">Ellen DeGeneres</span></span></figcaption>
</figure>
<p>If you look at the <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span> to <span class="reveal emoji"><span class="emoji">▶️</span><span class="text">YouTube</span></span> videos (a sentence to which nothing good is ever likely to be added), you will find a particular use of the exclamation mark. Take, for example, the currently number one trending video: Jennifer Lawrence Explains Her Drunk Alter Ego “Gail”, where the actress talks to <span class="reveal emoji"><span class="emoji">👱🏻</span><span class="text">Ellen</span></span> on the latters popular programme The <span class="reveal emoji"><span class="emoji">👱🏻</span><span class="text">Ellen</span></span> Show about how when shes on holiday and drinks <span class="reveal emoji"><span class="emoji">🍹</span><span class="text">rum</span></span> she becomes a masculine, <span class="reveal emoji"><span class="emoji">🪂</span><span class="text">adrenaline-junkie</span></span>, alter-ego Gail who jumps into shark-infested waters to amuse her friends, eats live sea creatures, and challenges people to <span class="reveal emoji"><span class="emoji">💪</span><span class="text">arm-wrestling</span></span> competitions. Apart from the slight melancholy induced by wondering why Jennifer Lawrence has to split herself into different beings in order to have a break from work, how does the public response to the video tell us anything about the various uses of the exclamation mark<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> While many of the <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span> suggest that Lawrence is the victim of MKUltra <span class="reveal emoji"><span class="emoji">🧠</span><span class="text">mind control</span></span>, and a victim of child abuse, or that she is fake, some of the <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span> shed a small, pitiful, grey kind of light on the exclamation mark as a kind of pleading into the void the mark that will never be registered, because the speaker is speaking primarily to reassure him or herself.</p>
<p>There is the pleading, compassionate use: “love how she is so open<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span>” says Kailey Bashaw, to which Oliver 2000 responds, “Yeah I love her <span class="reveal emoji"><span class="emoji">🔞</span><span class="text">porn</span></span> pictures” with no punctuation at all. <span class="reveal emoji"><span class="emoji">🧑🏻</span><span class="text">Lauren Robelto</span></span> writes: “Everybody <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">commenting</span></span> about alcoholism makes me so sad. Shes worked very hard and just wants to take a break and have fun and everyones criticizes her. Honestly if I were her I wouldn't be able to stop drinking because of all the hate<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> Lighten up people<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> JLaw is gonna keep thriving with or without your support<span style="color: black;" class="reveal emoji" ><span class="emoji">!!</span><span class="text">??</span></span>” A similar kind of <span class="reveal emoji"><span class="emoji">🙏</span><span class="text">plea</span></span>, the <span class="reveal emoji"><span class="emoji">🙏</span><span class="text">plea</span></span> of the fan, a <span class="reveal emoji"><span class="emoji">🙏</span><span class="text">plea</span></span> for understanding combined with a passive-aggressive double use of the exclamation mark to signify a kind of double-triumph: the commentator has both convinced themselves and history that leaving negative (or indeed positive) <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span> on <span class="reveal emoji"><span class="emoji">▶️</span><span class="text">YouTube</span></span> will in no way affect the reception of whoever they are passionate about.</p>
<figure id="visual" class="right-aligned">
<img src="./images/ascii_marx.jpg">
<figcaption><span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Karl Marx</span></span></figcaption>
</figure>
<p>There is a footnote in <span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marxs</span></span> Capital, vol. 1 which does something interesting with the relation between the exclamation mark and the question mark, and I want to insert it here as the perfect dialectical extract for moving from the exclamation mark to the question mark. Here <span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marx</span></span> is quoting Wilhelm Roscher writing about J. B. Say, the liberal economist famous for arguing that production creates its own demand. All the <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">comments</span></span> in parentheses are <span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marxs</span></span> own: “Ricardos school is in the habit of including capital as accumulated labour under the heading of labour. This is unskillful (!), because (!) indeed the owner of capital (!) has after all (!) done more than merely (!?) create (?) and preserve (??) the same (what same?): namely (?!?) the abstention from the enjoyment of it, in return for which he demands, for instance (!!!) interest. How very skilful is this anatomico-physiological method of political economy, which converts a mere demand into a source of value<span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span><span class="reveal footnote"><span class="emoji">&#10115;</span><span class="text"><font size="5">&#10115;</font>Marx, Karl. Capital, Volume 1: A Critique of Political Economy. New York: International Publishers, 1977. 82.</span></span></p>
<p><span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marx</span></span> was famously brutal and scabrous in his take-downs, devoting <span class="reveal emoji"><span class="emoji">📕📗📘📙</span><span class="text">hundreds of pages</span></span> to figures that are now barely remembered, or remembered largely because <span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marx</span></span> took them down. But here our interest lies in the use of <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> and <span style="color: black;" class="reveal emoji" ><span class="emoji">?!</span><span class="text">!?</span></span> and <span style="color: black;" class="reveal emoji" ><span class="emoji">!?</span><span class="text">?!</span></span> and <span style="color: black;" class="reveal emoji" ><span class="emoji">!!</span><span class="text">??</span></span> and <span style="color: black;" class="reveal emoji" ><span class="emoji">?!?</span><span class="text">!?!</span></span> and <span style="color: black;" class="reveal emoji" ><span class="emoji">!!!</span><span class="text">???</span></span>. What is <span class="reveal emoji"><span class="emoji">🎅🏻</span><span class="text">Marx</span></span> signalling here<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> Disbelief in idiocy, incomprehension, mockery, but also perhaps a curious hope. Hope<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> Hope in a better analysis, one worthier of the world, one that will explain rather than mystify…</p>
</section>
<section id="part2">
<h2>Part 2: <span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span></h2>
<p>Are we today in need of more question mark<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> <span class="reveal emoji"><span class="emoji">👴🏻</span><span class="text">Klemperer</span></span> describes, as above, the question mark as being “in direct opposition to National Socialist intransigence and self-confidence.”<span class="reveal footnote"><span class="emoji">&#10116;</span><span class="text"><font size="5">&#10116;</font>Klemperer, Victor. Language of the Third Reich: LTI: Lingua Tertii Imperii. 74.</span></span> The question mark is itself a question, a kind of collapsed exclamation mark. A question mark can be an act of aggression or interruption: oh really<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> But it can also function as a kind of pause, a break in the horrible flow,<a class="ties" style="font-size: 16pt;" href = "../LIQUID/">L</a> the babble, the endless lies. The question mark is the person who says hang on, what is being said here<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span>, what is happening<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span>, is this okay<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> It is the question of the body that stands against the crowd, head bowed, frightened, but compelled by an inner question of their own is this the right thing, what they are saying<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> It is the feeling and the admission that one doesnt know, and the intuition that there might not be a simple answer to the situation. We are surrounded by people who want to give us their <span class="reveal emoji"><span class="emoji">📝</span><span class="text">solutions</span></span>, who tell us how things work, what we should think, how we should be, how we should behave. There are too few Socratic beings, and far too many <span class="reveal emoji"><span class="emoji">👍</span><span class="text">self-promoters</span></span>, <span class="reveal emoji"><span class="emoji">🤓</span><span class="text">charlatans</span></span>, <span class="reveal emoji"><span class="emoji">🐍</span><span class="text">snake-oil salesmen</span></span>, <span class="reveal emoji"><span class="emoji">🤥</span><span class="text">liars</span></span>, confidence <span class="reveal emoji"><span class="emoji">🧙</span><span class="text">tricksters</span></span>. We want to be nice, but we end up getting played. Anyone who claims to have the full picture is someone who wants an image of the world to dominate <a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a> you so you shut up or give them something they want. They are not your friends.</p>
<figure id="visual" class="left-aligned">
<img src="./images/ascii_artistresponse.jpg">
<figcaption>Artistic response of the text by Michiel Vandevelde</figcaption>
</figure>
<p>How to understand the question mark as a symbol, then, of trust<span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> There must be room for exploration, of a mutual, tentative openness.<a class="ties" style="font-size: 16pt;" href = "../ATATA/">A</a> A place where it is possible to say I dont know and not feel <span class="reveal emoji"><span class="emoji">😳</span><span class="text">ashamed</span></span> or <span class="reveal emoji"><span class="emoji">🙃</span><span class="text">ignorant</span></span>, or <span class="reveal emoji"><span class="emoji">🤡</span><span class="text">foolish</span></span>, or <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">unkind</span></span>. The internet is so often a place where people are shunned and shamed for asking questions, as if ignorance wasnt a condition for knowledge, and as if we never wanted anyone to go beyond the things everybody already understands. Sometimes <span class="reveal emoji"><span class="emoji">🙃</span><span class="text">ignorance</span></span> is in fact the greatest kind of <span class="reveal emoji"><span class="emoji">🧠</span><span class="text">intelligence</span></span>, and sometimes it is the most noble political strategy.<a class="ties" style="font-size: 16pt;" href = "../ECO-SWARAJ/">E</a> Philosophy and psychoanalysis tells us that, in any case, we in fact know less than we think we do know. Knowledge and understanding are not transparent processes: we bury and forget, we lose the ability to ask questions of ourselves, and we when we think we understand ourselves this is when we dismiss others. We want to think that we are solely good, that we have the right position, and that the others are wrong. But if we give up on our inner question mark, we become rigid, like the exclamation mark of condemnation. We forget that other people think differently<a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a> and that not everyone must think the same thing. We forget about friendship, flexibility, and forgiveness.</p>
<p>If we do not give ourselves enough time to think about the politics<a class="ties" style="font-size: 16pt;" href = "../HOPE/">H</a> of punctuation, we run the risk of being swept away on a <span class="reveal emoji"><span class="emoji">🌊</span><span class="text">wave</span></span> of someone elses desire.<a class="ties" style="font-size: 16pt;" href = "../TENSE/">T</a> We become passive <span class="reveal emoji"><span style="color: black;" class="emoji"></span><span class="text">pawns</span></span> and stooges. We become victims of the malign desires of others to silence us, to put us down, to make us terrified and confused. Punctuation is not merely linguistic, but imagistic and political<a class="ties" style="font-size: 16pt;" href = "../PRACTICAL_VISION/">P</a> through and through. The <span style="color: black;" class="reveal emoji" ><span class="emoji">!</span><span class="text">?</span></span> and the <span style="color: black;" class="reveal emoji" ><span class="emoji">?</span><span class="text">!</span></span> are signs among other signs, but their relation and their power course through us when we are least aware of it. When we are face to face, we can use our expressions, our <span class="reveal emoji"><span class="emoji">🧍</span><span class="text">body</span></span> as a whole, to dramatize these marks, with a raised eyebrow, a <span class="reveal emoji"><span class="emoji">👋</span><span class="text">gesture</span></span>, a shrug a complex combination of the two marks can appear in and about us. But we are apart much of the time, and we must rely on markers that do not capture our collective understanding. We must be in a mode of play with the words and the punctuation we use, to keep a certain openness, a certain <span class="reveal emoji"><span class="emoji">🤡</span><span class="text">humour</span></span>: not the cruelty of online life or the declarations<a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a> of the <span class="reveal emoji"><span class="emoji">💪</span><span class="text">powerful</span></span>, but the delicate <span class="reveal emoji"><span class="emoji">🤡</span><span class="text">humour</span></span> that includes the recognition that jokes are always <span class="reveal emoji"><span class="emoji">🤬</span><span class="text">aggressive</span></span>, and that we live permanently on the edge of <span class="reveal emoji"><span class="emoji">🔪</span><span class="text">violence</span></span>, but that we must be able to play if we are able to understand our <span class="reveal emoji"><span class="emoji">🚗</span><span class="text">drives</span></span>, and, at the same time, the possibility of living together differently.<a class="ties" style="font-size: 16pt;" href = "../UNDECIDABILITY/">U</a></p>
<h3>reinterpreted by Clara Gradel</h3>
</section>
</main>
<script type="text/javascript" src="./assets/script.js"></script>
</body>
</html>
<style>
@font-face {
font-family: wfdtf;
src: url(./assets/wftfs-Regular.otf)
}
a.ties{
font-family: wfdtf;
color: black;
}
</style>

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

@ -0,0 +1,681 @@
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js"></script>
<style>
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@page {
size: 420mm, 297mm;
margin: 0mm;
}
@media print {
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
@font-face {
font-family: 'EBGaramondregularitalic';
src: url('EBGaramond-Italic.ttf');
}
body {
padding: 2mm;
margin-top: 0;
margin-left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
text-align: left;
}
symbols {
font-size: 40pt;
line-height: 17pt;
font-family: 'WFTF';
}
symbol2 {
font-size: 36pt;
line-height: 17pt;
font-family: 'Custom';
}
indent {
color: blue;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
text-indent: 3mm;
}
.titlevertical {
writing-mode: vertical-rl;
display: none;
font-size: 48pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 17mm;
margin-top: 0mm;
}
.titleitalic {
font-family: 'EBGaramondregularitalic';
font-size: 16pt;
position: fixed;
top: 70mm;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 0mm;
margin-bottom: 10mm;
}
.titleverticalleft {
writing-mode: vertical-rl;
display: none;
font-size: 48pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 7mm;
margin-left: 0;
}
.title {
display: block;
font-size: 74pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 15mm;
margin-bottom: 10mm;
}
.titlebottom {
display: none;
font-size: 74pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 0;
left: 0;
margin-left: 10mm;
letter-spacing: -1px;
}
symbol {
font-family: 'WFTF';
font-size: 16pt;
text-align: center;
margin-left: 5mm;
margin-right: 5mm;
line-height: 20pt;
}
h1 {
color: black;
text-align: left;
font-size: 32pt;
line-height: 34pt;
z-index: 300;
font-family: 'Roboto';
}
h2 {
color: black;
text-align: left;
font-size: 16pt;
line-height: 18pt;
z-index: 300;
font-family: 'Robotobold';
}
p {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
p2 {
text-indent: 10mm;
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
p3 {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
p3special {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
padding-right: 10mm;
}
line {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
bold {
color: black;
text-align: left;
font-size: 173t;
line-height: 15pt;
z-index: 300;
font-family: 'Robotobold';
}
medium {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Robotomedium';
}
garamond {
font-family: 'EBGaramondregular';
}
brut {
font-family: 'Brut';
color: black;
text-align: left;
font-size: 13pt;
line-height: 15pt;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
padding: 100mm;
font-size: 24pt;
line-height: 28pt;
font-family: 'Roboto';
vertical-align:bottom;
}
.columnleft {
width: 25%;
margin-left: 10mm;
margin-top: 90mm;
margin-right: 5mm;
}
.columnmiddle {
width: 25%;
margin-top: 90mm;
}
.columnmiddle2 {
width: 25%;
margin-top: 90mm;
}
.columnright {
width: 25%;
margin-top: 10mm;
}
italic {
font-family: 'EBGaramonditalicsemi';
font-size: 16pt;
line-height: 17pt;
margin-left: 5mm;
}
bigitalic {
text-indent: 30mm;
font-family: 'EBGaramondregularitalic';
font-size: 16pt;
line-height:18pt;
}
bigitalicregular {
text-indent: 30mm;
font-family: 'EBGaramondregularitalic';
font-size: 16pt;
/*font-size: 27pt;
line-height:29pt;*/
}
bigp {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
bigmedium {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
columns: 3 ;
z-index: 300;
font-family: 'Robotomedium';
}
bigregular {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
columns: 3 ;
z-index: 300;
font-family: 'Roboto';
}
.screen {
display:none;
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
body{
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
position: absolute;
background: black;
width: 98%;
}
symbol {
display: none;
}
h1 {
display: none;
position: fixed;
background: blue;
color: black;
font-family: helvetica;
text-align: left;
line-height: 110%;
font-weight: 900;
position: fixed;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
top: 10px;
left: 10px;
z-index: 300;
}
.title {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Custom';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.titlevertical {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.screen {
display: block;
top: 0;
left: 0;
font-size: 60px;
font-family: 'Roboto';
color: white;
z-index: 10;
}
a {
color: grey;
}
.titleverticalleft {
display: none;
}
.titlebottom {
display: none;
}
h1 {
display:none;
}
h2 {
display:none;
}
p {
display:none;
}
p2 {
display:none;
}
p3 {
display:none;
}
p3special {
display:none;
}
line {
display:none;
}
bold {
display:none;
}
medium {
display:none;
}
garamond {
display:none;
}
brut {
display:none
}
* {
box-sizing: border-box;
}
.row:after {
display:none;
}
.column {
display:none;
}
.columnleft {
display:none;
}
.columnmiddle {
display:none;
}
.columnright {
display:none;
}
italic {
display:none;
}
bigitalic {
display:none;
}
bigp {
display:none;
}
bigmedium {
display:none;
}
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
vertical-align: text-bottom;
flex: 100%;
padding: 10px;
height: 180px; /* Should be removed. Only for demonstration */
}
</style>
</head>
</html>
<div><span class="screen">CTRL(⌘)+ P to print the A3 cover (W.I.P)<br>
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A3<br><br>
A3 Cover PDF<a href="A3COVER.pdf" target="blank">(here)</a><br><br>
Thank you!</span></div>
<!--WOr(L)DS foR THE FuTUrE--->
<div><span class="title">WOR(<symbol2>L</symbol2>)DS<br> FOR THE FUTURE</span><br>
<div><span class="titleitalic">A Republishing Tool Kit for an Imaginary Atlas</span></div>
<div><span class="titlevertical">WѺR(L)DS FҨӶ THξ FUTURЭ</span></div>
<div><span class="titleverticalleft">XPUB</span></div>
<div><span class="titlebottom">XPUB</span></div>
<body>
<div class="row">
<div class="columnleft" style="background-color:white;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<bigmedium>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Words have the power to shape reality. Wor(l)ds for the Future is a set of map making tools to reimagine and collect wor(l)ds and republish an everchanging atlas. We invite you to delve into the materials and traverse the texts in any way you desire: by cutting and pasting the printed matter, or by unravelling the texts online. The choice is yours. You can reconstruct images and reinterpret wor(l)ds, to create Wor(l)ds for the Future.<br><br>
</bigmedium><br><br>
</div>
<div class="columnmiddle " style="background-color:white;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<bigregular>This project is a republication of Words for the Future (2018), a multivoiced series of ten booklets. In the 2020 version, XPUB (Experimental Publishing) students from the Piet Zwart institute reinterpret the original material through methods such as annotating and prototyping in Python (a coding language we used to analyse text as texture). The ten booklets were cross-examined and mapped in order to find interconnections and links.<br><br>
We approached this project through the perspective of cartography. Alfred Korzybski wrote: "The map is not the territory". In other words, the description of the thing is not the thing itself. The model is not reality. Cartography always entails a selection and transformation of properties of a complex reality that affect the way maps partial views of reality are deciphered and received. With this notion in mind, we created a mapping to highlight our individual explorations and interpretations using a language of symbols created to represent our understanding of the original essays.<br><br>
A map could thus relate to something that no longer exists. It could also relate to something that does not yet exist. Maps could be seen as fictions therefore, as spaces for the imaginary.<br><br>
Join us to un-map and re-map an infinite amount of potential constellations of tomorrow, and to navigate speculative wor(l)ds which holds the capacity to bleed into the very fabric of our shared grounds.
<br><br>
<bigmedium>Online publication:</bigmedium><br>
https://hub.xpub.nl/sandbot/words-for-the-future/</bigregular>
</div>
<div class="columnmiddle2 " style="background-color:white;">
<h2></h2>
</div>
<div class="columnright">
<bigitalic>Legenda:</bigitalic>
<br><br><br>
<line>——————————————————————————————</line>
<br><br>
<symbol>L</symbol><italic>Liquid</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Kendal Beynon</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>T</symbol><italic>Tense</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Martin Foucaut</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>A</symbol><italic>Atata</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Camilo García A.</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>M</symbol><italic>!?</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Clara Gradel</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>U</symbol><italic>Undecidability</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Nami Kim</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>H</symbol><italic>Hope</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Euna Lee</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>O</symbol><italic>Otherness</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Jacopo Lega</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>P</symbol><italic>Practical Vision</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Federico Poni </p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>R</symbol><italic>Resurgence</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Louisa Teichmann</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>E</symbol><italic>Eco-Swaraj</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;by Floor van Meeuwen</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
</div>
</div>
</body>

@ -0,0 +1,659 @@
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js"></script>
<style>
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@page {
size: 420mm, 297mm;
margin: 0mm;
}
@media print {
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
body {
padding: 2mm;
margin-top: 0;
margin-left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
text-align: left;
}
symbols {
font-size: 100pt;
line-height: 100pt;
font-family: 'WFTF';
}
indent {
color: blue;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
text-indent: 3mm;
}
.titlevertical {
writing-mode: vertical-rl;
display: block;
font-size: 40pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 17mm;
margin-top: 0mm;
}
.titleverticalleft {
writing-mode: vertical-rl;
display: none;
font-size: 20pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 7mm;
margin-left: 0;
}
.title {
display: none;
font-size: 75pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
}
.titlebottom {
display: none;
font-size: 75pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
letter-spacing: -1px;
}
h1 {
color: black;
text-align: left;
font-size: 32pt;
line-height: 34pt;
z-index: 300;
font-family: 'Roboto';
}
h2 {
color: black;
text-align: left;
font-size: 13pt;
line-height: 15pt;
z-index: 300;
font-family: 'Robotobold';
}
p {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 13pt;
line-height: 15pt;
z-index: 300;
font-family: 'Roboto';
}
p2 {
text-indent: 10mm;
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
p3 {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
p3special {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
padding-right: 10mm;
}
line {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Roboto';
}
bold {
color: black;
text-align: left;
font-size: 11t;
line-height: 13pt;
z-index: 300;
font-family: 'Robotobold';
}
medium {
color: black;
text-align: left;
font-size: 11pt;
line-height: 13pt;
z-index: 300;
font-family: 'Robotomedium';
}
garamond {
font-family: 'EBGaramondregular';
}
brut {
font-family: 'Brut';
color: black;
text-align: left;
font-size: 13pt;
line-height: 15pt;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
padding: 100mm;
font-size: 24pt;
line-height: 28pt;
font-family: 'Roboto';
vertical-align:bottom;
}
.columnleft {
width: 30%;
margin-left: 10mm;
margin-top: 15mm;
}
.columnmiddle {
width: 30%;
margin-right: 5mm;
margin-left: 5mm;
margin-top: 15mm;
}
.columnright {
width: 30%;
margin-right: 30mm;
margin-top: 15mm;
}
italic {
font-family: 'EBGaramonditalicsemi';
font-size: 14pt;
line-height: 16pt;
margin-left: 5mm;
}
bigitalic {
text-indent: 30mm;
font-family: 'EBGaramonditalicsemi';
font-size: 19pt;
line-height:21pt;
}
bigp {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 16pt;
line-height: 18pt;
z-index: 300;
font-family: 'Roboto';
}
bigmedium {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 14pt;
line-height: 16pt;
z-index: 300;
font-family: 'Roboto';
}
.screen {
display:none;
}
symbol2 {
font-size: 25pt;
line-height: 17pt;
font-family: 'Custom';
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
body{
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
position: absolute;
background: black;
width: 98%;
}
h1 {
display: none;
position: fixed;
background: blue;
color: black;
font-family: helvetica;
text-align: left;
line-height: 110%;
font-weight: 900;
position: fixed;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
top: 10px;
left: 10px;
z-index: 300;
}
.title {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.titlevertical {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.screen {
display: block;
top: 0;
left: 0;
font-size: 60px;
font-family: 'Roboto';
color: white;
z-index: 10;
}
a {
color: grey;
}
.titleverticalleft {
display: none;
}
.titlebottom {
display: none;
}
h1 {
display:none;
}
h2 {
display:none;
}
p {
display:none;
}
p2 {
display:none;
}
p3 {
display:none;
}
p3special {
display:none;
}
line {
display:none;
}
bold {
display:none;
}
medium {
display:none;
}
garamond {
display:none;
}
brut {
display:none
}
* {
box-sizing: border-box;
}
.row:after {
display:none;
}
.column {
display:none;
}
.columnleft {
display:none;
}
.columnmiddle {
display:none;
}
.columnright {
display:none;
}
italic {
display:none;
}
bigitalic {
display:none;
}
bigp {
display:none;
}
bigmedium {
display:none;
}
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
vertical-align: text-bottom;
flex: 100%;
padding: 10px;
height: 180px; /* Should be removed. Only for demonstration */
}
</style>
</head>
</html>
<div><span class="screen">CTRL(⌘)+ P to print the A3 end credits (W.I.P)<br>
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A3<br><br>
A3 Cover PDF<a href="A3BACK.pdf" target="blank">(here)</a><br><br>
Thank you!</span></div>
<div><span class="title">WѺR(L)DS<br>FҨӶ THξ FUTURЭ</span></div>
<div><span class="titlevertical">WOR(<symbol2>L</symbol2>)DS FOR THE FUTURE</span></div>
<div><span class="titleverticalleft">XPUB</span></div>
<div><span class="titlebottom">XPUB 2020</span></div>
<body>
<div class="row">
<div class="columnleft" style="background-color:white;">
<h2>A pluralistic open license</h2>
<p3><medium> © 2020 XPUB - SPECIAL ISSUE 13</medium>
<br><br>
Permission is hereby granted, free of charge, to individual, group(s), and non-profit organization(s), obtaining a copy of this project, to use, copy, print, modify, merge, distribute, and/or sell contents or copies of the project, in whole or in parts, subject to the following conditions.</p3>
<br><br>
<p3><h2>We encourage you to: </h2>
&nbsp;&nbsp;&nbsp;introduce the project to your neighbours, friends, family, etc;<br><br>
&nbsp;&nbsp;&nbsp;translate the contents into other languages;<br><br>
&nbsp;&nbsp;&nbsp;create new dramaturgies (structures, stories, worlds) from the contents;<br><br>
&nbsp;&nbsp;&nbsp;extend this license, as long as the kinship, commercial use and attribution conditions remain in force.</p3>
<br><br>
<p3><h2>Kinship:</h2>
Kinship implies co-relations between Wor(l)ds For The Future and further distributions which will potentially be made.
If you want to republish and re-distribute the content, verbatim or derivative, we ask you to send us a copy. By copy we mean a copy of the republished content. For instance, if it is a print or a physical object please send it to XPUB/ WH4.141 t.a.v. Piet Zwart Institute/ WdKA/ Rotterdam Uni. Postbus 1272 300 BG Rotterdam, NL. If it is a file please send it to pzwart-info@hr.nl /attn: XPUB cc. If it is a change in a cloned git repository of the work, please send a patch so we can archive it in a branch. Which means, if you clone or download our git repos ( https://git.xpub.nl/XPUB/issue.xpub.nl/src/branch/master/13 ) to modify the project files, we ask you to send us the modifications so we can archive them as well.</p3>
<br><br>
<p3><h2>Commercial use:</h2>
Commercial use is only permitted if no profit is derived. Said differently, you can sell copies of the work only to cover the costs of the distribution, printing, production, needed to circulate copies of the work. We are asking you to be transparent about such expenses.</p3>
<br><br>
<p3><h2>Attribution:</h2>
The above copyright notice and this license shall be included in all copies or modified versions of the project. Any re-publication, verbatim or derivative, of the contents must explicitly credit the name(s) of the author(s) of WORDS FOR THE FUTURE, as well as those of the author(s) of WOR(L)DS FOR THE FUTURE. This attribution must make clear what changes have been made.</p3>
</div>
<div class="columnmiddle " style="background-color:white;">
<h2>Tutors:</h2>
<p3><medium>Aymeric Mansoux</medium></p3><br><br>
<p3><medium>Lídia Pereira</medium></p3><br><br>
<p3><medium>Manetta Berends</medium></p3><br><br>
<p3><medium>Michael Murtaugh</medium></p3><br><br>
<p3><medium>Steve Rushton</medium></p3><br><br>
<!-- <h2>Students:</h2>
<p3><medium>Camilo García</medium>&nbsp;&nbsp;&nbsp;Republishing response: ATATA / Print Production </p3><br><br>
<p3><medium>Clara Gradel</medium>&nbsp;&nbsp;&nbsp;Republishing response: !? </p3><br><br>
<p3><medium>Euna Lee</medium>&nbsp;&nbsp;&nbsp;Layout design, Glyph font desegn, xx, Republishing response: HOPE</p3><br><br>
<p3><medium>Federico Poni</medium>&nbsp;&nbsp;&nbsp;Republishing response: Practical Vision</p3><br><br>
<p3><medium>Jacopo Lega</medium>&nbsp;&nbsp;&nbsp;Launch department / Design department / Republishing response: Otherness</p3><br><br>
<p3><medium>Kendal Beynon</medium>&nbsp;&nbsp;&nbsp;Print Production, Copyediting / Republishing response: Liquid</p3><br><br>
<p3><medium>Louisa Teichmann</medium>&nbsp;&nbsp;&nbsp;Republishing response: Resurgence</p3><br><br>
<p3><medium>Martin Foucaut</medium>&nbsp;&nbsp;&nbsp;Republishing response: ATATA, Design department </p3><br><br>
<p3><medium>Nami Kim</medium>&nbsp;&nbsp;&nbsp;License, xx, xx, republishing response: UNDECIDABILITY </p3> -->
<h2>Print</h2>
<p3><medium>Print run:</medium> 100<br><br>
&nbsp;&nbsp;&nbsp;The risograph pages were printed on a Riso MZ1070 in van Beek paper of 120gr at Wdka Print Station<br><br>
&nbsp;&nbsp;&nbsp;The A0 poster was printed by ------<br><br>
<medium>Special Type set in:</medium> <br><br>
&nbsp;&nbsp;&nbsp;Custom Roboto (All caps Roboto with 10 custom characters made by XPUB1 students)<br><br>
&nbsp;&nbsp;&nbsp;wftfs regular ( 10 symbols made by XPUB1 students)<br><br>
<h2>Thanks</h2>
<medium>Made possible by Piet Zwart Institute</medium><br>
<br>
Rotterdam, NL<br>
Winter, 2020<br>
</p3>
</div>
<div class="columnright" style="background-color:white">
<h2>Words for the future (2017/18)</h2>
<p3>Curated and edited by Nienke Scholts, in collaboration with Veem Huis for Performance, designed and printend by THE FUTURE printing & publishing: www.nienkescholts.com/words-for-the-future<br><br>
<h2>Authors</h2></p3>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Liquid</italic><p2>&nbsp;&nbsp;&nbsp;Rachel Armstrong Andrea Božic & Julia Willms (TILT)</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Otherness</italic><p2>&nbsp;&nbsp;&nbsp;Daniel L. Everett, Sarah Moeremans</p2><br>
<br><br>
<line>————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&nbsp;<italic>Practical Vision</italic><p2>&nbsp;&nbsp;&nbsp;Moses Kilolo (Jalada), Klara van Duijkeren & Vincent Schipper (The Future)</p2><br>
<br><br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Eco-Swaraj</italic><p2>&nbsp;&nbsp;&nbsp;Ashish Kothari, Rodrigo Sobarzo</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Hope</italic><p2>&nbsp;&nbsp;&nbsp;by Gurur Ertem, Ogutu Murayalink</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Undecidability</italic><p2>&nbsp;&nbsp;&nbsp;Silvia Bottiroli, Jozef Wouters</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Resurgence</italic><p2>&nbsp;&nbsp;&nbsp;Isabelle Stengers, Ola Macijewska</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>!?</italic><p2>&nbsp;&nbsp;&nbsp;Nina Power, Michiel Vandeveldelink</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Atata</italic><p2>&nbsp;&nbsp;&nbsp;Natalia Chavez Lopez, Hilda Moucharrafieh</p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
<brut>🡢</brut>&nbsp;<italic>Tense</italic><p2>&nbsp;&nbsp;&nbsp;Simon(e) van Saarloos, Eilit Marom & Anna Massoni<br> & Elpida Orfanidou & Adina Secretan & Simone Truong </p2><br>
<br>
<line>————————————————————————————————————————</line>
<br><br>
</div>
</div>
</body>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,659 @@
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js"></script>
<style>
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@page {
size: 420mm, 297mm;
margin: 0mm;
}
@media print {
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Sinistre';
src: url('Sinistre-S†Caroline.otf');
}
symbol {
font-family: 'WFTF';
font-size: 25pt;
text-align: center;
margin-left: 5mm;
margin-right: 5mm;
padding-top: 5mm;
line-height: 27pt;
}
body {
padding: 2mm;
margin-top: 0;
margin-left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
border: solid 1px #000;
text-align: left;
}
symbols {
font-size: 100pt;
line-height: 100pt;
font-family: 'WFTF';
}
indent {
color: blue;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
text-indent: 3mm;
}
.titlevertical {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 0mm;
}
.titleverticalleft {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-right: 0;
}
.title {
display: block;
font-size: 75pt;
line-height: 170pt;
letter-spacing: normal;
font-family: 'Custom';
top: 0;
right: 0;
margin-bottom: 10mm;
margin-right: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
}
.titlebottom {
display: block;
font-size: 12pt;
line-height: 14pt;
position: fixed;
font-family: 'Roboto';
bottom: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-right: 10mm;
}
h1 {
color: black;
text-align: left;
font-size: 32pt;
line-height: 34pt;
z-index: 300;
font-family: 'Roboto';
}
h2 {
color: black;
text-align: left;
font-size: 26pt;
line-height: 28pt;
z-index: 300;
font-family: 'Robotobold';
}
p {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
} p12 {
color: black;
text-align: left;
font-size: 10pt;
line-height: 12pt;
z-index: 300;
font-family: 'Roboto';
}
p13 {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 10pt;
line-height: 12pt;
z-index: 300;
font-family: 'Robotomedium';
}
p2 {
text-indent: 15mm;
color: black;
text-align: left;
font-size: 14pt;
line-height: 16pt;
z-index: 300;
font-family: 'Roboto';
}
p3 {
color: black;
text-align: left;
font-size: 14pt;
line-height: 16pt;
z-index: 300;
font-family: 'Roboto';
}
p3special {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
padding-right: 20mm;
}
line {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
bold {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotobold';
}
medium {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotomedium';
}
garamond {
font-family: 'EBGaramondregular';
}
brut {
font-family: 'Brut';
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
padding: 100mm;
font-size: 24pt;
line-height: 28pt;
font-family: 'Roboto';
vertical-align:bottom;
}
.columnleft {
width: 15%;
margin-left: 10mm;
margin-top: 10mm;
text-align: justify;
text-justify: inter-word;
}
.columnleft2 {
width: 20%;
margin-left: 10mm;
text-align: justify;
text-justify: inter-word;
}
.columnmiddle {
width: 10%;
margin: 10mm;
}
.columnright {
width: 55%;
margin-right: 10mm;
}
italic {
font-family: 'EBGaramonditalic';
font-size: 24pt;
line-height: 26pt;
}
bigitalic {
text-indent: 30mm;
font-family: 'EBGaramonditalicsemi';
font-size: 52pt;
line-height:54pt;
}
bigp {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
bigmedium {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
.screen {
display:none;
}
back {
color: blue;
background: blue;
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Sinistre';
src: url('Sinistre-S†Caroline.otf');
}
body{
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
position: absolute;
background: black;
width: 98%;
}
h1 {
display: none;
position: fixed;
background: blue;
color: black;
font-family: helvetica;
text-align: left;
line-height: 110%;
font-weight: 900;
position: fixed;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
top: 10px;
left: 10px;
z-index: 300;
}
.title {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Custom';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.titlevertical {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.screen {
display: block;
top: 0;
left: 0;
font-size: 60px;
font-family: 'Roboto';
color: white;
z-index: 10;
}
a {
color: grey;
}
.titleverticalleft {
display: none;
}
.titlebottom {
display: none;
}
h1 {
display:none;
}
h2 {
display:none;
}
p {
display:none;
}
p2 {
display:none;
}
p3 {
display:none;
}
p3special {
display:none;
}
line {
display:none;
}
bold {
display:none;
}
medium {
display:none;
}
garamond {
display:none;
}
brut {
display:none
}
* {
box-sizing: border-box;
}
.row:after {
display:none;
}
.column {
display:none;
}
.columnleft {
display:none;
}
.columnleft2 {
display:none;
}
.columnmiddle {
display:none;
}
.columnright {
display:none;
}
italic {
display:none;
}
bigitalic {
display:none;
}
bigp {
display:none;
}
bigmedium {
display:none;
}
symbol {
display: none;
}
back {
display: none;
}
p12 {
display: none;
}
p13 {
display: none;
}
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
vertical-align: text-bottom;
flex: 100%;
padding: 10px;
height: 180px; /* Should be removed. Only for demonstration */
}
</style>
</head>
</html>
<div><span class="screen">CTRL(⌘)+ P to print the A0 grid (W.I.P)<br>
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A0<br><br>
A0 Grid PDF<a href="A0Grid_Wor(l)ds_For_The_Future.pdf" target="blank">(here)</a>
<br>
Thank you!
</span></div>
<!--<div><span class="titlevertical">WѺR(L)DS FҨӶ THξ FUTURЭ</span></div>-->
<!--<div><span class="titleverticalleft">XPUB 2020</span></div>-->
<div><span class="titlebottom">WOR(L)DS FOR A FUTURE is a re-publishing project compiled by the first year students and mentoring team of the Master programme Experimental Publishing (XPUB) of the Piet Zwart Institute, Willem de Kooning Academy, as part of the Special Issue project #13. The project aims to explore the re-publishing of the publication series Words for the Future through the students' discursive and artistic responses to the original collection.<br></span></div>
<body>
<div class="row">
<div class="columnleft" style="background-color:white">
<p3>
<symbol>L</symbol>&#9;<italic>Liquid</italic><br><p2><br>This symbol represents a perpetual state of flux between information and ideas.
<br>
The output transforms into input that flows in self-sustaining circularities, thus, shaping a series of dynamic feedback loops to create new meaning.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>O</symbol>&#9;<italic>Otherness</italic><br><p2><br>Shaped as a small, autonomous community, with its specific identity. Small communities could be developed close to each other, but only on the same strip of land. If theyre adjacent they build a network to share resource and culture.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>P</symbol><italic>Practical Vision</italic><br><p2><br>Practical Vision symbol sets a series of communication skills: when two Practical Visions watch theirself they create translations between different languages. A Practical Vision attempts to protect past and future cultures and works through organic and inorganic networks.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>E</symbol>&#9;<italic>Eco-Swaraj</italic><br><p2><br>Self-decision making in an eco community is what Eco Swaraj is about. This symbol could be seen as a flower, people holding hands, a thought before a decision is being made.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>H</symbol>&#9;<italic>Hope</italic><br><p2><br>This symbol illustrates the destination of Hope, written by Gurur Ertem. The author considers it as a solution
to overcome the darkness in our present and future life.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>U</symbol>&#9;<italic>Undecidability</italic><br><p2><br>As undecidability embraces opend imaginaries and multiplicities, the symbol was inspired by fog, the nature element.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>R</symbol>&#9;<italic>Resurgence</italic><br><p2><br>This volcano depicts the legendary moment of long forgotten matter finally breaking through its suffocating covers, forcefully spilling out into the open with the heat of a thousand suns.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>M</symbol>&#9;<italic>!?</italic><br><p2><br>This is a descritpion of !?: Et mi, voluptatum fugia voluptat.
Enet enturerum vendam, temolup taecatem cum iumendent, omnitibus et, conse pre doluptatem voloris doluptas audaepe rorepra dolorest optiaeri veliquam ex etur.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>A</symbol>&#9;<italic>Atata</italic><br><p2><br>atatas symbol represents being in relation to ohers as an active act of reciprocity, It binds, connects and links beings.</p2>
<br><br>
<line>—————————————————————————</line>
<br><br>
<symbol>T</symbol>&#9;<italic>Tense</italic><br><p2><br>Tense's symbol depicts the encapsulation of a content/subject inside a meta-description</p2>
<br><br>
<line>—————————————————————————</line>
</p3>
</div>
<div class="columnleft2" style="background-color:white;">
</div>
<div class="columnmiddle" style="background-color:white;">
</div>
<div class="columnright " style="background-color:white;">
<span class="title">WOr(L)DS<br>FoR THE FuTUrE</span>
<!--<italic>This is your blank map for re-imagine and re-draw the future. Use the provided system of symbols and elements from the different words explorations to help you mapping new Wor(l)d.</italic> -->
</div>
</div>
</body>

@ -0,0 +1,871 @@
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js"></script>
<style>
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@page {
size: 420mm, 297mm;
margin: 0mm;
}
@media print {
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
body {
padding: 2mm;
margin-top: 0;
margin-left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
border: solid 1px #000;
text-align: left;
}
symbols {
font-size: 100pt;
line-height: 100pt;
font-family: 'WFTF';
}
indent {
color: blue;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
text-indent: 3mm;
}
.titlevertical {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 0mm;
}
.titleverticalleft {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-right: 0;
}
.title {
display: block;
font-size: 250pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
}
.titlebottom {
display: block;
font-size: 250pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
letter-spacing: -10px;
}
h1 {
color: black;
text-align: left;
font-size: 32pt;
line-height: 34pt;
z-index: 300;
font-family: 'Roboto';
}
h2 {
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Robotobold';
}
p {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
p2 {
text-indent: 10mm;
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
p3 {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
p3special {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
padding-right: 20mm;
}
line {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
bold {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotobold';
}
medium {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotomedium';
}
garamond {
font-family: 'EBGaramondregular';
}
brut {
font-family: 'Brut';
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
padding: 100mm;
font-size: 24pt;
line-height: 28pt;
font-family: 'Roboto';
vertical-align:bottom;
}
.columnleft {
width: 60%;
margin-left: 10mm;
}
.columnmiddle {
width: 10%;
}
.columnright {
width: 30%;
margin-right: 10mm;
}
italic {
font-family: 'EBGaramonditalic';
font-size: 24pt;
line-height: 26pt;
}
bigitalic {
text-indent: 30mm;
font-family: 'EBGaramonditalicsemi';
font-size: 52pt;
line-height:54pt;
}
bigp {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
bigmedium {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
.screen {
display:none;
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
body{
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
position: absolute;
background: black;
width: 98%;
}
h1 {
display: none;
position: fixed;
background: blue;
color: black;
font-family: helvetica;
text-align: left;
line-height: 110%;
font-weight: 900;
position: fixed;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
top: 10px;
left: 10px;
z-index: 300;
}
.title {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.titlevertical {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.screen {
display: block;
top: 0;
left: 0;
font-size: 60px;
font-family: 'Roboto';
color: white;
z-index: 10;
}
a {
color: grey;
}
.titleverticalleft {
display: none;
}
.titlebottom {
display: none;
}
h1 {
display:none;
}
h2 {
display:none;
}
p {
display:none;
}
p2 {
display:none;
}
p3 {
display:none;
}
p3special {
display:none;
}
line {
display:none;
}
bold {
display:none;
}
medium {
display:none;
}
garamond {
display:none;
}
brut {
display:none
}
* {
box-sizing: border-box;
}
.row:after {
display:none;
}
.column {
display:none;
}
.columnleft {
display:none;
}
.columnmiddle {
display:none;
}
.columnright {
display:none;
}
italic {
display:none;
}
bigitalic {
display:none;
}
bigp {
display:none;
}
bigmedium {
display:none;
}
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
vertical-align: text-bottom;
flex: 100%;
padding: 10px;
height: 180px; /* Should be removed. Only for demonstration */
}
</style>
</head>
</html>
<div><span class="screen">CTRL(⌘)+ P to print the A0 colophon (W.I.P)<br>
A3 colophon cover in progress.<a href="A3colophon.html" target="blank">(here)<br></a>
A3 colophon end credits in progress.<a href="A3colophoncredits.html" target="blank">(here)<br><br></a>
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A0<br><br>
A0 Colophon PDF<a href="Wor(l)ds_For_The_Future_Colophon.pdf" target="blank">(here)</a><br>
A0 Grid PDF<a href="A0Grid_Wor(l)ds_For_The_Future.pdf" target="blank">(here)</a><br><br>
A0 Grid html <a href="grid.html" target="blank">(here)<br><br></a>
Thank you!</span></div>
<div><span class="title">WѺR(L)DS<br>FҨӶ THξ FUTURЭ</span></div>
<div><span class="titlevertical">WѺR(L)DS FҨӶ THξ FUTURЭ</span></div>
<div><span class="titleverticalleft">XPUB 2020</span></div>
<div><span class="titlebottom">XPUB 2020</span></div>
<body>
<div class="row">
<div class="columnleft" style="background-color:white;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2></h2>
<bigp><bigmedium>In a world in which words have the power to shape our lived reality, we are proposing a set of building blocks to reinvision this common landscape, a landscape of a future unknown. Join us and un-map, re-map and re-map an inifinite amount of potential constellations, to navigate a not yet defined world which holds the potential to bleed into the fabric of our shared grounds.</bigmedium></bigp><br><br>
<bigitalic>"The map of reality is not reality, since the description of the thing is not the thing itself. Its all about interpretation: symbols, parameters, grids. With the lack of interpretation comes the space for the individual abstraction. The abstraction, together with the enforcement of new values and parameters, create new landscapes and possibilities for the future."</bigitalic><br><br>
<br>
<br>
<br>
<p3><bold>WOR(L)DS FOR THE FUTURE</bold> is a re-publishing project compiled by the first year XPUB MA students and mentoring team as part of the special issue project #13.<br>
The project aims to explore how re-publishing can resonate with the students artistic responses to the original project, as well as how it could be made accessible to a wider audience.<br>
Together, the ten original essays desirably imply a respectful and unruled future, therefore the XPUB students agree that the republishing project can be poetically themed with counter-hegemonism.<br>
The project will hopefully be considered as a beacon of hope for both the present and the future.</p3>
<br><br><br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>Guests & teachers:</h2>
<bigp>Nienke Scholts, Aymeric Mansoux, Steve Rushton, Lidia Pereira, Manetta Berends, Michael Murtaugh</bigp><br>
<br>
<h2>Online publication:</h2>
<bigp>https://hub.xpub.nl/sandbot/words-for-the-future/</bigp></div>
<div class="columnmiddle " style="background-color:white;">
<h2></h2>
<!-- <p3special>
<bold>WOR(L)DS FOR THE FUTURE</bold> is a re-publishing project compiled by the first year XPUB MA students and mentoring team as part of the special issue project #13.<br>
The project aims to explore how re-publishing can resonate with the students artistic responses to the original project, as well as how it could be made accessible to a wider audience.<br>
Together, the ten original essays desirably imply a respectful and unruled future, therefore the XPUB students agree that the republishing project can be poetically themed with counter-hegemonism.<br>
The project will hopefully be considered as a beacon of hope for both the present and the future.
</p3special>-->
</div>
<div class="columnright" style="background-color:white">
<h2>Wor(l)ds for the Future [2020]</h2>
<p3><medium>This is is a re-publishing project compiled by the first year XPUB MA students and mentoring team as part of the special ISSUE #13.</medium><br>
Re-Publishing Responses:</p3>
<br><br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Liquid</italic><br><p2> Kendal</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Otherness</italic><br><p2> Jacopo</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Practical</italic><br><p2> Federico</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Eco-Swaraj</italic><br><p2> Floor</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Hope</italic><br><p2> Euna</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Undecidability</italic><br><p2> Nami</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Resurgence</italic><br><p2> Louisa</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>!?</italic><br><p2> Clara</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Atata</italic><br><p2> Camilo </p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>Tense</italic><br><p2> Martin</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br><br>
<h2>Words for the future [2016]</h2>
<p3>directed by Nienke Scholts<br>
<br>
AUTHORS:<br></p3>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>LIQUID</italic><br><p2>
Rachel Armstrong Andrea Božic & Julia Willms (TILT)</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>OTHERNESS</italic><br><p2>
Daniel L. Everett, Sarah Moeremansl</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>PRACTICAL VISION</italic><br><p2> Moses Kilolo (Jalada), Klara van Duijkeren & Vincent Schipper (The Future)</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>ECO-SWARAJA</italic><br><p2>
shish Kothari, Rodrigo Sobarzo</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>HOPE</italic><br><p2> Gurur Ertem, Ogutu Murayalink</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>TENSE</italic><br><p2>
Simon(e) van Saarloos, Eilit Marom & Anna Massoni & Elpida Orfanidou & Adina Secretan & Simone Truong</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>UNDECIDABILITY</italic><br><p2>
Silvia Bottiroli, Jozef Wouters</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>RESURGENCE</italic><br><p2>
Isabelle Stengers, Ola Macijewska</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>!?</italic><br><p2>
Nina Power, Michiel Vandeveldelink</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<brut>🡢</brut>&#9;<italic>ATATA</italic><br><p2>
Natalia Chavez Lopez, Hilda Moucharrafieh</p2><br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<p3>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>Published by XPUB1 students</h2>
<p3><medium>Print run</medium>: 100<br>
<br>
The risograph pages were printed on a Riso MZ1070 in van Beek paper of 120gr at Wdka Print Station<br>
<br>
The A0 poster was printed by ------<br>
<br>
Special Type set in: <br>
<br>
Custom Roboto (All caps Roboto with 10 custom characters made by XPUB1 students)<br>
<br>
wftfs regular ( 10 symbols made by XPUB1 students)<br>
<br>
Made possible by Piet Zwart Institute<br>
<br>
<line>———————————————————————————————————————————————————————————————</line>
<br>
<br>
<br>
Rotterdam, NL<br>
Winter, 2020<br></p3>
</p3></div>
</div>
</body>

Binary file not shown.

BIN
DRAW/.DS_Store vendored

Binary file not shown.

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wor(l)ds for the Future</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="plain-draggable.min.js"></script>
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body>
<map name="image-map">
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
</map>
<div id="container">
<p id="atata">Atata</p><br>
<p id="Liquid">Liquid</p><br><br>
<p id="!?">!?</p><br><br>
<p id="Otherness">Otherness</p><br><br><br><br><br>
<img id="Resurgence" src="grab.png">
<img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png">
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png">
<img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png">
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png">
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png">
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png">
</div>
<script src="script.js"></script>
</body>
</html>

@ -0,0 +1,353 @@
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
#atata {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#symbolA {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolA2 {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolL {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolO {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolE {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolM {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolT {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolH {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolP {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolR {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolU {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#Liquid {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Otherness {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Eco {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#M {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Tense {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Hope {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Practical{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Resurgence1{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Undecidability{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
text{
font-family:'Roboto';
font-size: 5em;
color: purple;
line-height: 100%;
margin-left: 1%;
}
.colophon {
position: fixed;
bottom: 1%;
right: 1%;
}
.licenses {
position: fixed;
bottom: 1%;
left: 1%;
}
.about {
position: fixed;
top: 1%;
right: 1%;
}
:root{
font-family:'Roboto';
--regular: 20%;
}
body{
/*pointer-events: none;*/
margin: 0 ;
height: 100vh;
width: 100vw;
background-color: var(--background-color);
background-image: url('grid.png');
background-size: 8vw;
overflow-y: hidden;
}
p{
font-family:'Roboto';
line-height: 120%;
}
#pic {
width: 100px;
}
.pic {
width: 100px;
}
#container{
z-index: 1;
line-height: 100%;
}
#background{z-index: 0;}
#map{width: 100%;
height: auto;}
p:hover{box-shadow: 0px 0px 40px black}
button{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
button1{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
top: 1%;
left: 30px;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
button3{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
bottom: 1%;
left: 90px;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
.container{z-index:15; position: absolute;
height: 50%;
width: 50%;
padding: 10px;
z-index: 10;
color: black;
position:fixed;
border-radius: 10px;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:white;
resize: both;
visibility: hidden;
opacity: 0;
top: 50%;
left: 50%;
z-index:10;
transform: translate(-50%, -50%);}
.close{font-size: 1em;
color: white;top: 2%;
right: 2%;}
span{color: white;
}
.intro{z-index:15; position: absolute;
height: 70%;
width: 70%;
padding: 10px;
z-index: 10;
color: black;
position:fixed;
border-radius: 10px;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:white;
resize: both;
visibility: hidden;
opacity: 0;
top: 50%;
left: 50%;
z-index:10;
transform: translate(-50%, -50%);
overflow-x: hidden;
resize: both;
visibility: visible;
opacity: 1;}
.enter{font-size: 1em;top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
#close{ position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
color: black;
bottom: 1%;
text-align: right;
font-size: 0.5vw;
text-decoration: none;
margin-bottom: 0.1vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0)}

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wor(l)ds for the Future</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="plain-draggable.min.js"></script>
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/>
</head>
<body>
<map name="image-map">
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
</map>
<div id="container">
<p id="atata">Atata</p><br>
<p id="Liquid">Liquid</p><br><br>
<p id="!?">!?</p><br><br>
<p id="Otherness">Otherness</p><br><br><br><br><br>
<img id="Resurgence" src="grab.png">
<img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png">
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png">
<img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png">
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png">
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png">
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png">
</div>
<button id="practical" onclick=""><b>Practical Visions</b></button>
<button id="complexities" onclick=""><b>Complexities</b></button>
<button id="gramviz" onclick=""><b>A Data Visualization</b></button>
<button id="collang" onclick=""><b>Colonial Languages</b></button>
<button id="bot" onclick=""><b>Practical Bot</b></button>
<button class="colophon"><b>Colophon</b></button>
<div class="container">THIS IS THE COLOPHON
<span class="close"><button> &times;</button></span>
<div>
<div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> <div>
<script>
const button = document.querySelector(".colophon");
const container = document.querySelector(".container");
const close = document.querySelector(".close");
//const trailer2 = document.querySelector(".trailer2");
//const close2 = document.querySelector(".close2");
button.addEventListener('click', () =>{
container.style.visibility = "visible";
container.style.opacity = 1;
});
close.addEventListener('click', () =>{
container.style.visibility = "hidden";
container.style.opacity = 0;
});
//close2.addEventListener('click', () =>{
//trailer2.style.visibility = "hidden";
//trailer2.style.opacity = 0;
//coin3.style.visibility = "visible";
//coin3.style.opacity = 1;
</script>
<script src="script.js"></script>
</body>
</html>

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wor(l)ds for the Future</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="plain-draggable.min.js"></script>
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/>
</head>
<body>
<map name="image-map">
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
</map>
<div id="container">
<p id="atata">Atata</p><p id="symbolA">A</p><br><br><br>
<p id="Liquid">Liquid</p><p id="symbolL">L</p><br><br><br>
<p id="Otherness">Otherness<p id="symbolO">O</p><br><br><br>
<p id="Eco">Eco-Swaraj<p id="symbolE">E</p><br><br><br>
<p id="M">!?<p id="symbolM">M</p><br><br><br>
<p id="Tense">Tense<p id="symbolT">T</p><br><br><br>
<p id="Hope">Hope<p id="symbolH">H</p><br><br><br>
<p id="Practical">Practical Vision<p id="symbolP">P</p><br><br><br>
<p id="Resurgence1">Resurgence<p id="symbolR">R</p><br><br><br>
<p id="Undecidability">Undecidability<p id="symbolU">U</p><br><br><br><br><br><br>
<!--<img id="Resurgence" src="grab.png"><br><br>
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png"><br><br>
<br><br>
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png"><br><br>
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png"><br><br>
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png"><br><br>-->
</div>
<div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> </div>
<button class="about" onclick=""><b>About</b></button>
<div class="container"><span class="close"><button> &times;</button></span>THIS IS ABOUT </div>
<button class="colophon"><b>Colophon</b></button>
<div class="container">
<p> THIS IS THE COLOPHON</p> <span class="close"><button id="close"> &times;</button></span>
<div>
<button class="licenses" onclick=""><b>Licenses</b></button></div>
<div class="container"><p> THIS IS THE LICENSES </p><span class="close"><button> &times;</button></span></div>
<script src="script.js"></script>
<script>
const button = document.querySelector(".colophon");
const container = document.querySelector(".container");
const close = document.querySelector(".close");
const enter = document.querySelector(".enter");
const intro = document.querySelector(".intro");
button.addEventListener('click', () =>{
container.style.visibility = "visible";
container.style.opacity = 1;
});
button.addEventListener('click', () =>{
container.style.visibility = "visible";
container.style.opacity = 1;
});
close.addEventListener('click', () =>{
container.style.visibility = "hidden";
container.style.opacity = 0;
});
enter.addEventListener('click', () =>{
intro.style.visibility = "hidden";
intro.style.opacity = 0;
});
</script>
</body>
</html>

@ -0,0 +1,429 @@
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
.grab{
cursor: grab;
}
#atata {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#symbolA {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolA2 {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolL {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolO {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolE {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolM {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolT {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolH {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolP {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolR {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#symbolU {
font-family:'WFTF';
font-size: 3em;
margin-left: 15%;
}
#Liquid {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Otherness {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Eco {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#M {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Tense {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Hope {
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Practical{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Resurgence1{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
#Undecidability{
font-family:'Roboto';
font-size: 3em;
line-height: 100%;
margin-left: 1%;
}
text{
font-family:'Roboto';
font-size: 5em;
color: purple;
line-height: 100%;
margin-left: 1%;
}
.colophon {
position: fixed;
bottom: 1%;
right: 1%;
}
.licenses {
position: fixed;
bottom: 1%;
left: 1%;
}
.about {
position: fixed;
top: 1%;
right: 1%;
}
:root{
font-family:'Roboto';
--regular: 20%;
}
body{
/*pointer-events: none;*/
margin: 0 ;
height: 100vh;
width: 100vw;
background-color: var(--background-color);
background-image: url('grid.png');
background-size: 8vw;
overflow-y: hidden;
}
p{
font-family:'Roboto';
line-height: 120%;
}
#pic {
width: 100px;
}
.pic {
width: 100px;
}
#container{
z-index: 1;
line-height: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#background{
z-index: 0;
}
#map{
width: 100%;
height: auto;}
p:hover{
box-shadow: 0px 0px 40px black;
}
button{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
button1{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
top: 1%;
left: 30px;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
button3{
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 0.5vw 1.3em;
color: black;
bottom: 1%;
left: 90px;
font-size: 1.5vw;
text-decoration: none;
margin-bottom: 1.5vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
}
.container{
z-index:15;
position: absolute;
overflow: scroll;
font-size: 2em;
line-height: 100%;
color: blue;
height: 97%;
width: 20%;
padding: 10px;
margin-top: 3.5%;
z-index: 10;
color: #242322;
position:fixed;
right: 0.01px;
border-radius: 2px;
top: 10px;
opacity: 1;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:#bbb9c17d;
overflow: scroll;
overflow-x: hidden;
resize: both;
visibility: hidden;
opacity: 0;
}
.container2{
z-index:15;
position: absolute;
overflow: scroll;
color: blue;
height: 97%;
width: 20%;
padding: 10px;
z-index: 10;
color: #242322;
position:fixed;
left: 0.01px;
border-radius: 2px;
top: 10px;
opacity: 1;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:#bbb9c17d;
overflow: scroll;
overflow-x: hidden;
resize: both;
visibility: hidden;
opacity: 0;
}
.container3{
z-index:15;
position: absolute;
overflow: scroll;
color: blue;
height: 97%;
width: 20%;
padding: 10px;
z-index: 10;
color: #242322;
position:fixed;
right: 0.01px;
border-radius: 2px;
top: 10px;
opacity: 1;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:#bbb9c17d;
overflow: scroll;
overflow-x: hidden;
resize: both;
visibility: hidden;
opacity: 0;
}
.close{
font-size: 2em;
margin-left: 1%;
position: relative;
}
}
.intro{
z-index:15; position: absolute;
height: 70%;
width: 70%;
padding: 10px;
z-index: 10;
color: black;
position:fixed;
border-radius: 10px;
padding: 1em;
box-shadow: 0 0 40px #214c12;
background-color:white;
resize: both;
visibility: hidden;
opacity: 0;
top: 50%;
left: 50%;
z-index:10;
transform: translate(-50%, -50%);
overflow-x: hidden;
resize: both;
visibility: visible;
opacity: 1;
}
.enter{
font-size: 1em;top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#close{
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
color: black;
bottom: 1%;
text-align: right;
font-size: 0.5vw;
text-decoration: none;
margin-bottom: 0.1vw;
background-color: transparent;
border-radius: 40px;
-webkit-box-shadow: 15px 15px 15px 15px;
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0)
}

@ -0,0 +1,104 @@
//DRAG & DROPs
draggable = new PlainDraggable(document.getElementById('atata'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('Liquid'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('M'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('Otherness'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
//draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('Resurgence'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic2'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic3'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic4'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic5'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic6'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
//P5 DRAWING
// var numberOfRows; //determine the number of rows we want
// var numberOfColumns; //determine the number of columns we want
// var xStep; //determine the size of the gap between two points on the x axis
// var yStep; //determine the size of the gap between two points on the y axis
// var positions = []; //an array of positions where we will store each of our Vectors
function setup() {
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style('z-index', '-10');
background(0,0,0,0);
// numberOfColumns = 10; //we want 16 columns
// numberOfRows = 10; //we want 9 rows
// xStep = windowWidth/numberOfColumns; //to make sure they are evenly spaced, we divide the width and height by numberOfColumns
// yStep = windowHeight/numberOfRows; //and numberOfRows respectively
// for(var x = 0; x < width; x += xStep){ //start at the first column, where x = 0
// for(var y = 0; y < height; y += yStep){ //go through all the rows (y = 0, y = yStep * 1, y = yStep * 2, etc.)
// var p = createVector(x, y); //we create a vector at this location
// positions.push(p); // and then we put the vector into the array
// }
// //at the end of the inner for loop, we go back to the first loop, and we increment x
// //now our column is going to be x = xStep*1, and we populate all the rows with the inner for loop
// //and again, and again until x > width
// }
}
function draw() {
fill(0,0,0);
// for(var i = 0; i < positions.length; i++){ //go through all our positions
// ellipse(positions[i].x, positions[i].y, 2000, 2); //put a circle at each of them
// }
// for(var i = 0; i < positions.length; i++){ //go through all our positions
// ellipse(positions[i].x, positions[i].y, 2, 2000); //put a circle at each of them
// }
if (mouseIsPressed === true) {
stroke(0);
strokeWeight(3)
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

@ -0,0 +1,33 @@
:root{
font-family: Arial, Helvetica, sans-serif;
--background-color: white
}
body{
margin: 0 ;
height: 100%;
width: 100%;
background-color: var(--background-color);
background-image: url('map.png');
background-size: 100%;
background-repeat: no-repeat;
height: auto;
overflow: hidden;
/* filter: invert(); */
}
#pic{width: 100px;}
.pic{width: 100px;}
#container{z-index: 1;}
#background{z-index: 0;}
#map{width: 100%;
height: auto;}
p:hover{box-shadow: 0px 0px 40px black}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080">
<rect fill="rgb(0,0,0)" fill-opacity="0" stroke="none" width="1920" height="1080"/>
<ellipse fill="none" stroke="rgb(0,0,0)" stroke-width="0.029999999" stroke-miterlimit="0" transform="matrix(540 0 0 540 960 540)" cx="0" cy="0" rx="0.97000003" ry="0.97000003"/>
<ellipse fill="rgb(0,0,0)" stroke="none" transform="matrix(523.035 -134.293 134.293 523.035 960 540)" cx="0.37" cy="0.050000012" rx="0.30500001" ry="0.57999998"/>
</svg>

After

Width:  |  Height:  |  Size: 586 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save