Create PDF styles for books
Closed, InvalidPublic
Actions

Assigned To

None

Authored By

	ovasileva
	Jun 15 2017, 11:22 AM

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

Wikipedia wordmark
Title of the book
Description of the book
Author of the book
Language of the articles
number of articles
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

Chapter name if it exists (ref to diff mocks for chapterless index)
Name of the article with number of page it will be on
H2s of the article with corresponding page numbers
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

chapter name
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

Related Objects
Search...

Status	Assigned	Task
Resolved	• JKatzWMF	T150871 [EPIC] (Proposal) Replicate core OCG features and sunset OCG service
Invalid	None	T186740 [EPIC] It should be possible to print a book using the Proton service
Invalid	None	T171832 Deploy new book renderer to all projects
Duplicate	None	T171833 Deploy new book renderer to all projects side by side with OCG
Invalid	None	T171836 Apply new print styles for books
Invalid	None	T167955 Create PDF styles for books
Resolved	• dpatrick	T173014 Security review of pdfrw

Event Timeline

ovasileva created this task.Jun 15 2017, 11:22 AM

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

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.

James Denton - Wikipedia.pdf722 KBDownload

/** 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 moved this task from Needs analysis to Designing/discussing right now on the Web-Team-Backlog (Design) board.Jun 16 2017, 1:45 AM

• 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 added a parent task: T171836: Apply new print styles for books.Jul 27 2017, 10:59 AM

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

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 mentioned this in T135643: Show tables in pdfs (#9).Aug 29 2017, 2:49 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 added a project: Proton.Aug 30 2017, 5:27 PM

ovasileva moved this task from Triage to Current Sprint on the Proton board.

ovasileva mentioned this in T171836: Apply new print styles for books.Sep 11 2017, 11:54 AM

• 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 edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).Sep 13 2017, 1:39 PM

ovasileva moved this task from Incoming to Upcoming on the Web-Team-Backlog board.

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 Web-Team-Backlog board.

Jdlrobson moved this task from Needs Prioritization to Tracking on the Web-Team-Backlog board.Feb 7 2018, 7:23 PM

Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.

Jdlrobson added a parent task: T186740: [EPIC] It should be possible to print a book using the Proton service.Feb 7 2018, 7:26 PM

• bmansurov unsubscribed.Feb 7 2018, 8:04 PM

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

	F9465840: inside-book.jpg
	Sep 11 2017, 8:12 PM

	F9465841: book-front.jpg
	Sep 11 2017, 8:12 PM

	F9465148: first.png
	Sep 11 2017, 7:55 PM

	F9465159: image.png
	Sep 11 2017, 7:55 PM

Create PDF styles for booksClosed, InvalidPublicActions