A party to print

Web2Print tutorial

HTML

HTML Cheatsheet

The html uses tags to create elements or blocks with this syntax: $

<tag>content</tag>

Tags can contain attributes, a kind of parameter of the tag, some attributes are specific to the tag and others are generic.

<tag attribute="value">content</tag>

An HTML5 document is structured as follows: 

<!DOCTYPE html>
      <html lang="fr"> 
      <head>   
        <meta charset="UTF-8">
        <title>Page title</title>
      </head> 
      <body>
        <!-- comments -->
      </body>
    </html>

The basic tags

Create a list

<ul>
  <li>an item in the list</li>
  <li>another item</li>
</ul>

Insert a link

<a href="http://hello.com">link text</a>

Insert an image

<figure>
  <img src="images/myimage.jpg" alt="image description text">
</figure>

CSS

CSS Cheatsheet

CSS is the language used to style a web page: choosing fonts, positioning, colors, margins, and more.

To insert a style sheet, named for example style.css, you need to add the 

<link>
tag in the 
<head>
of your HTML, like this: 
<link rel="stylesheet" href="style.css">

In CSS, you start by targeting an element and then changing the values of its properties. For example, if you want to change the color of a paragraph, you would write: 

p{
  color: red;
}

Some basic CSS properties

Class and ID

To specifically target elements, you can use either the class attribute or the id attribute.

ID is unique, while a class is reusable. An element can have only one ID, but one or more classes.

<p id="unique-paragraph">some text</p>
<p class="red-paragraph">more text</p>

There are several ways to target an element in CSS:

.target-class{ property: value; }
 #target-id{ property: value; }
.parent .child{ property: value; }

CSS tricks & tips

When an element has a defined width, margin: auto; can be used to horizontally center it.

.element{   
  width: 50%;   
  margin: auto;
}

To position elements side by side, you can use flexbox.

.parent{  
  display:flex; 
  justify-content:space-between; 
}

For more information on flexbox, check out here.

CSS Print

The main method for creating printable PDFs using web technologies is to utilize the browser's print functionality, preferably on Chromium or Chrome.

CSS allows you to create stylesheets specific to the screen and print media. With the media print feature, you can have a different design and even different content for the print output compared to the screen.

How CSS Print Works

@media print {
        /* Your print-specific CSS here */
    }

Defining Page Format

@media print {
        @page { size: A4; }
        /* or */
        @page { size: 21cm 29.7cm; }
    }

Setting Margins

/* Set margins */
@page { margin: 2cm; }

/* Set left page margins */
@page :left { margin: 1cm; }

/* Set right page margins */
@page :right { margin: 1cm; }

/* Set margins on the first page, you can also target a specific page */
@page :first { margin: 1cm 2cm; }

Note that if you want to print with a background color, the margins will be left blank.

Page Breaks

The three CSS properties page-break-before, page-break-after, and page-break-inside allow you to control where page breaks occur or should be avoided.

/* These properties can take the following values: */
page-break-after: auto | always | avoid;
page-break-before: auto | always | avoid;
page-break-inside: auto | avoid;

auto is the default value, always adds a page break every time, and avoid prevents a page break. For example:

h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
}

img {
    page-break-inside: avoid;
}

Different Content for Web and Print

You can hide certain elements on the web and display them in the print version, and vice versa.

@media screen {
    h1 {
        display: none;
    }
}

@media print {
    img {
        display: none;
    }
}

Paged.js

Paged.js is an open-source JavaScript library that goes beyond the basic print functionality and provides a comprehensive tool for paginating content in the browser to create PDF output from any HTML content. It offers precise rendering preview and extended features.

To use Paged.js effectively, it needs to be opened locally with a PHP server (e.g., MAMP or using VSCodium Live Server extension).

Paged.js utilizes the print CSS features (as mentioned above) and also provides additional functionalities.

Page Breaks

The break-before property indicates that an element should start on a new page.

h2 {
    break-before: right;
}

You can also use the break-after property in the same manner, which will cause the page break to occur after the targeted element.

Add Page Numbers

@page {
    @bottom-left {
        content: counter(page);
    }
}

Create Content in Margins

You can create content such as running headers, page numbers, or other elements in the page margins. For example, adding a running header at the top-right of the page:

@page {
    @top-right {
        content: "A running header :)";
    }
}

List of margin names:

@top-left-corner {}
@top-left {}
@top-center {}
@top-right {}
@top-right-corner {}
@left-top {}
@left-middle {}
@left-bottom {}
@right-top {}
@right-middle {}
@right-bottom {}
@bottom-left-corner {}
@bottom-left {}
@bottom-center {}
@bottom-right {}
@bottom-right-corner {}

Name a Page (to give it a specific style)

.mypage {
    page: mypage;
}

@page mypage {
/* Custom properties for my page */
}

Create/Modify an Image with HTML/CSS/JS

Duotone Image

<div class="parent">
          <div class="image duotone"></div>
      </div>
.image{
          width: 100%;
          height:350px;
          background: url('images/08.jpg') center center no-repeat;
          background-size: 100%;
          position: relative;
      }

      .duotone::after{
      content: '';
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left: 0;
      background-color: blue;
      mix-blend-mode: lighten;
      }

      .duotone::before{
      content: '';
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left: 0;
      background-color: red;
      mix-blend-mode: multiply;
      }

ASCII

See the example on https://medialab.sciencespo.fr/, as well as the explanations on https://julie-blanc.fr/blog/2020-03-27_medialab-2/

Each line of the image is a <pre> tag with a simple CSS style:

pre {
          font-family: monospace;
          line-height: 0.1;
          font-size: 9px;
      }

Exemples divers

Miscellaneous Examples

Create/Modify Text with HTML/CSS/JS

Gradient on Text

.gradient {
        background: -webkit-linear-gradient(blue, red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

Amazing Gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui a massa dignissim pharetra. Praesent porta dolor quis orci tristique sodales. Etiam consectetur, neque in elementum dignissim, felis nibh malesuada dolor, at venenatis nisl dolor at felis. Morbi at nulla elit. Aenean non congue est, vitae venenatis lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut tristique facilisis mollis. Integer lacus eros, lacinia in molestie a, placerat nec nisi. Aenean iaculis et nibh quis hendrerit. Aenean quis nisl ultrices, pretium velit ut, posuere justo. Nam faucibus pretium est, a lobortis nisi vestibulum at.

Text/Image Overlay

Eggplant Pizza!

<div class="superposition-exemple">
  <figure class="superposition-image">
    <img src="images/08.jpg">
  </figure>
  <p class="superposition-texte">Eggplant Pizza!</p>
</div>
.superposition-exemple{
  position: relative;
  background: red;
}

.superposition-image{ 
  mix-blend-mode: screen;
}

.superposition-texte{
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -100%) skew(-10deg, -10deg);
  z-index: 500;
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  color: white;
  line-height: 1.1;
  mix-blend-mode: exclusion;
  text-transform: uppercase;
}