Commit graph

27 commits

Author SHA1 Message Date
Timo Tijhof b843094a2d Re-implement and improve mw-jump links with pure CSS
* Improve their accessibility by giving both links
  a full label "Jump to x" and "Jump to y" instead
  of "Jump to: ", "x", "y".

  This also makes things much better for localisation, for which
  we generally discourage use of concatenation.

* Use pure CSS for the toggling of the visibility on focus,
  instead of relying on JavaScript. Especially given the
  JS comes form core's 'jquery.mw-jump' module, which is
  considered technical debt per T195256. Alternatively,
  that could be copied to vector.js, but pure CSS
  is possible, so why not.

* Use plain <a> links in the HTML instead of wrapped in a <div>.
  This solves the long-standing problem whereby the margin
  between #contentSub and #mw-content-text had to be awkwardly
  negated and overridden in core and on various to make sure that
  the wrapper itself would become visible as needed, in a way that
  has margin around this. This whole problem doesn't apply when
  simply using inline links that aren't part of the regular flow
  with .mixin-screen-reader-text. On focus, the individually
  focussed link appears in regular flow, without the need for
  any custom styles.

* This uses :not(:focus) to naturally make it render in the default
  way on focus, and visibibly hidden/clipped otherwise.
  This is supported in IE9+ and Android 2+.
  There is a way to make it work with CSS2 for IE7-8, by applying
  the mixin to '.mw-jump-link' only and then undoing all of
  'position', 'width', 'height', 'clip', and 'margin' on :focus.
  But I'm not sure that's worth it here. The fallback in IE7-8
  for not supporting ":not(:focus)" is that the accessibility
  link is simply visible always, which seems like a good fallback
  for accessibility, and doesn't hurt anything.

Bug: T195256
Change-Id: Icaadb290f692b3617688d32cbb66dfb007f1c82c
2018-05-24 00:08:02 +00:00
Volker E 8e79fee078 Replace #toc selector by .toc
Replacing id CSS selector by lower specific class selector.

Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: If8768278750d49e70a29d993e759f246082fefb0
2018-03-29 00:40:36 +00:00
Stephen Niedzielski 4a969cadf6 Hygiene: improve Math formula print styling comment
Add an example from the Math extension showing how the print styling
rule for font family is relevant.

Bug: T181138
Change-Id: Ib5a35b7a555c898d354c16077f44acf1e50f5ebb
2018-01-16 10:05:53 -06:00
Stephen Niedzielski 08e68d600a Fix: style printed math formulas with serif font
When printed, math formulas appear best rendered in the same font as the
body, serif. Override dl and other sans-serif styling rules for all
printed images. e.g.: https://en.wikipedia.org/wiki/Frame-dragging.

Bug: T181138
Change-Id: I9755a23cbec8388964c27d938a7aea8e25fe2f7f
2018-01-11 16:32:42 -06:00
Yifei He 5847c798dd Inline lists in new print styles should not have a smaller font size than surrounding content
Bug: T178667
Change-Id: I2a9bc621db5a09cb5a5653488e0f9dd6c236a773
2017-12-20 02:43:18 +00:00
Albert221 4ee212adc4 Fix incorrect indentation of TOC on print preview
Also add the white space that was taken by hiding
.tocnubmer to .toctext

Bug: T179363
Change-Id: I06c502f3d4bee687ed7f300246687aff978ed1d6
2017-12-11 22:26:24 +01:00
jdlrobson c863b94302 Print styles in Vector are no longer feature flagged
Remove feature flagging of print styles

Changes:
* Merge experimental module into skins.vector.styles
* Update skins.vector.styles RL class to support LESS variable
* Remove feature flag class in HTML and LESS (update indents in
LESS file)

Bug: T178028
Change-Id: I8d5c59c5c9f415ffbd7fa41a512cbea87887e9e7
2017-11-02 11:04:58 -07:00
jdlrobson 65b6ba3fbf Clear any floats before the print footer
Bug: T178656
Change-Id: I6291e8ac53240e4e2f1899213a516d27dba95bd5
2017-10-20 13:21:58 -07:00
Baha 2d3730ba8e Print styles: fix breaking of table of contents
By changing the display of the table of contents we'll make sure that it
doesn't try to occupy the whole page width. This is useful when an infobox is
floated to the right of the table of contents.

Bug: T174957
Change-Id: Ifc808bdd2b65867d14278b12735103c761fb8111
2017-09-21 16:06:51 -04:00
Baha 1aa66cc931 Print styles: set minimum width for paragraphs
An arbitrary 120pt (approved by the designer) has been chosen as the
minimum width of paragraphs. This is especially useful when a paragraph
is surrounded by two floating elements from the left and right. If there
is not enough space in the middle, then the change will push the
paragraph text until there's enough space to display the text.

Bug: T175008
Change-Id: I428f153309162e23606e5187a0e1bd7244253f10
2017-09-14 13:16:36 +01:00
jenkins-bot d3a3832e83 Merge "Change print wordmark margin bottom to 20px from 10px" 2017-08-22 22:16:08 +00:00
jdlrobson 9101bd6327 Adjust TOC print styles
* Font size shrunk and declared in `pt`
* `margin` adjustment
* `page-break-before` now uses `avoid`

Bug: T173767
Change-Id: Ieeabc22079978cdf1f8484f3ac9961d990901336
2017-08-22 22:09:41 +00:00
Baha 932990c2fe Change print wordmark margin bottom to 20px from 10px
Per T169826#3542839.

Bug: T169826
Change-Id: I8658814988c15e48ca90875d33327a48ee8b7ca1
2017-08-22 16:23:48 -04:00
Volker E ce9d900cb3 Replace @colorGray9 with static color value #999
Replacing `@colorGray9` variable with static color value `#999`
as it's among those color values which are not part of the new
WikimediaUI color palette any more. Will be deprecated in
Iaef72470c596656

Bug: T172850
Change-Id: I94c40badb4a8e4703b5e3400d78641edd98f0300
2017-08-10 13:26:02 -04:00
jenkins-bot c34e08ddb8 Merge "Padding tweak for all lists" 2017-08-09 17:02:29 +00:00
Baha bb7579d3e5 Embed print wordmark and pre-render it
Make sure the print wordmark is readily available for printing. In
addition to embedding, pre-render the wordmark outside the viewport so
that the print dialog doesn't block image rendering in the print view.

Bug: T169826
Change-Id: I788bcecadf26e4e5558b5b37e6fb1b2e9378277e
2017-08-04 11:42:18 -04:00
jdlrobson 595bf2cece Padding tweak for all lists
This is particularly important in references where this small
change saves a large number of pages from being printed.

Bug: T172144
Change-Id: I7ceb244dc7be847cbe0fdc58c6a1cac6b0de3e0a
2017-08-03 15:18:40 -07:00
jenkins-bot cf999f4e17 Merge "Add print logo" 2017-08-02 00:59:51 +00:00
Baha 413870d350 Add print logo
Logo cannot be displayed as a background image because it won't be
visible in print unless the user prints backgrounds too.

A sample configuration looks like this:

$wgVectorPrintLogo = [
	'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
	'width' => 174,
	'height' => 27
];

The solution presented in the patch has a downside of not being able
to scale images down if their dimensions are bigger than the
dimensions specified in the config variable. For example, if we want
to go with an SVG image, then IE8 won't be able to render it.
Alternatively, if we want to go with a PNG image, its dimensions need
to match the exact dimensoins in the config variable, otherwise the
image will show up larger or smaller depending on its dimensions.

A more complicated approach of scaling images using `transform: scale`
hasn't been used because we wanted to keep the configuration simple
while supporting the majority of our users. With the current change,
we can reuse the existing configuration options from Minerva, for
exmaple. It would look something like this:

$wgVectorPrintLogo = [
	'url' => $wgMFCustomLogos['copyright'],
	'width' => $wgMFCustomLogos['copyright-width'],
	'height' => $wgMFCustomLogos['copyright-height']
];

Bug: T169826
Change-Id: If8f9f8d95fd3c955ece37d6c8ab6995596189667
2017-08-01 10:55:53 -04:00
jdlrobson d1d639a3ab Print styles: Border bottom of headings should not overlap infoboxes
Specifically this avoids the issue highlighted here:
https://phabricator.wikimedia.org/T169823#3461814

Bug: T169823
Change-Id: Ie73b727e26876b027e5c4276f82a9ae98caff2bb
2017-07-28 11:58:04 +00:00
jdlrobson d897c8d1d3 Print styles: footer
Tones down license information
and makes last updated primary information in
printed view

Additional changes:
* variables now inherits from mediawiki.ui

Bug: T169823
Change-Id: Ie678967a27baec8715cf86b6a0f7e7651f867be1
2017-07-28 11:22:07 +02:00
jenkins-bot f7ec0489cb Merge "Print mode: Define when to use serif and when to use sans-serif" 2017-07-26 16:01:56 +00:00
jdlrobson 728e9a13a2 Print mode: Define when to use serif and when to use sans-serif
Additional changes:
* Define variables for fonts and use them
* Group and make clearer where fonts apply

Bug: T169823
Change-Id: I0b7d557048859936f2eb2f646202bc8071bb84ba
2017-07-26 15:54:52 +00:00
jdlrobson f5124a0dec Print styles: Apply padding and margins to ol as well as ul
Bug: T169823
Change-Id: I60638f18ea5ca4362699e7ea930b426be4e8eee1
2017-07-26 15:54:43 +00:00
jdlrobson 1cbfd714d1 Fix CSS selector output in print stylesheet
Less doesn't allow to nest like this. It creates the invalid selector
`.vector-experimental-print-stylesbody`

This is a follow up to I453ae43099796a74c39d965b796f2fa13942106c

Bug: T169823
Change-Id: I9cc2f474fdcafdcc68378185391607b72b0f667a
2017-07-25 11:29:43 +00:00
jdlrobson 8b9c485580 Experimental table of content print styles
* Provide sense of hierarchy
* Make full width
* Break pages before and after

Bug: T169823
Change-Id: I8a20c70b550de5bfda638873d180ea97880dfd13
2017-07-21 10:45:01 -07:00
jdlrobson 3a3e7ac046 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
2017-07-20 11:54:55 -07:00