Feature flagged print styles

These are feature flagged to allow editors to test before making
them the default. A class is added to the body tag to allow us
to switch between old and new styles at a later date.

To start with we introduce some typography improvements.
Further iterations will focus on other elements.

Changes:
* headings were previously diluted in the body content and difficult to spot.
This evens out the spacing between last content and its own content block.
* clear ownership of <p>s with its heading
* We would like to match Latex style body typography with single column.
The new styles reduce the number of pages by around 20-25%
* hyperlink underline -
This is a community requested feature. We do not use color in print styles
because it's printer friendly. Because of this, it is not possible to indicate
blue links in articles. If a user wants to know if this article exists on wikipedia,
it's not possible given solution.
We would like to underline the <a> tags in print styles.
it's better for accessibility as well.

Bug: T169823
Change-Id: I453ae43099796a74c39d965b796f2fa13942106c

SkinVector.php

@@ -40,6 +40,15 @@ class SkinVector extends SkinTemplate {
 		$this->vectorConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
 	}
 
+	/** @inheritdoc */
+	public function getPageClasses( $title ) {
+		$className = parent::getPageClasses( $title );
+		if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
+			$className .= ' vector-experimental-print-styles';
+		}
+		return $className;
+	}
+
 	/**
 	 * Enables the responsive mode
 	 */
@@ -63,6 +72,14 @@ class SkinVector extends SkinTemplate {
 			$this->enableResponsiveMode();
 		}
 
+		// Print styles are feature flagged.
+		// This flag can be removed when T169732 is resolved.
+		if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
+			// Note, when deploying (T169732) we'll want to fold the stylesheet into
+			// skins.vector.styles and remove this module altogether.
+			$out->addModuleStyles( 'skins.vector.styles.experimental.print' );
+		}
+
 		$out->addModules( 'skins.vector.js' );
 	}
 

print.less

@@ -0,0 +1,86 @@
+@pureBlack: #000;
+
+@media print {
+
+	.vector-experimental-print-styles {
+		&body {
+			padding: 10px;
+			font-family: serif;
+		}
+
+		// Normalize Blue links in the article
+		a {
+			border-bottom: 1px solid #aaa;
+		}
+
+		.firstHeading {
+			font-size: 25pt;
+			line-height: 28pt;
+			margin-bottom: 20px;
+			padding-bottom: 5px;
+		}
+
+		// Headings
+		.firstHeading,
+		h2 {
+			border-bottom: 2px solid @pureBlack;
+		}
+
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 30px 0 0;
+			font-family: sans-serif;
+		}
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			padding: 0;
+			position: relative;
+		}
+
+		h2 {
+			font-size: 18pt;
+			line-height: 24pt;
+			margin-bottom: 0.25em;
+		}
+
+		h3 {
+			font-size: 13pt;
+			line-height: 20pt;
+		}
+
+		h4,
+		h5,
+		h6 {
+			font-size: 10pt;
+			line-height: 15pt;
+		}
+
+		p {
+			font-size: 10pt;
+			line-height: 16pt;
+			margin-top: 5px;
+			text-align: justify;
+		}
+
+		blockquote {
+			border-left: 2px solid @pureBlack;
+			padding-left: 20px;
+		}
+
+		ul {
+			margin: 10px 0 0 1.6em;
+			padding: 0;
+
+			li {
+				padding: 5px 0;
+				font-size: 10pt;
+			}
+		}
+	}
+}

skin.json

@@ -48,6 +48,13 @@
 				}
 			}
 		},
+		"skins.vector.styles.experimental.print": {
+			"targets": [ "desktop", "mobile" ],
+			"position": "top",
+			"styles": [
+				"print.less"
+			]
+		},
 		"skins.vector.styles.responsive": {
 			"targets": [ "desktop", "mobile" ],
 			"position": "top",
@@ -101,6 +108,8 @@
 	"config": {
 		"VectorUseSimpleSearch": true,
 		"VectorUseIconWatch": true,
+		"@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)",
+		"VectorExperimentalPrintStyles": false,
 		"VectorResponsive": false
 	},
 	"manifest_version": 1