Print-only variables should belong only to print stylesheet.
Also clarifying usage and naming throughout file.
Change-Id: I40dec1baadcf3dbbcf44252a8f577f19017fcbbc
Reyling only on base font family variables. It's debatable if
something like `@font-family-base` would make sense, but with only
3 variables the abstraction would seem over-engineered for the time being.
Change-Id: I294ef8753dd3c73f4ed3fd89d43978dfaf6e0f06
* 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
Replacing id CSS selector by lower specific class selector.
Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: If8768278750d49e70a29d993e759f246082fefb0
Add an example from the Math extension showing how the print styling
rule for font family is relevant.
Bug: T181138
Change-Id: Ib5a35b7a555c898d354c16077f44acf1e50f5ebb
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
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
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
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
* Font size shrunk and declared in `pt`
* `margin` adjustment
* `page-break-before` now uses `avoid`
Bug: T173767
Change-Id: Ieeabc22079978cdf1f8484f3ac9961d990901336
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
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
This is particularly important in references where this small
change saves a large number of pages from being printed.
Bug: T172144
Change-Id: I7ceb244dc7be847cbe0fdc58c6a1cac6b0de3e0a
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
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
Additional changes:
* Define variables for fonts and use them
* Group and make clearer where fonts apply
Bug: T169823
Change-Id: I0b7d557048859936f2eb2f646202bc8071bb84ba
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
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
