XPUB
/
SI13
57
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6701451624'
${ noResults }
SI13/COLOPHON/A3colophon.html

682 lines
17 KiB
HTML
Raw Normal View History Unescape Escape

all folders committed
4 years ago
<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>