<head>
<title>VERSIONS - online book</title>
<meta charset="UTF-8">
<!--get styles for HTML-intro and php-content-->
<link rel="stylesheet" href="stylesheet_web.css">
<meta name="keywords" content="versions, challenge the retinal imperative, art, concept, dario zeo, book, reorganization, appropriation, montage, tank" >
<meta name="description" content="VERSIONS is a changing text montage that exists in a variety of physical and digital books. The text consists of appropriated text fragments, which are permanently rearranged by computer scripts. There is no single form of VERSIONS but a multitude of non-hierarchical variants. This project is a transparent open source concept and freely accessible." >
<!--content-navigation: smooth scroll java script-->
<script>
!function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof module&&module.exports?module.exports=e():function n(){document&&document.body?t.zenscroll=e():setTimeout(n,9)}()}(this,function(){"use strict";var t=function(t){return t&&"getComputedStyle"in window&&"smooth"===window.getComputedStyle(t)["scroll-behavior"]};if("undefined"==typeof window||!("document"in window))return{};var e=function(e,n,o){n=n||999,o||0===o||(o=9);var i,r=function(t){i=t},u=function(){clearTimeout(i),r(0)},c=function(t){return Math.max(0,e.getTopOf(t)-o)},a=function(o,i,c){if(u(),0===i||i&&i<0||t(e.body))e.toY(o),c&&c();else{var a=e.getY(),f=Math.max(0,o)-a,s=(new Date).getTime();i=i||Math.min(Math.abs(f),n),function t(){r(setTimeout(function(){var n=Math.min(1,((new Date).getTime()-s)/i),o=Math.max(0,Math.floor(a+f*(n<.5?2*n*n:n*(4-2*n)-1)));e.toY(o),n<1&&e.getHeight()+o<e.body.scrollHeight?t():(setTimeout(u,99),c&&c())},9))}()}},f=function(t,e,n){a(c(t),e,n)},s=function(t,n,i){var r=t.getBoundingClientRect().height,u=e.getTopOf(t)+r,s=e.getHeight(),l=e.getY(),d=l+s;c(t)<l||r+o>s?f(t,n,i):u+o>d?a(u-s+o,n,i):i&&i()},l=function(t,n,o,i){a(Math.max(0,e.getTopOf(t)-e.getHeight()/2+(o||t.getBoundingClientRect().height/2)),n,i)};return{setup:function(t,e){return(0===t||t)&&(n=t),(0===e||e)&&(o=e),{defaultDuration:n,edgeOffset:o}},to:f,toY:a,intoView:s,center:l,stop:u,moving:function(){return!!i},getY:e.getY,getTopOf:e.getTopOf}},n=document.documentElement,o=function(){return window.scrollY||n.scrollTop},i=e({body:document.scrollingElement||document.body,toY:function(t){window.scrollTo(0,t)},getY:o,getHeight:function(){return window.innerHeight||n.clientHeight},getTopOf:function(t){return t.getBoundingClientRect().top+o()-n.offsetTop}});if(i.createScroller=function(t,o,i){return e({body:t,toY:function(e){t.scrollTop=e},getY:function(){return t.scrollTop},getHeight:function(){return Math.min(t.clientHeight,window.innerHeight||n.clientHeight)},getTopOf:function(t){return t.offsetTop}},o,i)},"addEventListener"in window&&!window.noZensmooth&&!t(document.body)){var r="history"in window&&"pushState"in history,u=r&&"scrollRestoration"in history;u&&(history.scrollRestoration="auto"),window.addEventListener("load",function(){u&&(setTimeout(function(){history.scrollRestoration="manual"},9),window.addEventListener("popstate",function(t){t.state&&"zenscrollY"in t.state&&i.toY(t.state.zenscrollY)},!1)),window.location.hash&&setTimeout(function(){var t=i.setup().edgeOffset;if(t){var e=document.getElementById(window.location.href.split("#")[1]);if(e){var n=Math.max(0,i.getTopOf(e)-t),o=i.getY()-n;0<=o&&o<9&&window.scrollTo(0,n)}}},9)},!1);var c=new RegExp("(^|\\s)noZensmooth(\\s|$)");window.addEventListener("click",function(t){for(var e=t.target;e&&"A"!==e.tagName;)e=e.parentNode;if(!(!e||1!==t.which||t.shiftKey||t.metaKey||t.ctrlKey||t.altKey)){if(u){var n=history.state&&"object"==typeof history.state?history.state:{};n.zenscrollY=i.getY();try{history.replaceState(n,"")}catch(t){}}var o=e.getAttribute("href")||"";if(0===o.indexOf("#")&&!c.test(e.className)){var a=0,f=document.getElementById(o.substring(1));if("#"!==o){if(!f)return;a=i.getTopOf(f)}t.preventDefault();var s=function(){window.location=o},l=i.setup().edgeOffset;l&&(a=Math.max(0,a-l),r&&(s=function(){history.pushState({},"",o)})),i.toY(a,null,s)}}},!1)}return i});
</script>
<!-- End of SMOOTH SCROLL -->
</head>
<html>
<!--get stylevariables and db data as arrays first-->
<?php require_once('stylevariables.php');?>
<!--separate styles not included in stylesheet_web.php-->
<style>
.background{
width:100%;
height:100%;
position:fixed;
left:0px;
top:0px;
background-color:<?php echo $background_color;?>;
z-index:-2;
}
.canvas{
left:-32px;
top:-20px;
width:400px;
height:auto;
padding: 30px 55px 100px 30px;
background-color: rgba(255, 255, 255, 0.75);
position:absolute;
}
</style>
<!--background drawings-->
<div class="background">
<?php
//set dynamic function for all rectange-<div>
function rectangle($number, $opacity, $width, $height, $color, $margin){
//set CSS-style with variables
echo '<style>
.rectangle'. $number.'{
opacity:'. $opacity.';
position:relative;
background-color: '. $color.';
width: '. $width.'px;
height: '. $height.'px;
float:left;
margin:'. $margin.'px;
}</style>';
//echo recangle
echo '<div class="rectangle'. $number.'"></div>';
}
//call rectangle function 270 times + count up numbers used to call array-data/colors from stylevariables.php
for ($r_count = 0; $r_count <= 269; $r_count++) {
rectangle(($r_count+1), $opacity, strlen($array_fragment[$r_count])/1.2, strlen($array_fragment[$r_count])/1.2, ${'color' . ($r_count+1)}, strlen($array_fragment[$r_count])/-3.3);
}
?>
</div>
<!--section text in front-->
<body>
<!--background white canvas for text-->
<div class="canvas">
<!----------------------------------->
<!--html intro: first part manually-->
<!----------------------------------->
<!--title-->
<div class ="book_title" id="title" style="font-size:22px;">
CHALLENGE THE RETINAL IMPERATIVE
</div>
<div class ="book_title"><a href="index.php" style="text-decoration: none; color:black;">
VERSIONS</a><br>
</div>
<div class ="book_title" style="font-size:22px;">
one of 5.2664 x 10<sup>107</sup>
</div>
<br><br>
<!------------------------------------>
<!--php content starts---------------->
<!--echoing and styling data from DB-->
<!------------------------------------>
<?php
$check_count = 0; //counter count echoed elements
$check_count_numbers=0; //counter count echoed numbers
$count = 0; //counter while loop text fragments
$pos_in_array = 0; //counter array position
//while there is data in arrays keep looping
while ($count < (count($array_fragment))){
$result_fragment = ''; //clear $result_fragment => gets loaded each time
$result_number = '';
//case text type is chapter title => style: container center and .chapter_title
if(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'chapter_title')
xor ($array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'chapter_title')
xor ($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'chapter_title')
xor ($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'chapter_title')
xor ($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'chapter_title')){
if($array_fragment[$pos_in_array] == 'GEFÜGE'){$link = '<div id="gefüge" style="margin-top: -70px;">';}//ad anchor to chapter titles
elseif($array_fragment[$pos_in_array] == 'VERORTUNG'){$link = '<div id="verortung">';}
elseif($array_fragment[$pos_in_array] == 'HIER'){$link = '<div id="hier">';}
elseif($array_fragment[$pos_in_array] == 'LOVE'){$link = '<div id="love">';}
elseif($array_fragment[$pos_in_array] == 'ICH;ICH'){$link = '<div id="ich">';}
$class_element = 'chapter_title';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $link . $array_fragment[$pos_in_array] . '</div>' . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
}
//case text type is preface => style: container center and .preface
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'preface')
xor ($array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'preface')
xor ($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'preface')
xor ($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'preface')
xor ($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'preface')
xor ($array_chapter[$pos_in_array] == 'ANMERKUNGEN' && $array_type[$pos_in_array] == 'chapter_title')){
$class_element = 'preface';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is heading => style: container center and .heading
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'heading')
xor ($array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'heading')
xor ($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'heading')
xor ($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'heading')
xor ($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'heading')){
$class_element = 'heading';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is opposition => style: container center and .opposition
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'opposition')
xor ($array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'opposition')
xor ($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'opposition')){
$class_element = 'opposition';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is hier_op_1 => style: container left and .hier_op_1
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_1'){
$class_element = 'hier_op_1';
//style $result_fragment
$result_fragment = '<div class="container_left">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is hier_op_2 => style: container center and .hier_op_2
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_2'){
$class_element = 'hier_op_2';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is hier_op_3 => style: container right and .hier_op_3
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_3'){
$class_element = 'hier_op_3';
//style $result_fragment
$result_fragment = '<div class="container_right">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is love_1 => style: container center and .love_1
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_1'){
$class_element = 'love_1';
//style $result_fragment
$result_fragment = '<div lang = "en">' . '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is love_2 => style: container center and .love_2
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_2'){
$class_element = 'love_2';
//style $result_fragment
$result_fragment = '<div lang = "en">' . '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is love_3 => style: container center and .love_3
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_3'){
$class_element = 'love_3';
//style $result_fragment
$result_fragment = '<div lang = "en">' . '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is ich_1 => style: container center and .ich_1
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_1'){
$class_element = 'ich_1';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is ich_2 => style: container center and .ich_2
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_2'){
$class_element = 'ich_2';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is ich_3 => style: container center and .ich_3
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_3'){
$class_element = 'ich_3';
//style $result_fragment
$result_fragment = '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$result_number = '<div class="container_numbers">' . '<div class="numbers">' . $array_id[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
//case text type is part of running-text block => style: container center and individual style
elseif($array_type[$pos_in_array] == 'running_n'
xor $array_type[$pos_in_array] == 'running_h'
xor $array_type[$pos_in_array] == 'insertion'){
$inner_result = '';
$inner_result_number = '';
while($array_type[$pos_in_array] == 'running_n'
xor $array_type[$pos_in_array] == 'running_h'
xor $array_type[$pos_in_array] == 'insertion'){
//set span classes
if($array_type[$pos_in_array] == 'running_n'){
$class_element = 'running_n';}
elseif($array_type[$pos_in_array] == 'running_h'){
$class_element = 'running_h';}
elseif($array_type[$pos_in_array] == 'insertion'){
$class_element = 'insertion';}
//concatenate and style $result_fragment
$inner_result = $inner_result . '<span lang = "en">' . '<span class="' . $class_element . '">' . $array_fragment[$pos_in_array] . ' ' . '</span>' . '</span>';
$inner_result_number = $inner_result_number . '<span class="numbers">' . $array_id[$pos_in_array] . '<br>' . '</span>';
$pos_in_array++;
$count++;
$check_count++;
$check_count_numbers++;
}
$result_fragment = '<div class="container_center">' . $inner_result . '</div>';//concat from inner result
$result_number = '<div class="container_numbers">' . $inner_result_number . '</div>';//concat from inner result
}
//case text type is notes
elseif($array_type[$pos_in_array] == 'notes'){
$class_element = 'notes';
//style $result_fragment
$result_fragment = '<div class="container_center"><div class="chapter_title" style="right:306px; top: 20px;"><div id="bibliography">BIBLIOGRAPHY</div></div></div>' . '<div class="container_center">' . '<div class="' . $class_element . '">' . $array_fragment[$pos_in_array] . '</div>' . '</div>';
$pos_in_array++;
$count++;
$check_count++;
}
// echo styled single or styled concatenated result
echo $result_number;
echo $result_fragment;
}
?>
<!-------------------->
<!--end of book HTML-->
<!-------------------->
<!--credits-->
<br><br><br><br><br><br><br><br><br><br><br>
<div class="container_left">
<div class="chapter_title"style="text-align:left; left:165px; top:30px;">
<div id="credits">
CREDITS
</div>
</div>
</div>
<div class ="small_title">
<br><br><br><br>
DARIO ZEO
<br>research, concept, text montage, programming and design
<br><br><br>
SUPPORT
<br>M.A. / J.B. / C.B. / A.D.F. / M.D. / G.F. / M.F. /
P.G. / C.H. M.H. / J.H. / C.H. / E.H. / K.K. / J.K. / M.K. / M.K.
<br>
H.J.K. / T.L. / M.L. / L.L. / B.M. / R.M. / L.M. / A.M. / I.N.
<br>
V.O. / M.P. / R.R. / M.S. / D.S. / R.S. / S.S. / S.S. / K.S.
<br> N.S. / A.S. / G.S. /
S.S. / A.S. / L.M.T. / J.V. / F.W.
<br>L.W. / D.W. / L.W. / S.W. / M.Z.
<br><br><br>
APPROPRIATED MATERIAL
<br>
279 text fragments
<br>
from 69 texts, such as
<br>
essays, lyrics, poems, novels, interviews, artworks
<br>
written by 37 authors (A-Z)
<br>
from 1969-2017
<br><br><br>
Basel, from 2018 onwards
<br>
No rights reserved
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!--outro-->
<div class="container_left">
<div class="chapter_title" style="text-align:left; left:79px;" id="outro">
OUTRO
</div>
</div>
<div class ="outro">
<br><br><br><br>
<b>für den Text</b>
<br><br>
Quellen, nicht die der Autorität<br>sondern der Freundschaft:
<br>keine Garantien aber mit
<br>einer Art im Vorbeigehen erstatteten Grusses
<br>einem Augenblick der Wollust des Verstehens
<br><br>Hinweise auf Gelesenes, Gehörtes
<br>Instanz ist kein anderer als der Ort
<br><br>wenn die Schreiberin* dem Subjekt hier ihre Kultur leiht
<br>so vermittelt das Subjekt
<br>im Gegenzug die Unschuld des Imaginären
<br>gleichgültig gegenüber den Gepflogenheiten
<br><br>*writer
</div>
<!--contents with anchor links-->
<div class ="contents">
<a href="#title" style="text-decoration: none; color:white;">
top ↑
</a><br><br>
<a href="#gefüge" style="text-decoration: none; color:white;">
GEFÜGE
</a><br>
<a href="#verortung" style="text-decoration: none; color:white;">
VERORTUNG
</a><br>
<a href="#hier" style="text-decoration: none; color:white;">
HIER
</a><br>
<a href="#love" style="text-decoration: none; color:white;">
LOVE
</a><br>
<a href="#ich" style="text-decoration: none; color:white;">
ICH;ICH
</a><br>
<a href="#bibliography" style="text-decoration: none; color:white;">
BIBLIOGRAPHY
</a><br>
<a href="#credits" style="text-decoration: none; color:white;">
CREDITS
</a><br>
<a href="#outro" style="text-decoration: none; color:white;">
OUTRO
</a><br><br>
<a href="web.php" style="text-decoration: none; color:white;">
reorganize →
</a><br>
</div>
</div>
</body>
</html>