Page MenuHomePhabricator

Create PDF styles for books
Closed, InvalidPublic

Assigned To
Authored By
Jun 15 2017, 11:22 AM
Referenced Files
F9465840: inside-book.jpg
Sep 11 2017, 8:12 PM
F9465841: book-front.jpg
Sep 11 2017, 8:12 PM
F9465136: index with chapter.png
Sep 11 2017, 7:55 PM
F9465148: first.png
Sep 11 2017, 7:55 PM
F9465159: image.png
Sep 11 2017, 7:55 PM
F9465130: book cover - en.png
Sep 11 2017, 7:55 PM
F8463180: James Denton - Wikipedia.pdf
Jun 15 2017, 3:04 PM



As a part of the switch to a new PDF renderer, we would like to customize and update our styles for books.


Books must contain the following elements:

  • Book title page
  • Table of contents with page numbers
    • Selecting a section from the table of contents will navigate the user to the corresponding section within the book
  • Infobox(if any)
  • Tables (if any)
  • Single-column layout
  • Page numbers
  • All article images and captions
  • Chapter name (if applicable)
  • Links to pages linked from the article (blue links and external links)
  • The references for each article from the book will appear at the end of the article
  • Each article must begin on a new page
  • Text and image sources, contributors, and licenses at the end of each book

More information:


book-front.jpg (937×1 px, 174 KB)

inside-book.jpg (812×1 px, 124 KB)

Book cover design
Book cover will be a single page.

It will have following data points

  1. Wikipedia wordmark
  2. Title of the book
  3. Description of the book
  4. Author of the book
  5. Language of the articles
  6. number of articles
  7. number of total pages inside the book

The cover page will be Page Number 0

book cover - en.png (1×1 px, 88 KB)

Spec for the design

Book index design
Book index is used to give a more book like experience.
It will have Following elements

  1. Chapter name if it exists (ref to diff mocks for chapterless index)
  2. Name of the article with number of page it will be on
  3. H2s of the article with corresponding page numbers
  4. we won't include H3, H4, H5, H6 in the book index

Index will be Page number 1 for the book

index with chapter.png (1×1 px, 108 KB)

Spec for chapterless index

Spec for index with chapters

Incorporate new print styles work into individual article
Refer to the entire spec for the single article design

One major difference [VIMP]
We show wikipedia wordmark on the first page of individual articles.
If the article is part of the book, we won't show wordmark on first page of the article, we will use that space to show 2 data points

  1. chapter name
  2. Article x of y

first.png (1×1 px, 276 KB)

If the chapter name doesn't exist, it will just say "Article x of y"

Spec for article header with chapters

Spec for article header without chapters

Page number and article name on every page
Page number will be printed under a horizontal line, it will be center aligned

image.png (398×1 px, 44 KB)

Spec for page number

List of text and image contributors


Event Timeline

btw i played a bit with two column print styles in Chrome (which electron calls out to).

The attached file is a PDF (Chrome browser) print, using the current print css, + some extra print css of my own. It uses 2 columns, spans infoboxes 100% across a single column, and forces wiki tables to span 2 columns. There's a ton of edge cases that I haven't dealt with, but many can be taken straight from the mobile view and be reapplied to this context.

/** you'd probably want to limit 2 column mode to certain widths btw */
@media print {
	#firstHeading {
		margin: 0;
	td, li {
		page-break-inside: avoid;
		break-inside: avoid;
	.mw-parser-output {
		column-count: 2;
	/*.mw-parser-output h2,*/
	.mw-parser-output .wikitable {
		column-span: all;
	.mw-body-content table {
		float: none!important;
		margin-left: auto !important;
		margin-right: auto !important;
	.mw-body-content .infobox,
	.mw-body-content .vertical-navbox,
	.mw-body-content .navbox,
	.mw-body-content .navbox > .navbox-inner {
		width: 100% !important;
		box-sizing: border-box;
		display: table;

	.mw-body-content {
		word-wrap: break-word;

} /* end of print style */

@page {
	margin: 1cm;
	size: A4 portrait;

@TheDJ This is great!! I was trying to figure out how we can do this. Let me add this to the new style improvements that we have been working on and post couple of examples of single column and double column.

@ovasileva was just reviewing the design requirements. one minor thing

  1. Article name on every page next to the page number - @bmansurov mentioned it would be difficult to get that technically. I am okay striking it off from requirement

To clarify, it would take more effort to do so. It's not difficult, but if we want to deliver something sooner, we may want to start simple.

@Nirzar, @bmansurov - not a huge deal, I think it's okay to remove.

Added chapter name to requirements. In previous book rendering, chapters had same hierarchy as article names in books without chapters. If chapters existed, article names would be pushed down.

@Nirzar - looking good! My only comment is the location of the wordmark on the title page, but if it was okayed by the other designers, let's keep it this way. To me, the title reads "Wikipedia Best Places to Visit in Germany"

It seems that splitting this will depend on our eventual choice of renderer. If we decide to go with headless chromium and do post-processing separately, we should pull out the styles for page numbers and toc into a separate task

According to Sam's email yesterday, the renderer planned was headless Chromium and was being evaluated in T175853. The ticket resolution says headless Chromium is ok so this is ready to work on.

ovasileva changed the task status from Open to Stalled.Oct 10 2017, 12:27 PM
ovasileva moved this task from Upcoming to Needs Prioritization on the Web-Team-Backlog board.

Closing as per T184772#4116906. Pediapress will be taking on rendering of PDF books.