Technical Writers' Exchange of Experience Workshop
June 14th, 2018
Let's use HTML and CSS for producing PDFs
obscuretechnology as CSS knowledge is widespread
/* Basic page dimensions and orientation */
@page { size: a5 landscape; }
/* Different settings for first, odd and even pages */
@page :first { … }
@page :left { … }
@page :right { … }
/* Page masters can be named
so more of them can be used in the document */
@page cover { … }
.coverpage { page: cover; }
@page {
size: a4;
@top-left {
content: "Ze života hmyzu";
}
@bottom-right {
content: counter(page);
}
}
<section class="chapter">
<h3>Title</h3>
section.chapter h3 {
string-set: chapter contents();
}
…
@top-left {
content: string(chapter);
}
<section class="chapter">
<h3>Title</h3>
section.chapter h3 {
counter-increment: chapter;
}
section.chapter h3::before {
content: "Chapter " counter(chapter);
}
page-break-before, page-break-after a page-break-insideauto, always, avoid, left a right
/* Do not break page after heading */
h2 + p { page-break-before: avoid }
<h3 id="last">Conclusions<h3>
…
<a href="#last" class="pageref">Last chapter on page</a>
is really the last one.
a.pageref::after {
content: " " target-counter(attr(href url), page);
}
<html lang="cs">
html {
hyphens: auto;
}
h1 { bookmark-level: 1; }
h2 { bookmark-level: 2; }
h3 { bookmark-level: 3; }
<p>Text that contains<span class="note">Footnote</span> and then continues.</p>
.note { float: footnote; }
<ul class="toc">
<li><a href="#intro">Introduction</a></li>
<li><a href="#body">Body of document</a></li>
<li><a href="#conclusion">Conclusion</a></li>
/* Adding dots to ToC entries */
.toc a::after {
content: leader(dotted) " " target-counter(attr(href, url), page);
}