Relearning layout
When turning wiki pages into a printed publication you make a snapshot of these pages at a specific time. Making such snapshot is also a gesture of cutting. Disconnecting the content from the environment in which it is written: the wiki.
This cut also disconnects the reader from potential degrees of learning. Once the wiki pages are turned into a PDF, a reader is not able to "View source" any longer, to learn how the page was written in wikitext.
...
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|the large image stays in the flow, together with the 300px one]]
<a class="image" href="/wiki/File:Print-shop-Amiga_World_Vol_01_01_1985_Premiere-87-copy.jpg" title="the large image stays in the flow, together with the 300px one" data-ref="1ef5a5d7-cd51-4e77-aed5-5b903dd69dfa">
<img alt="the large image stays in the flow, together with the 300px one" decoding="async" height="1283" src="/wiki/images/b/ba/Print-shop-Amiga_World_Vol_01_01_1985_Premiere-87-copy.jpg" width="1024" data-ref="663218d1-ed80-4230-a4f3-811776ec66a2">
</a>
img{
max-height: 100mm;
width: auto;
box-shadow: 5px 5px 5px coral;
}
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|thumb|a thumb floats by default to the right]]
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|frame|the frame too]]
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|300px|the 300px image is automatically pushed up more]]
What are other options for positioning images?
I'm checking https://www.mediawiki.org/wiki/Help:Images to explore the official documentation...
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|thumb|left|A thumbnail can be aligned to the left ...]]
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|center|left|... center ...]]
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|thumb|right|... or right.]]
[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg|thumb|left|upright=0.5|After finding this option to scale a thumb.. we are trying to scale this one to 0.5. Oh it's cute!]]
To prepare a print layout of this page, we turn this page into a wiki-to-print page and switch layout engines: from MediaWiki as layout engine of the wiki page to Paged.js as layout engine of the printed page. Both layout engines use HTML and CSS to render their layouts, but both do it in a different way and in different places.
The wiki renders by default an image into the following HTML structure:
<a class="image">
<img>
</a>
When you use the "thumb" or "frame", an image is being rendered as:
<div class="thumb tleft">
<div class="thumbinner">
<a>
<img>
</a>
<div class="thumbcaption"></div>
</div>
</div>
Paged.js adds HTML to the page in a whole different way: it renders the content of the wiki page into a lot of <div> elements in order to wrap it into pages and enforce page breaks whenever a page is full.
Back to the layout of this page. When rendering this page with Paged.js, we notice that the thumb positioning that assigned to the last 3 images ("left", "center" and "right") are not triggering anything in the layout any longer. All the 3 thumbs are just rendered on the left!
[[File:Screenshot from 2025-05-16 13-56-25.png|thumb|left|400px|This is a screenshot of this wiki page rendered in Paged.js. It shows how the thumbnails that are marked to align at the ''left'' and ''center'' both appear on the left.]]
The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:
- left: it adds the class "tleft"
- center: it adds the class "tnone"
- right: it adds the class "tright"
When reading the page as a wiki page, the MediaWiki software connects specific CSS rules to these classes, but when we render this HTML structure in Paged.js, there is no CSS rule connected to these classes any longer. Leaving the thumbs just being rendered on the left side of the page. As wiki-to-print is built on top of a wiki environment, it means that the Paged.js layout will have to be built with the HTML structure that the wiki creates.
What is making the HTML in the wiki-to-print pipeline? We *think* it is the mediawiki API... Yes. Wiki-to-print requests the HTML of the PDF:page through the API, runs some search-and-replace functions to change the image source links, and lastly adds Paged.js into the <head> of the HTML page.
So together, we could say that the printed layout is produced through a mix of HTML coming from Mediawiki, tweaked by the designers with some handwritten HTML written in the PDF:page, wrapped in HTML coming from Paged.js, styled with handwritten CSS rules written on the PdfCSS:page directly, or on an imported etherpad in case we need to work synchronously.
In practice, when working on a print layout, it is quite messy. We move between these different places. Pressing the wiki-to-print "update text" button whenever a change has been made in one of the wiki pages, or the "update media" button whenever one of the images changed.
The procedure to change the size of an image is particularly specific. Images are being resized in wikitext, not CSS. Because the images don't have a unique id that can be used to select them with CSS, we resized images in the wikitext directly. Also, in the wikitext you only specify one dimension of the image (width or height) to maintain the aspect ratio of the image.