Template:Article length bar/doc

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 to vert to change the bar to a 96 x 28px vertical bar; (default: a horizontal bar, 14 x 64px)
• |nokb= – set to yes to 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

Hovering over the figures gives the size in bytes.

{{Article length bar|Battle of Kitcheners' Wood}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|Second Battle of Ypres}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|Assassination of Archduke Franz Ferdinand}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|Battle of Jutland}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|World War I}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|France}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|France|style=height:2px;|nokb=y}} ? <span class="aab-bar" style="background: linear-gradient(to right, height:2px;" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length.">

{{Article length bar|France|spark=y}} ? <span class="aab-bar" style="background: linear-gradient(to right, height:0.6em;width:4.2em;" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length.">

{{Article length bar|France|style=height:24px; width:128px; padding:3px 0 0 3px}} ? <span class="aab-bar" style="background: linear-gradient(to right, height:24px; width:128px; padding:3px 0 0 3px" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|France|mode=vert}} ? <span class="aab-bar-vert" style="background: linear-gradient(to top, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|2022 in science}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

Parameters: T1, T2, TMAX

{{Article length bar|France}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|France|T1=100000|T2=150000|TMAX=200000}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

{{Article length bar|France|T1=200000|T2=275000|TMAX=425000}} ? <span class="aab-bar" style="background: linear-gradient(to right, " alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

Code example 1: For loop, passing a dozen country name articles to Albar styled to 40em wide

Hover over kb size for article name and exact size in bytes Code for this {{for loop || call = Albar | France | Germany | Italy | Sudan | Nigeria | Uzbekistan | New Zealand | Colombia | Argentina | Canada | Mexico | Australia |pc1n=style |pc1v=width:40em }} <span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk<span class="aab-bar" style="background: linear-gradient(to right, width:40em" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk

Code example 2: show the ratio of lead to article size for seven Featured articles:

Green represents the lead section, and yellow is the rest of the article. Total size of the article in kb given in the bar at left; percentage occupied by the lead is given at the end of each line. Code for this {{albar|The Cabinet of Dr. Caligari |T1=4202 |T2=131953 |TMAX=131953 |L0MAX=3.2 |L1MAX=100 |style=width:70%}} [[The Cabinet of Dr. Caligari]] = 3.2%{{br}} {{albar|Caesar cipher |T1=2138 |T2=19310 |TMAX=19310 |L0MAX=6.4 |L1MAX=100 |style=width:70%}} [[Caesar cipher]] = 6.4%{{br}} {{albar|Caroline Island |T1=2230 |T2=55355 |TMAX=55355 |L0MAX=4 |L1MAX=100 |style=width:70%}} [[Caroline Island]] = 4.0%{{br}} {{albar|Casablanca (film) |T1=10748 |T2=108919 |TMAX=108919 |L0MAX=9.9 |L1MAX=100 |style=width:70%}} [[Casablanca (film)]] = 9.9%{{br}} {{albar|Castle |T1=5901 |T2=114539 |TMAX=114539 |L0MAX=5.2 |L1MAX=100 |style=width:70%}} [[Castle]] = 5.2%{{br}} {{albar|Cerro Blanco (volcano) |T1=3462 |T2=82588 |TMAX=82588 |L0MAX=4.2 |L1MAX=100 |style=width:70%}} [[Cerro Blanco (volcano)]] = 4.2%{{br}} {{albar|Chagas disease |T1=8308 |T2=68423 |TMAX=68423 |L0MAX=12.1 |L1MAX=100 |style=width:70%}} [[Chagas disease]] = 12.1% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk The Cabinet of Dr. Caligari = 3.2% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Caesar cipher = 6.4% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Caroline Island = 4.0% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Casablanca (film) = 9.9% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Castle = 5.2% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Cerro Blanco (volcano) = 4.2% <span class="aab-bar" style="background: linear-gradient(to right, width:70%" alt="A horizontal progress bar for a Template:Hid-kilobyte article, with a green background on the left for 46% of its length."> Template:Hidk Chagas disease = 12.1%

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:

Template:Talk quote

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

• {{Article length rating}}
• {{PAGESIZE}}
• WP:Article size
• WP:MARKUPSIZE
• WP:Prose size
• WP:SIZESPLIT