|
|
<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>	<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>	<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 they’re 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>	<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>	<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>	<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>	<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>	<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>	<italic>Atata</italic><br><p2><br>atata’s 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>	<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|