Relearning layout - Revision history

Manetta at 09:29, 19 September 2025

2025-09-19T09:29:57Z

← Older revision		Revision as of 09:29, 19 September 2025
Line 109:		Line 109:

	[[Category: Wiki-publishing]]		[[Category: Wiki-publishing]]
			[[Category:Draft]]

Simoon at 10:56, 23 May 2025

2025-05-23T10:56:55Z

← Older revision		Revision as of 10:56, 23 May 2025
Line 107:		Line 107:

	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.		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.

			[[Category: Wiki-publishing]]

Manetta at 12:27, 16 May 2025

2025-05-16T12:27:01Z

← Older revision		Revision as of 12:27, 16 May 2025
Line 1:		Line 1:
	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.		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 ~~the~~ 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.		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.

	...		...

Manetta at 12:26, 16 May 2025

2025-05-16T12:26:17Z

← Older revision		Revision as of 12:26, 16 May 2025
Line 1:		Line 1:
			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 the 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]]		[[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]]

Manetta at 12:18, 16 May 2025

2025-05-16T12:18:21Z

← Older revision		Revision as of 12:18, 16 May 2025
Line 7:		Line 7:
	<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">		<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>		</a>
			</nowiki>
			</pre>

			<pre class="css"><nowiki>
			img{
			max-height: 100mm;
			width: auto;
			box-shadow: 5px 5px 5px coral;
			}
	</nowiki>		</nowiki>
	</pre>		</pre>

Manetta at 12:12, 16 May 2025

2025-05-16T12:12:10Z

← Older revision		Revision as of 12:12, 16 May 2025
Line 2:		Line 2:

	<code class="wikitext"><nowiki>[[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]]</nowiki></code>		<code class="wikitext"><nowiki>[[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]]</nowiki></code>

			<pre class="html"><nowiki>
			<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>
			</nowiki>
			</pre>

	[[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\|thumb\|a thumb floats by default to the right]]

Manetta at 12:10, 16 May 2025

2025-05-16T12:10:24Z

← Older revision		Revision as of 12:10, 16 May 2025
Line 78:		Line 78:
	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.		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.		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 <code><head></code> 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.		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.

Manetta at 12:03, 16 May 2025

2025-05-16T12:03:14Z

Manetta at 12:01, 16 May 2025

2025-05-16T12:01:13Z

← Older revision		Revision as of 12:01, 16 May 2025
Line 66:		Line 66:
	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!		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\|~~frame~~\|~~200px~~\|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.]]		[[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.]]

	<nowiki>[[File:Screenshot from 2025-05-16 13-56-25.png\|~~frame~~\|~~200px~~\|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.]]</nowiki>		<nowiki>[[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.]]</nowiki>

	The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:		The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:

Manetta at 12:00, 16 May 2025

2025-05-16T12:00:30Z

← Older revision		Revision as of 12:00, 16 May 2025
Line 66:		Line 66:
	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!		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\|frame\|~~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.]]		[[File:Screenshot from 2025-05-16 13-56-25.png\|frame\|200px\|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.]]

	<nowiki>[[File:Screenshot from 2025-05-16 13-56-25.png\|frame\|~~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.]]</nowiki>		<nowiki>[[File:Screenshot from 2025-05-16 13-56-25.png\|frame\|200px\|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.]]</nowiki>

	The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:		The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:

← Older revision		Revision as of 12:03, 16 May 2025
Line 1:		Line 1:
	[[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]]		[[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]]

	<nowiki>[[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]]</nowiki>		<code class="wikitext"><nowiki>[[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]]</nowiki></code>

	[[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\|thumb\|a thumb floats by default to the right]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|a thumb floats by default to the right]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|a thumb floats by default to the right]]</nowiki></code>

	[[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\|frame\|the frame too]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|frame\|the frame too]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|frame\|the frame too]]</nowiki></code>

	[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|300px\|the 300px image is automatically pushed up more]]		[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|300px\|the 300px image is automatically pushed up more]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|300px\|the 300px image is automatically pushed up more]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|300px\|the 300px image is automatically pushed up more]]</nowiki></code>

	What are other options for positioning images?		What are other options for positioning images?
Line 21:		Line 21:
	[[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\|thumb\|left\|A thumbnail can be aligned to the left ...]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|left\|A thumbnail can be aligned to the left ...]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|left\|A thumbnail can be aligned to the left ...]]</nowiki></code>

	[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|center\|... center ...]]		[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|center\|... center ...]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|center\|left\|... center ...]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|center\|left\|... center ...]]</nowiki></code>

	[[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\|right\|... or right.]]

	<nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|right\|... or right.]]</nowiki>		<code class="wikitext"><nowiki>[[File:Print-shop-Amiga World Vol 01 01 1985 Premiere-87-copy.jpg\|thumb\|right\|... or right.]]</nowiki></code>

	[[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!]]		[[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!]]

	<nowiki>[[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!]]</nowiki>		<code class="wikitext"><nowiki>[[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!]]</nowiki></code>

	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.		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.
Line 68:		Line 68:
	[[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.]]		[[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.]]

	<nowiki>[[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.]]</nowiki>		<code class="wikitext"><nowiki>[[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.]]</nowiki></code>

	The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is:		The wiki adds the class "thumb" to thumbnail images in the rendered HTML. If the wikitext for the thumbnail image is: