The {{~Line}} core function template is used by the {{line}} graphic template. {{~Line}} draws a horizontal line starting at the origin (at the bottom left corner of the canvas, considering the middle of the stroke width of the line) of the containing block-level element, then {{line}} translates and rotates the result.
Usage
- {{~Line|length = length|width = width|units = units|color = color|style = style|line cap = line cap|z-index = z-index}}
where:
- length is the length of the line (default: 0);
- width is the stroke width of the line (default: 1);
- units are the units associated with length and width (%, px, cm, mm, in, pc, pt, em or ex) (default: px);
- color is the line color (default: black, i.e. );
- style is the style for the line (default: solid), chosen among the values listed in the table of line styles below;
- line cap is the line cap[1] (default: half square; short if style is dotted), chosen among short, butt, half square, square, and (eventually round?), where
- short is optimized (e.g. avoids partially overlapping dots) for the dotted style (default for dotted style),
- butt is flat end caps,
- half square is flat (but extending by a quarter of the line width at both ends of the line) end caps (good for polylines and polygons),
- round (not yet implemented, reverts to half square) is round (extending up to half the line width at both ends of the line) end caps,
- square is flat (but extending by half the line width at both ends of the line) end caps;
- z-index is the z-index of the line (default: 0, same as for the canvas).
Line styles
Table of line/border styles[2]
Value
|
Description
|
none |
no line/border
|
hidden |
same as none (except in border conflict resolution for table elements)
|
dotted |
dotted line/border
|
dashed |
dashed line/border
|
solid |
solid line/border
|
double |
double line/border
|
groove |
3D grooved line/border (the effect depends on the border-color value)
|
ridge |
3D ridged line/border (the effect depends on the border-color value)
|
inset |
3D inset line/border (the effect depends on the border-color value)
|
outset |
3D outset line/border (the effect depends on the border-color value)
|
inherit |
line/border style should be inherited from the parent element
|
Tests
Note: In the following examples, the {{canvas}} is used as the containing block-level element.
Tests with line cap
Note: Default line cap is half square; round (not yet implemented) currently reverts to half square; invalid line cap (e.g. triangle) reverts to half square.
Code
|
Result
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 25|units = px|color = red}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 25|units = px|color = red|line cap = square}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 25|units = px|color = red|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 25|units = px|color = red|line cap = round}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 25|units = px|color = red|line cap = triangle}}}}
|
|
Tests (proper usage: length > width)
Code
|
Result
|
{{canvas|width = 150|height = 150|{{~Line|length = 200|width = 5|units = px|color = red}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 150|width = 5|units = px|color = red}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = green|style = none}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = green|style = hidden}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = green|style = dotted}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = dashed}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = solid}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = double}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = groove}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = ridge}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = inset}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = outset}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 100|width = 5|units = px|color = red|style = inherit}}}}
|
|
Tests (improper usage: width > length)
Warning: This is considered improper usage (although it would have been tempting to use this to draw vertical lines) since only the solid style is OK. So, a vertical line should be drawn by rotating an horizontal line (i.e. length > width) by 90o so that the line styles give the expected result.
Note: The dotted style example doesn't show any dot because the line length is too short relatively to the width, as the short (preventing the partial overlap of dots in, e.g., polyline or polygon drawings) line cap is applied by default for that style.
Code
|
Result
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 200|units = px|color = red|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 150|units = px|color = red|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = green|style = none|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = green|style = hidden|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = green|style = dotted}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = dashed|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = solid|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = double|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = groove|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = ridge|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = inset|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|style = outset|line cap = butt}}}}
|
|
{{canvas|width = 150|height = 150|{{~Line|length = 5|width = 100|units = px|color = red|style = inherit|line cap = butt}}}}
|
|
Tests (z-index)
Warning: Works OK (except for {{rotate}} which brings z-index back to 0 (why?), while {{translate}} preserves the z-index of {{~Line}})
<!--
-->{{canvas|width = 250|height = 250|<!--
-->{{~Line|length = 100|width = 120|units = px|color = red|line cap = butt}}<!--
-->{{translate|{{~Line|length = 100|width = 100|units = px|color = blue|line cap = butt|z-index = 0}}|25, 0}}<!--
-->{{translate|{{~Line|length = 100|width = 80|units = px|color = green|line cap = butt|z-index = 2}}|50, 0}}<!--
-->{{translate|{{~Line|length = 200|width = 60|units = px|color = yellow|line cap = butt|z-index = -1}}|75, 0}}<!-- below z-index = 0 (below the canvas)
-->{{translate|{{~Line|length = 100|width = 40|units = px|color = purple|line cap = butt|z-index = 1}}|100, 0}}<!-- below z-index = 2 and higher
-->{{translate|{{~Line|length = 100|width = 20|units = px|color = orange|line cap = butt|z-index = 4}}|125, 0}}<!--
-->{{translate|{{~Line|length = 10|width = 100|units = px|color = lightgreen|line cap = butt|z-index = 3}}|185, 0}}<!-- between z-index = 2 and 4
-->{{translate|{{rotate|{{~Line|length = 100|width = 20|units = px|color = gold|line cap = butt|z-index = 3}}|angle = 90}}|175, 0}}<!-- between z-index = 2 and 4
-->{{translate|{{rotate|{{~Line|length = 200|width = 10|units = px|color = black|style = dotted|line cap = butt|z-index = 3}}|angle = 90}}|155, 0}}<!-- between z-index = 2 and 4
-->{{translate|{{rotate|{{~Line|length = 200|width = 50|units = px|color = rgba(255,255,255,0.75)|style = solid|line cap = butt|z-index = 5}}|angle = 90}}|200, 0}}<!-- above z-index = 4
-->}}<!--
-->
yields
Rotation with origin = 0, 0 and origin unit = %
Warning: Need to fix the origin offset (rotation point) issue with {{rotate}} wrapped around {{~Line}}.
Code
|
Result
|
{{canvas|width = 100|height = 100|units = px|{{~Line|length = 64}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|0|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|15|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|30|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|45|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|60|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|75|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|90|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|pi/4|angle unit = rad|origin = 0, 0}}}}
|
|
{{canvas|width = 100|height = 100|units = px|{{rotate|{{~Line|length = 64}}|pi/2|angle unit = rad|origin = 0, 0}}}}
|
|
Code
<noinclude>{{documentation}}</noinclude><includeonly><!--
http://www.w3schools.com/cssref/pr_border-style.asp
--><span style="<!--
-->position: absolute;<!--
-->left: {{#expr: 0 +
{{#switch: {{{line cap| {{#ifeq: {{{style|solid}}} | dotted | short | half square }} }}}
| short = 0 <!-- (correction for dotted style, which happens to be drawn shifted left by half the width of the stroke) -->
| butt = 0
| square = - ( {{{width|1}}} ) / 2
| round <!-- not yet implemented, reverts to half square -->
| half square = - ( {{{width|1}}} ) / 4 <!-- is better to draw polylines and polygons -->
| - ( {{{width|1}}} ) / 4 <!-- invalid line cap argument, reverts to half square -->
}}
}}{{{units|px}}};<!--
-->bottom: {{#expr: 0.0 - ( ( {{{width|1}}} ) / 2.0 ) }}{{{units|px}}};<!-- (so that the stroke is centered about 0, OK and MUCH BETTER!)
-->z-index: {{{z-index|0}}};<!--
-->height: 0;<!-- fill of height 0 (since we only draw a top border to make a line)
-->width: {{#expr: ( {{{length|0}}} ) +
{{#switch: {{{line cap| {{#ifeq: {{{style|solid}}} | dotted | short | half square }} }}}
| short = - ( {{{width|1}}} ) <!-- for dotted style, to avoid partially overlapping dots -->
| butt = 0
| square = ( {{{width|1}}} )
| round <!-- not yet implemented, reverts to half square -->
| half square = ( {{{width|1}}} ) / 2 <!-- is better to draw polylines and polygons -->
| ( {{{width|1}}} ) / 2 <!-- invalid line cap argument, reverts to half square -->
}}
}}{{{units|px}}};<!-- since we draw a horizontal line (the width of a CSS box is the length of our line)
-->border-top-width: {{{width|1}}}{{{units|px}}};<!-- ***** We use only the top border to draw the line *****
-->border-right-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing)
-->border-bottom-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing)
-->border-left-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing)
-->border-top-color: {{{color|black}}};<!--
-->border-right-color: purple;<!-- (for testing only)
-->border-bottom-color: blue;<!-- (for testing only)
-->border-left-color: red;<!-- (for testing only)
-->border-top-style: {{{style|solid}}};<!-- ***** We use only the top border to draw the line *****
-->border-right-style: none;<!-- none (or solid for testing)
-->border-bottom-style: none;<!-- none (or solid for testing)
-->border-left-style: none;<!-- none (or solid for testing)
-->"></span></includeonly>
Notes