Page MenuHomePhabricator

Create PDF styles for books
Closed, InvalidPublic

Description

Background

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

Requirements

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: https://www.mediawiki.org/wiki/Reading/Web/PDF_Functionality

Design


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

Spec for the design
https://zpl.io/bWQ15eV

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

Spec for chapterless index
https://zpl.io/aMdRZrV

Spec for index with chapters
https://zpl.io/a3X0jZd

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

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

Spec for article header with chapters
https://zpl.io/2vMn6dn

Spec for article header without chapters
https://zpl.io/2EdwElb

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

Spec for page number
https://zpl.io/a8EKJgb

List of text and image contributors
WIP

Licensing
WIP

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 15 2017, 11:22 AM
ovasileva triaged this task as High priority.Jun 15 2017, 11:22 AM
TheDJ added a subscriber: TheDJ.Jun 15 2017, 3:04 PM

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.

Nirzar updated the task description. (Show Details)Jul 20 2017, 1:31 AM
ovasileva updated the task description. (Show Details)Jul 20 2017, 6:15 PM

@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.

ovasileva updated the task description. (Show Details)EditedAug 30 2017, 5:23 PM

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.

ovasileva moved this task from Triage to Current Sprint on the Proton board.
Nirzar updated the task description. (Show Details)Sep 11 2017, 7:55 PM
Nirzar updated the task description. (Show Details)Sep 11 2017, 8:12 PM

@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"

ovasileva moved this task from Current Sprint to Backlog on the Proton board.Sep 19 2017, 4:38 PM

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 Readers-Web-Backlog board.
ovasileva closed this task as Invalid.Apr 9 2018, 2:46 PM

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