CSS for print

vista l’attuale linea grigia che divide gli epub ed il web.

Perchè non provare a stampare un gitbook, senza esportarlo in pdf ma dandogli tutte le regole css che desideriamo?

  1. scegliamo il tema più adatto tra quelli di gitbook
  2. proviamo un ctrl+P che non si sa mail
  3. denigriamo il risultato
  4. poniamoci nelle condizioni di migliorare!

Capire le pagine:

The Specifications Link

Much of the CSS you already know will be useful for formatting for print. Specifically for print, we have the “CSS Paged Media Module” and the “CSS Generated Content for Paged Media Module” specifications. Let’s look at how these work.

THE @PAGE RULE LINK

The @page rule lets you specify various aspects of a page box. For example, you will want to specify the dimensions of your pages. The rule below specifies a default page size of 5.5 by 8.5 inches. If you intend to print a book, perhaps by a print-on-demand service, then finding out the sizes you can use is important.

@page {
  size: 5.5in 8.5in;
}

In addition to specifying sizes with length values, you may also use paper size keywords, such as “A4” or “legal.”

@page {
  size: A4;
}

You may also use a keyword to specify the page’s orientation — “portrait” or “landscape.”

@page {
  size: A4 landscape;
}

fonte: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

Da leggere: https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/


Next, we deal with the specifics of the left- and right-hand pages, using the :right and :left spread pseudo-classes.

The right-hand spread will have the title of the book in the bottom-left margin box, a page counter in the bottom-right, and the chapter’s title in the top-right. The chapter’s title is set using string-set further down in the style sheet.

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}
3-image-spread-right-opt
(See large version)

The left-hand spread has the book’s title in the bottom-right and the page counter in the bottom-left.

@page:left {
  @bottom-right {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }

  @bottom-left { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }
}
4-image-spread-left-opt
(See large version)

For the first page, which contains the cover image, we’ll make sure that no generated content appears by setting it to normal.

@page:first {
  @bottom-right {
    content: normal;
    margin: 0;
  }

  @bottom-left {
    content: normal;
    margin: 0;
  }
}

The next section of the style sheet deals with counters. In addition to the preset page counter, we are defining counters for chapters and figures.

/* Reset chapter and figure counters on the body */
body {
  counter-reset: chapternum figurenum;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  line-height: 1.5;
  font-size: 11pt;
}

/* Get the title of the current chapter, which will be the content of the h1.
Reset figure counter because figures start from 1 in each chapter. */
h1 {
  string-set: doctitle content();
  page-break-before: always;
  counter-reset: figurenum;
  counter-reset: footnote;
  line-height: 1.3;
}

/* Increment chapter counter */
h1.chapter:before {
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}

/* Increment and display figure counter */
figcaption:before {
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";
}

Chapters now have their number placed before the title. Figures also display their number.