Page MenuHomePhabricator

Vector: Avoid specifying line-height using "em" (vertical squishing for headers/large text)
Closed, ResolvedPublic

Description

Author: spiff

Description:
Monobook makes frequent use of line-height specifications using the unit "em".
While these lengths _are_ font-size-relative, which is good, the computed value,
and not the relative value is inherited by child elements, which is bad.

The problem becomes apparent when a child node uses a different font-size. E.g.
many boxes on Wikipedia use font-size:80%. However, because the computed value
of line-height is inherited, the line-height stays unchanged (i.e. too large).

The solution is to use plain number line-heights, i.e. "1.5" instead of "1.5em".
That way, the line-height will properly scale when the font-size is changed.

Here's the relevant section from the CSS2 spec:
http://dev.w3.org/csswg/css2/visudet.html#propdef-line-height

Values for this property have the following meanings:
[...]
<length>
    The box height is set to this length. Negative values are illegal. 
<number>
    The computed value of the property is this number multiplied by the element's font
    size. Negative values are illegal. However, the number, not the computed value, is
    inherited.

Version: master
Severity: minor
See Also:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 8:27 PM
bzimport set Reference to bz2013.

ayg wrote:

Agreed, makes no sense to inherit computed value. Fixed in r16988.

Reopening, obviously reverted in r17047.

ayg wrote:

*** Bug 9162 has been marked as a duplicate of this bug. ***

rahul14m93 wrote:

Gerrit Change #55126

https://gerrit.wikimedia.org/r/55126 (Gerrit Change Id73860df38a9d284bb4a8f279c1b525f99fc1150) | change ABANDONED [by Krinkle]

  • Bug 60523 has been marked as a duplicate of this bug. ***
GOIII set Security to None.
GOIII subscribed.

Change 539443 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Unify LESS variable naming scheme for @line-height-* variables

https://gerrit.wikimedia.org/r/539443

Change 539443 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Unify LESS variable naming scheme for @line-height-* variables

https://gerrit.wikimedia.org/r/539443

Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.

This has been successfully resolved.

Change 553854 had a related patch set uploaded (by Jforrester; owner: Ammarpad):
[mediawiki/core@master] Remove obsolete hack for level I heading

https://gerrit.wikimedia.org/r/553854

Change 553854 merged by jenkins-bot:
[mediawiki/core@master] Remove obsolete hack for level I heading

https://gerrit.wikimedia.org/r/553854