Template:Resize/doc
 | This is a documentation subpage for Template:Resize. It contains usage information, categories and other content that is not part of the original Template page. |
 | This template is used on many pages. To avoid large-scale disruption and unnecessary server load, any changes to this template should first be tested in its /sandbox or /testcases subpages or in your own user subpage. The tested changes can then be added to this page in one single edit. Please consider discussing any changes on the talk page before implementing them. |
 | This template should not be used in citation templates such as Citation Style 1 and Citation Style 2, because it includes markup that will pollute the COinS metadata they produce; see Wikipedia:COinS. |
Usage
- in — N specifies a size, such as "95%", "1.2em", etc.
- in — If N is omitted, as in the second line above, a default 90% size is applied.
- in — As above but uses a div tag instead of a span tag.
Beware
Beware that if text happens to contain an equality sign (=), it will fail to render properly. Here are the workarounds:
- Replace all instances of
=with {{=}}, or - Specify
{{resize|N|2=text}}or{{resize|1=text}}.
Also it will fail to wrap multiple blocks, such as multiple paragraphs or multiple bullet points. Here are the workarounds:
- Use, for example,
<div style="font-size:90%;">
...multiple paragraphs...</div>, or - Apply this template separately to each block of paragraph, bullet point etc.
- Use {{resize|div=yes}}.
- Use {{Smalldiv}}.
Examples
| Code | Result |
|---|---|
| in | This text defaults to 90% normal size. |
| in | This text is 80% normal size. |
| in | This text is 0.2em larger than normal. |
{{resize|We know 1+1=2 and 2+2=4. It will fail to render}} |
{{{1}}} |
{{resize|We know 1+1{{=}}2 and 2+2{{=}}4.}} |
We know 1+1=2 and 2+2=4. |
{{resize|1=We know 1+1=2 and 2+2=4.}} |
We know 1+1=2 and 2+2=4. |
{{resize|120%|2=We know 1+1=2 and 2+2=4. This text is 120% normal size.}} |
We know 1+1=2 and 2+2=4. This text is 120% normal size. |
Comparison
| Code for inline content | Code for block content | Size | Result |
|---|---|---|---|
| {{small|text}} {{smaller|text}} |
{{smalldiv|text}} | 85% | text |
| {{resize|text}} | {{resizediv|text}} | 90% | text |
| {{midsize|text}} | 92% | text | |
| none | none | 100% | text |
| {{large|text}} {{larger|text}} {{big|text}} |
{{largediv|text}} | 120% | text |
| {{huge|text}} | 180% | text | |
| {{resize|x%|text}} | {{resizediv|x%|text}} | custom | varies |
| {{font|size=x%}} | custom | varies |
{{small}} or {{smaller}}: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
{{resize}}: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
{{midsize}}: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Default: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
{{large}} or {{larger}} or {{big}}: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
{{huge}}: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
See also
- Category:Resizing templates
- {{Smalldiv}}, for wrapping multiple lines of text that cause syntax errors when wrapped by {{Resize}} or {{Small}}
- font-size - CSS: Cascading Style Sheets | Mozilla Developer Network
TemplateData
This is the TemplateData documentation for this template used by VisualEditor and other tools.
Resize
It is to change the font size of a text string. Two forms {{resize|<size>|<text>}} and {{resize|<text>}} are possible.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Size/Text | 1 | Specifies a css font size e.g. '80%', '1.2em', 'x-large', 'larger'. In the one parameter version the first parameter is the text and the font size is '90%'. | String | required |
| Text when size is given | 2 | The text to display in the two parameter version. | String | optional |
| Use div tag | div | Set to yes to use a div instead of a span tag. | String | optional |