< 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: 175pt;
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;
}
.title2 {
display: block;
font-size: 150pt;
line-height: 160pt;
letter-spacing: normal;
font-family: 'Roboto';
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: 'EBGaramonditalic';
font-size: 30pt;
line-height:34pt;
}
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;
}
symbol2 {
font-size: 80pt;
line-height: 120pt;
font-family: 'Custom';
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------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: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.title2 {
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 >
< italic > Legenda:< / italic >
< br > < br > < br >
< line > ——————————————————————————————< / line >
< 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 >
< 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’ < / 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’ < / p2 >
< br > < br >
< line > ——————————————————————————————< / line >
< br > < br >
< symbol > T< / symbol > 	 < italic > Tense< / italic > < br > < p2 > < br > Tense's symbol depicts the encapsulation of a subject inside a 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> -->
< span class = "title2" > WOR(< symbol2 > L< / symbol2 > )DS< br > FOR THE FUTURE< / span >
< div > < span class = "bigitalic" > 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’ < / span > < / div >
< / div >
< / div >
< / body >
