[MediaWiki-commits] [Gerrit] mediawiki...Vector[master]: Feature flagged print styles
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/366173 )
Change subject: Feature flagged print styles
..
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 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 tags in print styles.
it's better for accessibility as well.
Bug: T169823
Change-Id: I453ae43099796a74c39d965b796f2fa13942106c
---
M SkinVector.php
A print.less
M skin.json
3 files changed, 112 insertions(+), 0 deletions(-)
Approvals:
Bmansurov: Looks good to me, approved
jenkins-bot: Verified
Phuedx: Looks good to me, but someone else must approve
diff --git a/SkinVector.php b/SkinVector.php
index 1733bb6..b0915aa 100644
--- a/SkinVector.php
+++ b/SkinVector.php
@@ -40,6 +40,15 @@
$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 @@
$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' );
}
diff --git a/print.less b/print.less
new file mode 100644
index 000..8e6021d
--- /dev/null
+++ b/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;
+ }
+
[MediaWiki-commits] [Gerrit] mediawiki...Vector[master]: Feature flagged print styles
Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/366173 )
Change subject: Feature flagged print styles
..
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.
Bug: T169823
Change-Id: I453ae43099796a74c39d965b796f2fa13942106c
---
M SkinVector.php
A print.less
M skin.json
3 files changed, 116 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Vector
refs/changes/73/366173/1
diff --git a/SkinVector.php b/SkinVector.php
index 1733bb6..07dd060 100644
--- a/SkinVector.php
+++ b/SkinVector.php
@@ -40,6 +40,15 @@
$this->vectorConfig =
ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
}
+ /** @inheritdoc */
+ public function getPageClasses( $title ) {
+ $className = parent::getPageClasses( $title );
+ if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles'
) ) {
+ $className .= ' vector-print-styles';
+ }
+ return $className;
+ }
+
/**
* Enables the responsive mode
*/
@@ -63,6 +72,12 @@
$this->enableResponsiveMode();
}
+ // Print styles are feature flagged.
+ // This flag can be removed when T154965 is resolved.
+ if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles'
) ) {
+ $out->addModuleStyles( 'skins.vector.print.styles' );
+ }
+
$out->addModules( 'skins.vector.js' );
}
diff --git a/print.less b/print.less
new file mode 100644
index 000..b0160d4
--- /dev/null
+++ b/print.less
@@ -0,0 +1,92 @@
+@pureBlack: #000;
+
+@media print {
+ body.vector-print-styles {
+ padding: 10px;
+ font-family: serif;
+ }
+
+ .vector-print-styles {
+
+ // 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 {
+ page-break-before: avoid;
+ display: block;
+ padding: 0;
+ position: relative;
+ }
+
+ h2 {
+ font-size: 18pt;
+ line-height: 24pt;
+ margin-bottom: 0.25em;
+ overflow: hidden;
+ }
+
+ 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 {
+ list-style-type: square;
+ margin: .3em 0 0 1.6em;
+ padding: 0;
+ margin-top: 10px;
+
+ li {
+ padding: 5px 0;
+ font-size: 10pt;
+ }
+ }
+ }
+}
diff --git a/skin.json b/skin.json
index 3f016a7..b96f87c 100644
--- a/skin.json
+++ b/skin.json
@@ -48,6 +48,13 @@
}
}
},
+ "skins.vector.print.styles": {
+ "targets": [ "desktop", "mobile" ],
+ "position": "top",
+ "styles": [
+ "print.less"
+ ]
+ },
"skins.v
