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.
320 lines
8.4 KiB
HTML
320 lines
8.4 KiB
HTML
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Presentation Session 1</title>
|
||
|
|
<link rel="stylesheet" href="static/slidy.css">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Belgika;
|
||
|
|
src: url(static/fonts/belgika/belgika-40th-webfont.ttf) format('truetype');
|
||
|
|
font-weight: 200;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Belgika;
|
||
|
|
src: url(static/fonts/belgika/belgika-16th-webfont.ttf) format('truetype');
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Belgika;
|
||
|
|
src: url(static/fonts/belgika/belgika-8th-webfont.ttf) format('truetype');
|
||
|
|
font-weight: 600;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Belgika;
|
||
|
|
src: url(static/fonts/belgika/belgika-5th-webfont.ttf) format('truetype');
|
||
|
|
font-weight: 800;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.slide {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.slide img {
|
||
|
|
max-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.slide.text {
|
||
|
|
display: block;
|
||
|
|
padding: 4vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
body, html {
|
||
|
|
font-family: Belgika;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
a, a:active, a:visited, a:hover, a:link {
|
||
|
|
color: currentColor;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, pre, ul, ol, blockquote, h2, h3, h4, h5, h6, dl, table {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- <div class="slide">
|
||
|
|
<img src="../Tools-shapes-practice-shapes-tools-osp.png" />
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Html-to-print as a lay-out tool</h1>
|
||
|
|
<p>
|
||
|
|
Pad: <a href="https://pad.constantvzw.org/p/prado_workshop_weasyprint">pad.constantvzw.org/p/prado_workshop_weasyprint</a><br>
|
||
|
|
Repository: <a href="https://gitlab.constantvzw.org/algolit/prado-weasyprint-workshop">gitlab.constantvzw.org/algolit/prado-weasyprint-workshop</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Anaïs Berck</h1>
|
||
|
|
<a href="https://www.anaisberck.be/">anaisberck.be</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Open Source Publishing</h1>
|
||
|
|
<p>Graphic design collective using only Free/Libre Open Source Software.</p>
|
||
|
|
<a href="http://osp.kitchen">osp.kitchen</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide">
|
||
|
|
<img src="images/Tools-shapes-practice-shapes-tools-osp.png" style="filter: invert(1);" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Algolit</h1>
|
||
|
|
<p>Research group exploring the potential of algorithmic literature.</p>
|
||
|
|
<a href="https://algolit.net">algolit.net</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Examples ? -->
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Algoliterary encounter
|
||
|
|
|
||
|
|
PDF: https://gitlab.constantvzw.org/algolit/algolit/-/raw/master/algoliterary_encounter/catalog/pdf/catalog.en.pagenumbers.pdf
|
||
|
|
Repo: https://gitlab.constantvzw.org/algolit/algolit/-/tree/master/algoliterary_encounter/catalog
|
||
|
|
-->
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Algoliterary encounter</h1>
|
||
|
|
<a href="https://gitlab.constantvzw.org/algolit/algolit/-/raw/master/algoliterary_encounter/catalog/pdf/catalog.en.pagenumbers.pdf">PDF of the publication</a><br />
|
||
|
|
<a href="https://gitlab.constantvzw.org/algolit/algolit/-/tree/master/algoliterary_encounter/catalog">Git repository</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Dataworkers
|
||
|
|
|
||
|
|
Plain text to PDF
|
||
|
|
|
||
|
|
PDF: https://www.algolit.net/images/4/47/Data-workers.en.publication.pdf
|
||
|
|
Repo: https://git.vvvvvvaria.org/mb/data-workers-publication
|
||
|
|
-->
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Data Workers</h1>
|
||
|
|
<a href="https://www.algolit.net/images/4/47/Data-workers.en.publication.pdf">PDF of the publication</a><br />
|
||
|
|
<a href="https://git.vvvvvvaria.org/mb/data-workers-publication">Git repository</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
|
||
|
|
DiVersions
|
||
|
|
|
||
|
|
Html 2 pdf
|
||
|
|
|
||
|
|
Web: https://diversions.constantvzw.org/
|
||
|
|
PDF: https://diversions.constantvzw.org/publication/diversions_v2.pdf
|
||
|
|
Web PDF Preview: https://diversions.constantvzw.org/wiki/index.php?title=PublicationUnfolded&paged=pagedðerstyles=etherstyles
|
||
|
|
Repo: https://gitlab.constantvzw.org/osp/work.diversions
|
||
|
|
|
||
|
|
-->
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Data Workers</h1>
|
||
|
|
<a href="https://diversions.constantvzw.org/">diversions.constantvzw.org</a><br />
|
||
|
|
<a href="https://diversions.constantvzw.org/publication/diversions_v2.pdf">PDF of the publication</a><br />
|
||
|
|
<a href="https://diversions.constantvzw.org/wiki/index.php?title=PublicationUnfolded&paged=pagedðerstyles=etherstyles">Run it online</a><br />
|
||
|
|
<a href="https://gitlab.constantvzw.org/osp/work.diversions">Git repository</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Graph with publishing flows -->
|
||
|
|
|
||
|
|
<!-- Directly from the browser? -->
|
||
|
|
|
||
|
|
<!-- Weasyprint -->
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Tools of today</h1>
|
||
|
|
<ul>
|
||
|
|
<li>HTML + CSS</li>
|
||
|
|
<li>Python</li>
|
||
|
|
<li>Terminal / shell / command line</li>
|
||
|
|
<li>Weasyprint</li>
|
||
|
|
<li>Code editor.<br />It's not F/LOSS, but I like Microsoft VS Code: <a href="https://code.visualstudio.com">code.visualstudio.com</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>HTML + CSS</h1>
|
||
|
|
<p>A web browser!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Python</h1>
|
||
|
|
<p>Scripting language.</p>
|
||
|
|
<p>To see if it's installed: open a terminal and type:</p>
|
||
|
|
<code><pre>python3 --version</pre></code>
|
||
|
|
<p>Expected output, a number like: <code><pre>Python 3.6.9</pre></code></p>
|
||
|
|
<p>If you don't have python installed it might be: <code><pre>Command not found</pre></code></p>
|
||
|
|
<p>Download python: <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Weasyprint</h1>
|
||
|
|
<p>Python library to convert HTML + CSS to a PDF</p>
|
||
|
|
<p>Install through the terminal:</p>
|
||
|
|
<code><pre>pip3 install weasyprint</pre></code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Possible to automate and better support for paged media -->
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>Directly from commandline</h1>
|
||
|
|
<code><pre>weasyprint http://weasyprint.org weasyprint-website.pdf</pre></code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>As library in a script</h1>
|
||
|
|
<code><pre>from weasyprint import HTML
|
||
|
|
|
||
|
|
HTML(filename=html_filename).write_pdf(output_pdf_filename)</pre></code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>CSS: Control page size</h2>
|
||
|
|
<code>
|
||
|
|
<pre>@page {
|
||
|
|
/* width and height. In this case for an A5 */
|
||
|
|
size: 148.5mm 210mm;
|
||
|
|
/* OR */
|
||
|
|
/* size: A5 portrait; */
|
||
|
|
padding: 0;
|
||
|
|
marks: crop;
|
||
|
|
bleed: 5mm;
|
||
|
|
margin: 25mm;
|
||
|
|
/* Bigger bleed as weasyprint draws the cropmarks within the bleed*/
|
||
|
|
}</pre>
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
<!-- Specific problems with paged media? -->
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>CSS: Page numbers</h2>
|
||
|
|
<code>
|
||
|
|
<pre>@page {
|
||
|
|
@bottom-center {
|
||
|
|
/**
|
||
|
|
On every page display the value of the page counter at the bottom center.
|
||
|
|
The page counter is a special counter created by weasyprint.
|
||
|
|
*/
|
||
|
|
content: counter(page);
|
||
|
|
}
|
||
|
|
}</pre>
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>CSS: Fancy page numbers</h2>
|
||
|
|
<code>
|
||
|
|
<pre>@page:right {
|
||
|
|
/**
|
||
|
|
Use a pseudo-selector on the page to display page numbers on right pages
|
||
|
|
on the right.
|
||
|
|
*/
|
||
|
|
@bottom-right {
|
||
|
|
content: counter(page);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@page:left {
|
||
|
|
/**
|
||
|
|
Use a pseudo-selector on the page to display page numbers on left pages
|
||
|
|
on the left.
|
||
|
|
*/
|
||
|
|
@bottom-left {
|
||
|
|
content: counter(page);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</pre></code>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>CSS: Special pages</h2>
|
||
|
|
<code>
|
||
|
|
<pre>@page:first {
|
||
|
|
/**
|
||
|
|
Selects the first page of the documents. Allows for example for hiding
|
||
|
|
the page numbers on the cover and / or different page margins there.
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@page:empty {
|
||
|
|
/**
|
||
|
|
According to the standards this selector should select empty pages.
|
||
|
|
In my experience it doesn't always work.
|
||
|
|
*/
|
||
|
|
}</pre>
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slide text">
|
||
|
|
<h1>CSS: Running headers</h2>
|
||
|
|
<code>
|
||
|
|
<pre>h1 {
|
||
|
|
/**
|
||
|
|
When a header 1 is encoutered set the value of the string
|
||
|
|
running-header to the value of the header
|
||
|
|
*/
|
||
|
|
string-set: running-header content(text);
|
||
|
|
}
|
||
|
|
|
||
|
|
@page {
|
||
|
|
@bottom-center {
|
||
|
|
/**
|
||
|
|
On every page display the value of running-header at
|
||
|
|
that moment
|
||
|
|
*/
|
||
|
|
content: string(running-header);
|
||
|
|
}
|
||
|
|
}</pre>
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="static/slidy.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|