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.

699 lines
18 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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: 17pt;
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: 9mm;
margin-top: 15mm;
margin-bottom: 10mm;
}
.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: 75mm;
margin-right: 5mm;
}
.columnmiddle {
width: 25%;
margin-top: 75mm;
}
.columnmiddle2 {
width: 25%;
margin-top: 75mm;
}
.columnright {
width: 25%;
margin-top: 10mm;
margin-right: 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;
word-break: break-word;
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="title2">WOr(L)DS<br>foR THE FuTUrE-</span><br>--->
<span class="title">WOR(<symbol2>L</symbol2>)DS<br> FOR THE FUTURE</span><br>
<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>
<bigmedium>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Words have the power to shape reality. Wor(l)ds <br>for the Future is a set of map making tools to re-imagine and collect wor(l)ds, and to re-publish 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 <i>Words for the Future</i> (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<br> in Python (a coding language we used to analyse text<br> 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<br> of cartography. Alfred Korzybski wrote: "The map is <br>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<br> for the Future.<br><br>
A map could relate to something that no longer exists.<br> 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<br> 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>&nbsp;&nbsp;&nbsp;Kendal Beynon</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>T</symbol><italic>Tense</italic><p2>&nbsp;&nbsp;&nbsp;Martin Foucaut</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>A</symbol><italic>Atata</italic><p2>&nbsp;&nbsp;&nbsp;Camilo García A.</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>M</symbol><italic>!?</italic><p2>&nbsp;&nbsp;&nbsp;Clara Gradel</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>U</symbol><italic>Undecidability</italic><p2>&nbsp;&nbsp;&nbsp;Nami Kim</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>H</symbol><italic>Hope</italic><p2>&nbsp;&nbsp;&nbsp;Euna Lee</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>O</symbol><italic>Otherness</italic><p2>&nbsp;&nbsp;&nbsp;Jacopo Lega</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>P</symbol><italic>Practical Vision</italic><p2>&nbsp;&nbsp;&nbsp;Federico Poni </p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>R</symbol><italic>Resurgence</italic><p2>&nbsp;&nbsp;&nbsp;Louisa Teichmann</p2><br>
<br>
<line>——————————————————————————————</line>
<br><br>
<symbol>E</symbol><italic>Eco-Swaraj</italic><p2>&nbsp;&nbsp;&nbsp;Floor van Meeuwen</p2><br>
<br>
<line>——————————————————————————————</line>
</div>
</div>
</body>