Template:X-larger block
{{{1}}}
 | This template uses block elements, e.g. See H:DIVSPAN for details. |
 | This template uses TemplateStyles: |
 | This template is used on approximately 20,000 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them. |
Usage
General form
This template renders one or more blocks of text in the appropriate smaller or larger font.
e.g.
{{X-larger block|{{lorem ipsum}}}}
yields
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.
To modify the size of a few words within a block of text, use the appropriate inline template (<span>)—this will modify the span without breaking up the text, and without interfering in block-level properties like line spacing.
As open and close tags
This template is also available in an open and close format where the <div> needs to span a page break in the Page namespace.
- {{X-larger block/s}} to open
- {{X-larger block/e}} to close
- Example
{{X-larger block/s}}{{lorem ipsum}}{{lorem ipsum}}{{X-larger block/e}}
yields
Technical notes
Styles override the mobile skin
The MobileFrontend, in addition to a lot of other transformations, adds the following CSS:
.mf-font-size-clientpref-small .mw-body p,
.mf-font-size-clientpref-small .content p {
font-size:1rem;
}
That is, it targets every <p>...</p> in the content and forces its font size to be 1rem (the browser's base font size, usually 16px). This overrides the font sizes applied by this template making all body text the same size. In addition, due to the historical quirk of the regex-based parser in MediaWiki (with which the new Parsoid-based parser has been made bug-compatible) known as "p-wrapping", some, but not all, paragraphs can get wrapped in <p>...</p> even if they weren't to begin with. Since the MobileFrontend targets these tags that means some logical paragraphs get forced to 1rem while others aren't.
To work around this this templates stylesheet contains a workaround, forcing the font size for all <p>...</p> elements nested inside to be "inherit".
.wst-size-block p {
font-size: inherit;
}
This breaks some assumptions in the mobile site and may have surprising effects also on desktop.
See also
All Wikisource size templates are relative to the default size. There are two kinds of sizing template: inline and block templates. Inline templates are suitable for use within a paragraph, but can't handle paragraph breaks, and do not adjust line spacing. Block templates can handle paragraph breaks, and adjust line spacing, but are not suitable for use within a paragraph, as they will cause a paragraph break. See H:DIVSPAN for more details.
Font size definition by relative differences using words
 | The line heights of fonts greater than 100% increase proportionally with the font size. The line heights of fonts less than 100% are not proportional but inherit the line height of the font at the 100% size. The smaller the font, the greater the distance between rows of text. For these, see: Fonts smaller than 100% with proportional line heights. |
| Inline template | Block template | Size | 12pt/16px default base[1] |
Sample |
|---|---|---|---|---|
| {{xxxx-smaller}} | — | 41% | 5pt/6.7px | Lorem ipsum dolor sit amet, |
| {{xxx-smaller}} | — | 50% | 6pt/8px | Lorem ipsum dolor sit amet, |
| {{xx-smaller}} | {{xx-smaller block}} | 58% | 7pt/9px | Lorem ipsum dolor sit amet, |
| {{x-smaller}} | {{x-smaller block}} | 69% | 8pt/11px | Lorem ipsum dolor sit amet, |
| {{smaller}} | {{smaller block}} | 83% | 10pt/13px | Lorem ipsum dolor sit amet, |
| {{fine}} | {{fine block}} | 92% | 11pt/15px | Lorem ipsum dolor sit amet, |
| — | — | 100% | 12pt/16px | Lorem ipsum dolor sit amet, |
| {{m-larger}} | {{m-larger block}} | 110% | 13pt/18px | Lorem ipsum dolor sit amet, |
| {{larger}} | {{larger block}} | 120% | 14pt/19px | Lorem ipsum dolor sit amet, |
| {{x-larger}} | {{x-larger block}} | 144% | 17pt/23px | Lorem ipsum dolor sit amet, |
| {{xx-larger}} | {{xx-larger block}} | 182% | 22pt/29px | Lorem ipsum dolor sit amet, |
| {{xxx-larger}} | {{xxx-larger block}} | 207% | 25pt/33px | Lorem ipsum dolor sit amet, |
| {{xxxx-larger}} | {{xxxx-larger block}} | 249% | 30pt/40px | Lorem ipsum dolor sit amet, |
- ↑ Contemporary web browsers have largely standardized on a default base font size of 12pt or 16px.
X-larger block
No description.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| 1 | 1 | Text to apply font-sizing to. | String | optional |
| class | class | Additional CSS classes to apply. | String | optional |
| style | style | Additional CSS styles to apply. | String | optional |