Template:Legend: Difference between revisions
m (1 revision imported) |
(Fix processing of leading * and # characters in text= (see testcases page)) |
||
| Line 2: | Line 2: | ||
--><templatestyles src="Legend/styles.css" /><!-- | --><templatestyles src="Legend/styles.css" /><!-- | ||
--><div class="legend"><!-- | --><div class="legend"><!-- | ||
--><span class="legend-color mw-no-invert" style="<!-- | --><span class="legend-color {{#if:{{{invert|}}}||mw-no-invert}}" style="<!-- | ||
-->{{#if:{{{border|}}}|border: {{{border}}};|{{#if:{{{outline|}}}|border: 1px solid {{{outline}}};}}}}<!-- | -->{{#if:{{{border|}}}|border: {{{border}}};|{{#if:{{{outline|}}}|border: 1px solid {{{outline}}};}}}}<!-- | ||
-->{{#if:{{{1|}}}|{{greater color contrast ratio|{{{1}}}|white|black|css=y}}}}<!-- | -->{{#if:{{{1|}}}|{{greater color contrast ratio|{{{1}}}|white|black|css=y}}}}<!-- | ||
-->{{#if:{{{textcolor|}}}|color:{{{textcolor}}};}}<!-- | -->{{#if:{{{textcolor|}}}|color:{{{textcolor}}};}}<!-- | ||
-->{{#if:{{{size|}}}|font-size:{{{size}}};}}"><!-- | -->{{#if:{{{size|}}}|font-size:{{{size}}};}}<!-- | ||
-->-webkit-print-color-adjust: exact; print-color-adjust: exact;<!-- | |||
-->"><!-- | |||
-->{{#if:{{{text|}}}{{{alt|}}} | -->{{#if:{{{text|}}}{{{alt|}}} | ||
| <span class="legend-text" style="{{#if:{{{alt|}}}|color:{{{1|}}};}}font-family: monospace, monospace;">{{If empty|{{{alt|}}}|{{{text|}}}| }}</span>| }}<!-- | | <span class="legend-text" style="{{#if:{{{alt|}}}|color:{{{1|}}};}}font-family: monospace, monospace;">{{If empty|{{{alt|}}}|{{Encodefirst|{{{text|}}}}}| }}</span>| }}<!-- | ||
--></span><!-- | --></span><!-- | ||
Revision as of 20:15, 19 September 2025
.svg){kind=link}
| Warning | This template is used on approximately 33,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. |
Lua error in Module:TNT at line 159: Missing JsonConfig extension; Cannot load https://commons.wikimedia.org/wiki/Data:I18n/Uses TemplateStyles.tab. Shows a legend row with a colored box.
Usage
{{legend|background-color|caption|outline=outline color|border=css border|alt=alt text}}
- background-color is passed to the CSS background-color property of the color box.
- The optional outline parameter is the color of the outline around the box. Not to be confused with the CSS outline property.
- The optional border argument which overrides the outline argument and sets the CSS property (e.g.,
1px solid #aaa) of the border that will be drawn around the box.
Examples
Use in text
<syntaxhighlight lang="wikitext"> {{legend|black|Africa|outline=gray}} {{legend|green|Americas}} {{legend|blue|Oceania}} {{legend|#ffa|Europe|outline=silver}} {{legend|#ff2800|Asia|outline=#A2A9B1}} </syntaxhighlight>
Use in captions
| Markup | Renders as |
|---|---|
[[File:Celts in Europe.png|upright=.9|thumb|right|The Celts in Europe, past and present: <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#1a8000; color:white;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Present-day Celtic-speaking areas</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#27c600; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Other parts of the six most commonly recognized "Celtic nations" and where a Celtic language is spoken but not the dominating language</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#97ffb6; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Other parts of Europe once peopled by Celts; modern-day inhabitants of many of these areas often claim a Celtic heritage and/or culture</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:#D2FFD2; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> Lusitanian area of Iberia, "Celticity" uncertain</div> <div class="legend"><span class="legend-color mw-no-invert" style="background-color:yellow; color:black;-webkit-print-color-adjust: exact; print-color-adjust: exact;"> </span> The core Hallstatt territory, expansion before 500 BC</div>]] |
Use with all parameters except alt and invert
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
Invert in dark mode
This is only for the dark mode; nothing happens in the built-in dark mode since table colors are not inverted. <syntaxhighlight lang="wikitext">
</syntaxhighlight>
Full parameter list
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
Limitations
Using certain special characters in |text= that have meaning in wikitext can cause unexpected results. To use * in |text=, use |text={{asterisk}}. To use # in |text=, use |text={{number sign}}.
Determine hex colors for legend
One way to determine the exact color is via freeware IrfanView. Open image. Then:
- Edit menu > Show Paint dialog > click on the eyedropper > click somewhere in the image > click on the color at the bottom of the Paint dialog > Write down the Red, Green, and Blue color numbers (RGB).
Online sites that can identify the color of any pixel in an uploaded image are also available:
Convert RGB colors to hex color or color name (if there is one):
See also
- Variant blocks
- {{legend striped}}, two colors, for striped color areas
- {{legend inline}}, uses display:inline to avoid line breaks after each legend
- {{legend0}}, without the line-feed
- {{leftlegend}}, with text-align set to left
- {{color box}} and {{RouteBox}}, with text placed inside the colored legend and article linking
- {{legend-line}}, legends for lines
- {{image key}}, allows legend templates being used in image captions to use multiple columns
Templates that list colors
- {{Colornames}}
- {{X11 color chart}}
- {{Web Colors}}
TemplateData
TemplateData for Legend
Shows a legend row with a colored box and a caption.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Color | 1 | The color for the legend entry, in any CSS format
| Line | required |
| Caption | 2 | Label for the legend entry
| String | suggested |
| Invert in dark mode | invert | Invert color swatch and its contents in dark mode (recommended for tables) | String | optional |
| CSS border style | border | CSS style for the legend entry's border | String | optional |
| Entry outline | outline | CSS color for the outline of the legend entry
| Line | optional |
| Text in the entry | text | Text to be displayed in the legend entry box, i.e. within the color specified
| Line | optional |
| Alt text of the entry | alt | Adds hidden text to the legend entry box; overrides "text"
| Line | optional |
| Text color | textcolor | CSS color of text inside the legend's colored box | String | optional |
| Size | size | Font size of the legend entry, including colored box | String | optional |