Wikimedia

Remove numbers from Table of Contents layout in print mode, as they display incorrectly

This task is about MediaWiki's Vector skin.

Looking at article mentioned by Mathieu on the mailing list, the Table of Contents (TOC) layout is incorrect with numbers higher than 10 when compared with layouts at https://app.zeplin.io/project/58b5f95e7b103f89913c25de/screen/5971579e3ec2ea33c89bf2c1

See the screenshot in the Phabricator task.

This is demonstrated when printing https://fr.wikiversity.org/wiki/Recherche:Lex%C3%A8mes_fran%C3%A7ais_relatifs_aux_structures

Expected: Left edge of 16.1 should align with left edge of 'L' in "Lexèmes"

This is caused by .tocnumber using margin-right: 30px to set its width. Unfortunately, this means that the width of the element (the list item number container) varies with the width of its content.

To address this problem we want to remove the numbers entirely from the output. This can easily be achieved by the css rule:

.tocnumber { display: none;}

Given the table of contents does not map to page numbers, the usefulness is debatable. A decision was made to remove these numbers.

How to test:

  • Print a page using the browser's print function (DO NOT use "printable version" in the side bar).
  • The table of contents should appear in the printed result but the numbers should not be visible.

Task tags

  • css
  • less

Students who completed this task

Albert Wolszon

Task type

  • code Code
  • web Design
close

2017