Better instructions and more respect for margins
This commit is contained in:
Lauren Lagarde
parent
5ed70c7c7c
commit
2a3e898415
10 changed files with 97 additions and 85 deletions
8
build.sh
8
build.sh
|
|
@ -5,13 +5,13 @@ for i in `seq 1 4`; do
|
|||
h application/zip c$i.zip c$i
|
||||
done
|
||||
|
||||
zip t1.zip readme.html build.sh
|
||||
zip t2.zip main.svg clean.sh
|
||||
|
||||
h text/html readme.html i1
|
||||
zip t1.zip README.md
|
||||
zip t2.zip main.svg build.sh
|
||||
zip t3.zip clean.sh instructions.svg
|
||||
|
||||
h application/zip t1.zip t1
|
||||
h application/zip t2.zip t2
|
||||
h application/zip t3.zip t3
|
||||
|
||||
chromium --headless --disable-gpu --no-pdf-header-footer --print-to-pdf=output.pdf main.svg
|
||||
|
||||
|
|
|
|||
23
c1.svg
23
c1.svg
|
|
@ -1,10 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
|
||||
<rect width="550" height="425" fill="#FFFFFF" stroke="#CCCCCC" />
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#CCCCCC" />
|
||||
<rect width="550" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
|
||||
<foreignObject x="20" y="0" width="230" height="375">
|
||||
<foreignObject x="25" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<p>This zine was made with <b>QRnZine</b>, a collection of SVG templates and scripts for building zines which contain the means of their own reproduction.</p>
|
||||
This zine was made with <b>QRnZine</b>, a collection of SVG templates and scripts for building zines which contain the means of their own reproduction.
|
||||
<p>By <b>unfolding this zine and turning the page over</b>, you should find a set of QR codes containing instructions and source code that can be used both to <b>replicate this zine</b>, as well as to <b>create your own zines</b> with their own self-replicating abilities.</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
|
@ -14,13 +13,11 @@
|
|||
<text y="20">QRnZine v0.2</text>
|
||||
</g>
|
||||
|
||||
<g transform='translate(275 0)'>
|
||||
<foreignObject x="10" y="50" width="255" height="390">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style='text-align: center'>
|
||||
<h1>QRnZine</h1>
|
||||
<h3>A Toolkit for Creating Zines That Contain the Means of their Own Reproduction</h3>
|
||||
<em>An "artistic" exercise in abusing QR codes as a method for memetic self-replication</em>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<foreignObject x="300" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style='text-align: center'>
|
||||
<h1>QRnZine</h1>
|
||||
<h3>A Toolkit for Creating Zines That Contain the Means of their Own Reproduction</h3>
|
||||
<em>An "artistic" exercise in abusing QR codes as a method for memetic self-replication</em>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.2 KiB |
31
c2.svg
31
c2.svg
|
|
@ -1,8 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 1</text>
|
||||
<rect width="550" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<text x="105" y="400">Page 1</text>
|
||||
<text x="380" y="400">Page 2</text>
|
||||
|
||||
<foreignObject x="25" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Preface/Disclaimer</b>
|
||||
<p>This zine and QRnZine itself are pretty technical in nature and assume that the user is fairly technically advanced going in, with at least basic familiarity with command-line tools and editing of programming, scripting, and markup languages.</p>
|
||||
|
|
@ -10,18 +12,13 @@
|
|||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<g transform='translate(275 0)'>
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 2</text>
|
||||
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Introduction</b>
|
||||
<p><i>Link rot is very real and photocopiers don't come with an easy edit button.</i></p>
|
||||
<p>That's basically the problem QRnZine is intended to fix.</p>
|
||||
<p>If you could put the source code of a zine within the zine itself, other people could hopefully more easily replicate, modify, and create zines built using that one as a template.</p>
|
||||
<p>But how do you fit the source code for a zine inside itself?</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<foreignObject x="300" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Introduction</b>
|
||||
<p><i>Link rot is very real and photocopiers don't come with an easy edit button.</i></p>
|
||||
<p>That's basically the problem QRnZine is intended to fix.</p>
|
||||
<p>If you could put the source code of a zine within the zine itself, other people could hopefully more easily replicate, modify, and create zines built using that one as a template.</p>
|
||||
<p>But how do you fit the source code for a zine inside itself?</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
29
c3.svg
29
c3.svg
|
|
@ -1,7 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 3</text>
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<rect width="550" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
|
||||
<text x="105" y="400">Page 3</text>
|
||||
<text x="380" y="400">Page 4</text>
|
||||
|
||||
<foreignObject x="25" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>SVGs</b>
|
||||
<p>First we'll need to have a template to start with...</p>
|
||||
|
|
@ -11,16 +14,12 @@
|
|||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<g transform='translate(275 0)'>
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 4</text>
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>QR Codes</b>
|
||||
<p>Getting code onto and off of paper easily is a pain if you're relying on manually copying between the two.</p>
|
||||
<p>Fortunately, this problem is largely avoided using barcodes and 2d barcodes like QR Codes, the ubiquitous 2d barcode solution that pretty much everyone has a scanner for in their pocket.</p>
|
||||
<p>The biggest QR codes can store about 3kB of text, which is decent, but not quite enough for us.</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<foreignObject x="300" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>QR Codes</b>
|
||||
<p>Getting code onto and off of paper easily is a pain if you're relying on manually copying between the two.</p>
|
||||
<p>Fortunately, this problem is largely avoided using barcodes and 2d barcodes like QR Codes, the ubiquitous 2d barcode solution that pretty much everyone has a scanner for in their pocket.</p>
|
||||
<p>The biggest QR codes can store about 3kB of text, which is decent, but not quite enough for us.</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
27
c4.svg
27
c4.svg
|
|
@ -1,7 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="425" viewBox="0 0 550 425">
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 5</text>
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<rect width="550" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
|
||||
<text x="105" y="400">Page 5</text>
|
||||
<text x="380" y="400">Page 6</text>
|
||||
|
||||
<foreignObject x="25" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Data URIs</b>
|
||||
<p>Data URIs are a special URL format that allows for data to be stored directly in the URL itself, without any backing server.</p>
|
||||
|
|
@ -12,15 +15,11 @@
|
|||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<g transform='translate(275 0)'>
|
||||
<rect width="275" height="425" fill="#FFFFFF" stroke="#AAAAAA" />
|
||||
<text x="105" y="415">Page 6</text>
|
||||
<foreignObject x="20" y="15" width="230" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Putting It All Together</b>
|
||||
<p>By putting SVG source into zip files, placing zip files into data URIs, putting data URIs into QR codes, and referencing the QR codes in the SVG source, we can magically store the source code of our zine in the zine itself more-or-less losslessly.</p>
|
||||
<p>Some caveats apply, like needing software to process SVGs, QR codes, and the automation scripts, but those are hopefully less fragile than a difficult-to-edit PDF with a broken link.</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<foreignObject x="300" y="25" width="225" height="375">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Putting It All Together</b>
|
||||
<p>By putting SVG source into zip files, placing zip files into data URIs, putting data URIs into QR codes, and referencing the QR codes in the SVG source, we can magically store the source code of our zine in the zine itself more-or-less losslessly.</p>
|
||||
<p>Some caveats apply, like needing software to process SVGs, QR codes, and the automation scripts, but those are hopefully less fragile than a difficult-to-edit PDF with a broken link.</p>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
19
guidelines.svg
Normal file
19
guidelines.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="2200" viewBox="0 0 850 2200">
|
||||
<rect x="25" y="25" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="300" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="575" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="850" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="1125" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="1400" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="1675" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="25" y="1950" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
|
||||
<rect x="450" y="25" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="300" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="575" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="850" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="1125" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="1400" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="1675" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
<rect x="450" y="1950" width="375" height="225" fill="none" stroke="#EEEEEE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
11
instructions.svg
Normal file
11
instructions.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="550" height="255" viewBox="0 0 550 255">
|
||||
<foreignObject width="550" height="255">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
The QR code immediately to the right has a data URI to a zip file containing a README.md with more info. (Nesting doll approach results in huge space savings)
|
||||
<p>Instructions: Scan each of the QR codes on this page, pasting the data URI contained within each into a browser URL bar in order to download a set of zip files containing the individual files listed next to each QR code.</p>
|
||||
<p>When all of the files are combined together into a single directory on a Linux computer, they can be used as-is to recreate the entirety of this zine, or modified to create a new zine that also has "self-replicating" abilities.</p>
|
||||
This Zine was made using QRnZine v0.2<br/>
|
||||
Upstream Source Code: https://github.com/mlaga97/QRnZine<br/>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 972 B |
34
main.svg
34
main.svg
|
|
@ -25,40 +25,30 @@
|
|||
<image href="c1.svg" x="550"/>
|
||||
</g>
|
||||
|
||||
<g transform='rotate(90) translate(1110 -415)'>
|
||||
<image href="i1.png" width="255"/>
|
||||
<image href="t1.png" width="255" x="275"/>
|
||||
<image href="t2.png" width="255" x="550"/>
|
||||
<image href="c1.png" width="255" x="825"/>
|
||||
<g transform='rotate(90) translate(1125 -400)'>
|
||||
<image href="t2.png" width="225" x="275"/>
|
||||
<image href="t3.png" width="225" x="550"/>
|
||||
<image href="c1.png" width="225" x="825"/>
|
||||
|
||||
<foreignObject y="275" x="10" width="235" height="255">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
<b>Instructions</b><br/>
|
||||
Scan the QR code above and paste the contents into the address bar of a web browser like Firefox, Chrome, or Edge to get started<br/>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
||||
<text x="285" y="275">./readme.html</text>
|
||||
<text x="285" y="275">./main.svg</text>
|
||||
<text x="285" y="295">./build.sh</text>
|
||||
<text x="560" y="275">./main.svg</text>
|
||||
<text x="560" y="275">./instructions.svg</text>
|
||||
<text x="560" y="295">./clean.sh</text>
|
||||
<text x="835" y="275">./c1.svg</text>
|
||||
</g>
|
||||
|
||||
<g transform='rotate(-90) translate(-2190 435)'>
|
||||
<image href="c2.png" width="255"/>
|
||||
<image href="c3.png" width="255" x="275"/>
|
||||
<image href="c4.png" width="255" x="550"/>
|
||||
<g transform='rotate(-90) translate(-2175 450)'>
|
||||
<image href="c2.png" width="225"/>
|
||||
<image href="c3.png" width="225" x="275"/>
|
||||
<image href="c4.png" width="225" x="550"/>
|
||||
|
||||
<text x="10" y="275">./c2.svg</text>
|
||||
<text x="285" y="275">./c3.svg</text>
|
||||
<text x="560" y="275">./c4.svg</text>
|
||||
</g>
|
||||
|
||||
<g transform='translate(440 1130)'>
|
||||
<text>Using QRnZine v0.2 For Self-replication</text>
|
||||
<text y="20">https://github.com/mlaga97/QRnZine</text>
|
||||
</g>
|
||||
<image x="600" y="1125" href="t1.png" width="225"/>
|
||||
<image x="25" y="1125" href="instructions.svg" width="550" />
|
||||
|
||||
<line x1="425" y1="275" x2="425" y2="825" stroke='black'/>
|
||||
<line x1="425" y1="1375" x2="425" y2="1925" stroke='black'/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
output.pdf
BIN
output.pdf
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue