Template:Classed heading/doc

From Wikisource
Jump to navigation Jump to search

Usage

[edit]

This generates a HTML heading element for use in applying semantically-correct headings to works when == Equals syntax == is insufficient (perhaps because you want to apply a class, or have multiple lines).

It explicitly has no support for direct CSS formatting: it is designed for use with classes and/or index-specific CSS.

By default, the headings have the normal MediaWiki font sizes for headings, but are centred, not bolded and do not have an underline.

  • level The heading level (default: 2)
  • class Optional CSS classes (use this if you have multiple heading styles in a single work). The top-level heading element always has class .wst-heading as well as additional classes.
  • id Optional ID (used as an anchor). If not given the contents of the first line is used. This parameter should also be used to add an suitable simple id, if markup or complex formatting is used in the first line (such as a footnote directly associated with the heading.)
  • 1, 2, etc. The lines of the header. Each line is in a span under the default span with class .wst-heading-line and can be targeted with :nth-child as needed.

Example

{{classed heading|l=2|Line 1|Line 2}}
{{lorem ipsum}}

Line 1Line 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example

{{classed heading|l=3|Line 1|Line 2}}
{{lorem ipsum}}

Line 1Line 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Common CSS examples

[edit]

There are a few common styling choices you may wish to replicate. You can target specific levels using the hN tag names.

Margin/leading underneath the heading

[edit]

Example: Page:Ayn Rand Anthem.pdf/21 (using Index:Ayn Rand Anthem.pdf/styles.css)

h3 .wst-heading-line {
    margin-bottom: 1.5em;
}

Small-caps for the second line onwards

[edit]
h3 .wst-heading-line:nth-child(n+2) {
    font-variant: small-caps;
}

Also consider all-small-caps if you want Proper Nouns to appear in "all small caps", including the first letters: e.g. Oxford.

Left-aligned titles

[edit]

Example: Page:The Sundering Flood - Morris - 1898.djvu/15 (using Index:The Sundering Flood - Morris - 1898.djvu/styles.css)

h3 .wst-heading {
    text-align: left;
}


Template data

[edit]
This is the TemplateData documentation for this template used by VisualEditor and other tools.

Classed heading


Add an HTML header with optional classes

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
levellevel l

The level of the heading (1 is the "biggest" heading)

Default
3
Example
3
Numbersuggested
11

First line of heading

Example
Chapter 1
Linerequired
22

Second line of the heading

Example
Down the Rabbit-Hole
Lineoptional
classclass

Optional class to use to target specific CSS

Example
chapter_heading
Lineoptional
idid

ID of the header - can be used for linking to sections

Default
Contents of the first line (parameter 1)
Example
chapter1
Unknownoptional