Turnthiswikipageintoapdf: Difference between revisions

From XPUB & Lens-Based wiki
 
(8 intermediate revisions by the same user not shown)
Line 26: Line 26:
}
}
</syntaxhighlight>
</syntaxhighlight>
==from wiki page to HTML page==


===CTRL+P / CMD+P===
===CTRL+P / CMD+P===


That speaks for itself :).
That speaks for itself :)
 
But.. when doing this on the wiki, there is only one stylesheet for all wiki pages :(


===curl===
===curl===


<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
$1=WIKIPAGE
WIKIPAGE=$1


# Download a wikipage in HTML:
# Download a wikipage in HTML
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html


# Change the links in the images:
# Change the links in the images
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html


Line 50: Line 54:
--output $WIKIPAGE.html
--output $WIKIPAGE.html
</syntaxhighlight>
</syntaxhighlight>
Now open the web page in your browser, and <code>CTRL+P</code> / <code>CMD+P</code>!


==Weasyprint==
==Weasyprint==
Line 56: Line 62:


==Paged.js==
==Paged.js==
Download the Paged.js library:
* https://unpkg.com/pagedjs@0.4.3/dist/paged.polyfill.js (as pagedjs.polyfill.js)
* https://gitlab.coko.foundation/pagedjs/interface-polyfill/-/raw/master/interface.css (as pagedjs.interface.css)


<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
$1=WIKIPAGE
WIKIPAGE=$1


# Download a wikipage in HTML:
# Download a wikipage in HTML
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html


# Change the links in the images:
# Change the links in the images
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html
# Download paged.js polyfill as JS file
curl https://unpkg.com/pagedjs@0.4.3/dist/paged.polyfill.js -o pagedjs.polyfill.js.tmp
echo "<script>" > pagedjs.polyfill.js
cat pagedyjs.polyfill.js.tmp >> pagedjs.polyfill.js
echo "</script>" >> pagedjs.polyfill.js
rm pagedjs.polyfill.js.tmp
# Download paged.js's interface.css
curl https://gitlab.coko.foundation/pagedjs/interface-polyfill/-/raw/master/interface.css -o pagedjs.interface.css


# Add stylesheet(s) + paged.js library
# Add stylesheet(s) + paged.js library

Latest revision as of 12:59, 26 November 2024

CSS Print?

CSS Print is a module within the CSS language standards maintained by the W3C.

Some reasons why CSS Print can be interesting to use:

  • publishing pipelines
  • generated publications, layout engines
  • using HTML+CSS know how for print
  • web & print in one workflow
  • non-linear workflows (writing and design in parallel)
  • collective workflows
  • networked publications (using web materials)
  • web culture & aesthetics in print
  • ...

@media print

@media print{
    h1{
        width: 100%;
        text-align: center;
    }
}

from wiki page to HTML page

CTRL+P / CMD+P

That speaks for itself :)

But.. when doing this on the wiki, there is only one stylesheet for all wiki pages :(

curl

WIKIPAGE=$1

# Download a wikipage in HTML
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html

# Change the links in the images
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html

# Add stylesheet(s)
pandoc \
	--standalone \
	--css screen.css \
    --css print.css \
	$WIKIPAGE.html \
	--output $WIKIPAGE.html

Now open the web page in your browser, and CTRL+P / CMD+P!

Weasyprint

$ weasyprint https://pzwiki.wdka.nl/mediadesign/Protocols_for_Collective_Performance:_Radio_Broadcast_1?action=render --stylesheet print.css broadcast1.pdf

Paged.js

Download the Paged.js library:

WIKIPAGE=$1

# Download a wikipage in HTML
curl https://pzwiki.wdka.nl/mediadesign/$WIKIPAGE?action=render > $WIKIPAGE.html

# Change the links in the images
sed -i "s/\/mw-mediadesign/https:\/\/pzwiki.wdka.nl\/mw-mediadesign/g" $WIKIPAGE.html

# Add stylesheet(s) + paged.js library
pandoc \
	--standalone \
	--css print.css \
    --css pagedjs.interface.css \
	--include-in-header=pagedjs.polyfill.js \
	$WIKIPAGE.html \
	--output $WIKIPAGE.html

Maybe: not a single system!

$ pdfunite file1.pdf file2.pdf file3.pdf output.pdf

Booklet making

There are many ways to make booklets with the terminal, using Imposition tools.

For example:

$ pdfbook2 output.pdf --no-crop --short-edge --paper=a4paper

Links!