<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk
 | This template uses TemplateStyles: |
Generates a configurable, progress bar-style graphic that may be used to visually display the length of a given article relative to a theoretical maximum. The bar changes color when certain thresholds of appropriate or excessive article size are exceeded.
Usage
{{Article length bar|ArticleName}}{{Article length bar|ArticleName|mode=vert}}
Parameters
There is one required parameter, four styling params, and five configuration params:
|1=– name of the article; required. This is used to derive the article length; see Notes.
Styling params
All styling parameters are optional. Using them changes the appearance for all users viewing the page where the template appears. To alter the appearance only for yourself, see Per-user style.
|mode=– set mode tovertto change the bar to a 96 x 28px vertical bar; (default: a horizontal bar, 14 x 64px)|nokb=– set toyesto suppress display of the rounded kilobyte size in the length bar. This also suppresses the tooltip.|spark=– set to a non-empty value to generate an inline, sparkline-ish bar in running text. (See Notes ).|style=– you may add any CSS parameters applicable to an HTML inline element to alter the appearance of the length bar, such as size, width, border, etc.
Configuration params
All configuration params are optional. Configuration params alter variables with predefined default values which govern color transition points within the length bar. By default, these are designed to reflect the length of articles that "probably" or "definitely" should be split (see Notes ). Altering these values changes the point where color transitions begin in the length bar.
|T1=– green up to this byte length, then switches to yellow; (default: 150,000 bytes)|T2=– yellow until this byte length, then red; (default: 225,000 bytes)|TMAX=– articles this size fill the bar to 100%; (default: 325,000 bytes). Larger values do not extend color past the box border, but trigger a color gradient from red to dark red.|L0MAX=– max size of the green area in percent; derivable from T1; see note below; (default: 46 )|L1MAX=– high point of the yellow area in percent; see note; (default: 69 )
Normally, there is no reason to change these from the default values, and the recommendation is not to use them. One reason to do so might be to compare articles within a skewed sample set, such as comparing a set of stub articles, or comparing a set of articles appearing near the top of the longest articles list.
Note: L0MAX and L1MAX are derivable as a raw byte size converted to a percent, and thus locked to the values of T1 and T2, respectively. If you change either T1 or T2, please also change the former to match:
- L0MAX is derived as: (T1 * 100 / TMAX), round to 0 decimal places
- L1MAX is derived as: (T2 * 100 / TMAX) round 0
Meaning of the colors
Article length bar graphics may have up to three colors: green, yellow, and red, and their placement is influenced by the article size guideline, with green intended to indicate, "no need to split", yellow = "might need to be split", and red "almost certainly" should be split. (For technical reasons, these thresholds are calculated as a function of raw article size in bytes; an upgrade to base it on prose words is envisaged, but not imminent.)
The thresholds where the colors change from green to yellow (currently 150,000 bytes), and from yellow to red (225,000b) are given by predefined variables; these variables are configurable so that you can move the point where the color changes up or down (left or right in the graphic). The current variable defaults are a compromise (discussed here). If you are displaying a table, say, of the longest pages at Wikipedia, you would increase the variable values; and if you are comparing only the size of lead sections in various articles, you would reduce them.
An article whose length exactly equals variable TMAX fills the rectangular graphic completely. What happens when a given article exceeds the default or configured TMAX value? It cannot exceed the rectangle border, so instead, the last part of the red section has a gradient from red to dark red; this is a flag that the article size is greater than the configured value for a completely filled rectangle (i.e., byte length > TMAX). A possible upgrade to use logarithmic length bars instead of linear would obviate need for the dark red gradient.
By appropriate adjustment of the configurable variables, it is possible to reduce the number of colors displayed to two (see code example 2), or even just one. The color hex values are currently non-configurable.
Examples
{{Article length bar|Battle of Kitcheners' Wood}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|Second Battle of Ypres}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|Assassination of Archduke Franz Ferdinand}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|Battle of Jutland}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|World War I}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|France}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|France|style=height:2px;|nokb=y}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".height:2px;" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "["..">{{Article length bar|France|spark=y}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".height:0.6em;width:4.2em;" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "["..">{{Article length bar|France|style=height:24px; width:128px; padding:3px 0 0 3px}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".height:24px; width:128px; padding:3px 0 0 3px" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|France|mode=vert}}? <span class="aab-bar-vert" style="background: linear-gradient(to top, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|2022 in science}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk
Parameters: T1, T2, TMAX
{{Article length bar|France}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|France|T1=100000|T2=150000|TMAX=200000}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk{{Article length bar|France|T1=200000|T2=275000|TMAX=425000}}? <span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "["." alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk
Code example 1: For loop, passing a dozen country name articles to
Albar styled to 40em wide | ||
|---|---|---|
<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:40em" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk |
Code example 2: show the ratio of lead to article size for seven Featured articles:
| ||
|---|---|---|
<span class="aab-bar" style="background: linear-gradient(to right, Expression error: Unrecognized punctuation character "[".width:70%" alt="A horizontal progress bar for a Template:HidFormatting error: invalid input when rounding-kilobyte article, with a green background on the left for 46% of its lengthExpression error: Unrecognized punctuation character "[".Expression error: Unrecognized punctuation character "[".."> Template:HidFormatting error: invalid input when roundingk The Cabinet of Dr. Caligari = 3.2% |
Notes
The length value retrieved for a given article is the raw size of the wikicode in bytes ({{PAGESIZE}}). Pagesize is easier to compute than prose word count, and can be a rough proxy for relative article size, but should be used with caution.
Sparklines are useful for embedding very small graphics in running text. For example, a Talk page discussion about a country article:
with the bars appearing at the same size as the surrounding text, and remaining proportionate under zooming. Use § param |spark=y to generate a sparkline chart.
Per-user style
You can modify the appearance of the bar for yourself only without affecting anyone else, or make the bar disappear completely through the use of predefined CSS classes aab-bar and aab-bar-vert defined on the article length bar graphic by appropriate modification of your Special:MyPage/common.css. (t.b.a. ...)
Known issues
- A bug related to articles shorter than the first size threshold with style parameter; see Talk.
See also
Progress templates | |
|---|---|
| General progress templates |
|
| Specific-use templates | |
| |
