CSS Paged Media aneb Gutenberg v prohlížeči

Jirka Kosek

Konference Devel
1. dubna 2017

Papír stále ještě není mrtev

  • knížky
  • tištěné katalogy
  • tiskové výstupy z aplikací (např. faktury)

HTML everywhere

  • HTML se stává nejpoužívanějším formátem nejen na webu
  • elektronické knihy EPUB/MOBI jsou jen archiv obsahující HTML+CSS
  • uživatelské rozhraní dnes většinou běží v prohlížeči a je to opět HTML+CSS

Kacířská myšlenka?

Budeme HTML+CSS používat i pro generování tiskového výstupu (PDF)

  • nemusíme se učit další technologii („CSS umí každý“)
  • nebude potřeba konvertovat dokumenty/data

Co potřebujeme nevíc oproti CSS v prohlížeči

  • definice rozměrů a layoutu stránky
  • záhlaví a zápatí
  • generový obsah, číslování, odkazy
  • kontrolu zlomu stránek a řádek
  • dělení slov
  • poznámky pod čarou
  • obsah, rejstřík
  • záložky

Rozměry a layout stránky

@page { size: a5 landscape; }

/* Rozdílné nastavení pro první, sudou/lichou stránku */
@page :first { … }
@page :left { … }
@page :right  { … }

Záhlaví a zápatí

@page {
  size: a4;

  @top-left {
    content: "Ze života hmyzu";
  }

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

Živé záhlaví/zápatí

<section class="kapitola">
  <h3>Nadpis</h3>

…

section.kapitola h3 {
  string-set: kapitola contents();
}

…

@top-left {
  content: string(kapitola);
}

Automatické číslování

<section class="kapitola">
  <h3>Nadpis</h3>

…

section.kapitola h3 {
  counter-increment: kapitola;
}

section.kapitola h3::before {
  content: "Kapitola " counter(kapitola);
}

Kontrola zlomu

  • dokument se sází automaticky bez možnosti ruční korekce
  • pomocí podmínek můžeme zajistit, že se stránky zalomí na vhodných místech
  • vlastnosti: page-break-before, page-break-after a page-break-inside
  • hodnoty: auto, always, avoid, left a right
/* Stránka se nesmí zalomit za nadpisem */
h2 + p { page-break-before: avoid }

Obsah a rejstřík

  • CSS neumí samo vygenerovat
  • lze vytvořit ručně, pomocí XSLT, JS, …
  • CSS umí vyhodnotit odkazy a nahradit je číslem strany nebo obsahem cílového elementu

Odkazy

<h3 id="last">Závěr<h3>

…

<a href="#last" class="pageref">Poslední kapitola na straně</a>
ukončuje text.

…

a.pageref::after {
  content: " " target-counter(attr(href url), page);
}

Dělení slov

<html lang="cs">

…

html {
  hyphens: auto;
}

Záložky

h1 { bookmark-level: 1; }
h2 { bookmark-level: 2; }
h3 { bookmark-level: 3; }

Poznámky pod čarou

<p>Text obsahujcící<span class="poznamka">Poznámku
pod čarou.</span> něco.</p>

…

.poznamka { float: footnote; }

Výplně

  • dynamické vyplnění volného místa
<ul class="toc">
  <li><a href="#uvod">Úvod</a></li>
  <li><a href="#stat">Stať</a></li>
  <li><a href="#zaver">Závěr</a></li>

…

/* Přidání teček a čísla strany do obsahu */
.toc a::after { 
 content: leader(dotted) " " target-counter(attr(href, url), page);
}

Implementace

Velcí uživatelé

  • Nakladatelství O'Reilly
    • HTMLBook – rozšíření HTML pro psaní knih
    • Atlas – publikační platforma používající HTMLBook
  • Nakladatelství Hachette Livre
    • ročně vydají několik tisíc knih vysázených pomocí CSS

Problémy

  • pomalá standardizace
  • neexistence kvalitní open-source implementace
  • neumí vše co XSL-FO

Další informace