NØ web tø print template

ehw... why tø dø w2p, actually?

This template gathers 2 contents into a 16 pages zine double-sided printed on 4 A4 sheets, folded on the long side. It could be 2 languages of the same content or 2 different texts. On screen, two buttons allow to call one or the other. On print, one will appear on the top of the printed pages, the other on the bottom. Once printed, paper can be cut in the middle in order to make 2 A6 zines... or not. You are curently reading the begining of the cøntent 1 (linked to the class TOP).

You are curently reading the begining of the cøntent 2 (linked to the class BTM).

Basically, we name "web to print" the use of html and css languages to produce from the browser a pdf file designed for printing. The use of web techniques in graphic design is both an experimental and industrial challenge. Artists, graphic designers and collectives find in the reappropriation and development of their graphic creation tools a political commitment participating in a technological emancipation and empowerment. Their practice is often politically committed and related to the free / open source software (F/LOSS) culture.

Here is the following of the first half of the web site, that we entitled "Cøntent 1" and that is linked to the class "TOP". This part will appear on the top of the third page of the zine.

Web to print is the use of the same html page (a.k.a. the same content) to be read on different reading context including pdf export. It's responsive design from smarthone to computer AND to print. This is a chalenge for designers. How to care about, idk, a video? an animated gif?
Multisuport design can be very fun actually. Let's play with the "display: none" property and with the well named class "screenonly" and "printonly".
Let me guess... 🔮

You are reading this on 🖥️ , 💻 or 📱 🖨️ 📄 📃

To properly print this template (or, to begin, export properly the pdf), please follow these steps:

• use Firefox
Usualy, to do web-to-print, we prefer Chromium and Chrome because they are the only brothers nicely interpretating the @page fonction that allows to define the size of the page. —For exemple, a 3×4 meters web-to-print pdf is POSSIBLE. I did it. Twice— But here, we want to print on A4 sheets, so Firefox is perfectly fine.

• if you want to print any background (full color, gradient, picture...), scroll to the top of the page before clicking on 🖨️ or ctrl+P / md+P

• on the print setting window, for "Margins", select "None"

• still on the print setting window, bellow, on the "Options" section, select "Print backgrounds"

• remember it is ment to be double-sided printed, then vertically fold. The BIG PINK NUMBERS on the backgroud of the A4 pages are here to show the print order (1 is behind 2, etc.). The yellow numbers on the left and the right in the middle are the page numbers once bounded.

Wouldn't you like to have some resources to start and explore web to print possibilities?

Ressources

GENERAL
developper.mozzilla.org/
www.w3schools.com/

HTML introduction
https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML

First steps with CSS
https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps

Initiation à la mise en forme du texte (FR)
https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte

What can we say more about this web-to-print template that will appears oon the top of the page 5?

ID & class (FR)
https://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html – https://css-tricks.com/the-difference-between-id-and-class/

CSS layout
https://web.dev/one-line-layouts/

css grid
https://css-tricks.com/snippets/css/complete-guide-grid/

web color
https://htmlcolorcodes.com/fr/

media queries
developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

Maybe not much. That will be situated on the top of the page 6.

Typo

Badass Libre Fonts by Women
https://www.design-research.be/by-womxn/

Velvetyne type foundry
http://velvetyne.fr/

Typothèque Esa
http://typotheque.le75.be/

Bye Bye Binary typothèque
https://typotheque.genderfluid.space/

Let's say we'd be happy you take this template and feed it with your own content. This paragraph will be placed on the top of the page 7.

Now, I guess, it's your turn to experiment and fill in the content of this paragraph that will appears on zine's page 7 bottom.

And continue, please, continue: give the top of the page 8 some content.

Ho, what a surprise, here is the content that we can write ont he page 8 of the printed zine, that will be readable online through the button linked to the class "BTM".

Here is the room for the content of the page 9 on the top.

Here is the room for the content of the page 9 bottom.

Content of the page 10 on the top.

What, you think it's repetitive and borring? Wanna have more fun?

Content of the page 10 on the bottom.

Do you love gradients? I do love gradients. The syntax for CSS Linear Gradients is: "background-image: linear-gradient(direction, color-stop1, color-stop2, ...)". For exemple, if you want a diagonal gradient, replace "direction" by "to bottom right". The CSS fonction "radial-gradient()" also exists. The colors can be names (like: red, orange, yellow, green, blue, indigo, violet) or hexadecimal referencies like: #e66465, #9198e5, or rgb references like: rgba(255,0,0,0). Want to learn more?
developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient

Content of the page 11 on the bottom.

Page 12 content on top

Content of the page 12 on the bottom.

Page 13 content, on top

Page 13 content on bottom

Page 14 top

Page 14 bottom

Page 15 top

Page 15 btm

Template made in html and css by Lucile Olympe Haute and Davide Bevilacqua
using Anthony & Minipax types,
and adapting the printable website of web.2print.org,
all that during
NØ SCHOOL Nevers
on July 2022

Here you can write something that will appear on the bottom of the cover page. If your zine is ment to be cut in two A6 zines, you should repeat the credits here.

Template made in html and css by Lucile Olympe Haute and Davide Bevilacqua
using Anthony & Minipax types,
and adapting the printable website of web.2print.org,
all that during
NØ SCHOOL Nevers
on July 2022