You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

697 lines
18 KiB
HTML

<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;
4 years ago
}
.title2 {
display: block;
font-size: 33pt;
line-height: 70pt;
position: fixed;
letter-spacing: normal;
font-family: 'Custom';
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--->
4 years ago
<div><!--<span class="title2">WOr(L)DS<br>foR THE FuTUrE-</span><br>--->
<span class="title">WOR(<symbol2>L</symbol2>)DS<br> FOR THE FUTURE</span><br>
4 years ago
<div><span class="titleitalic">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>
4 years ago
<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 to 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 words, 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>
4 years ago
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 material of Words for the Future.<br><br>
4 years ago
A map could 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">
4 years ago
<!--<bigitalic>Legenda:</bigitalic>-->
<br><br><br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>L</symbol><italic>Liquid</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Kendal Beynon</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>T</symbol><italic>Tense</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Martin Foucaut</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>A</symbol><italic>Atata</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;Camilo García A.</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>M</symbol><italic>!?</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Clara Gradel</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>U</symbol><italic>Undecidability</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Nami Kim</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>H</symbol><italic>Hope</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Euna Lee</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>O</symbol><italic>Otherness</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Jacopo Lega</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>P</symbol><italic>Practical Vision</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Federico Poni </p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>R</symbol><italic>Resurgence</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Louisa Teichmann</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
4 years ago
<symbol>E</symbol><italic>Eco-Swaraj</italic><p2>&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;Floor van Meeuwen</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
</div>
</div>
</body>