Difference between revisions of "Template:Clade/doc/common"

From blackwiki
Jump to navigation Jump to search
imported>Dpleibovitz
m (Use documentation template)
imported>Nnemo
(Notably accessibility, presentation, corr.)
Line 45: Line 45:
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
{{clade| style=font-size:75%;line-height:75%
+
{{clade| style=font-size:75%;line-height:75%;
 
|1={{clade
 
|1={{clade
 
   |label1=Subtree1
 
   |label1=Subtree1
Line 56: Line 56:
  
 
produces
 
produces
{{clade| style=font-size:75%;line-height:75%
+
{{clade| style=font-size:75%;line-height:75%;
 
|1={{clade
 
|1={{clade
 
   |label1=Subtree1
 
   |label1=Subtree1
Line 68: Line 68:
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
{{clade| style=font-size:75%;line-height:75%
+
{{clade| style=font-size:75%;line-height:75%;
 
|1={{clade
 
|1={{clade
 
   |2=Leaf2
 
   |2=Leaf2
Line 78: Line 78:
 
</pre>
 
</pre>
  
{{clade| style=font-size:75%;line-height:75%
+
{{clade| style=font-size:75%;line-height:75%;
 
|1={{clade
 
|1={{clade
 
   |1=Leaf1
 
   |1=Leaf1
Line 111: Line 111:
 
}}
 
}}
  
To replace a solid line leading to the Nth child with a dashed line, use <tt>|stateN=dashed</tt>.
+
To replace a solid line leading to the ''N''th child with a dashed line, use <tt>|stateN=dashed</tt>.
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
Line 138: Line 138:
  
 
-->{{#ifeq:{{{1|}}}|cladex|
 
-->{{#ifeq:{{{1|}}}|cladex|
'''{{tlf|Cladex}} only.''' To replace a single line leading to the Nth child by a double line, use <tt>{{!}}stateN=double</tt>.  Notice that {{tlf|Cladex}} has only been used for the (sub)clade where the double line is wanted. The outermost clade should always be specified with {{tlf|Clade}} unless its style is altered see below.
+
'''{{tlf|Cladex}} only.''' To replace a single line leading to the ''N''th child by a double line, use <tt>{{!}}stateN=double</tt>.  Notice that {{tlf|Cladex}} has only been used for the (sub)clade where the double line is wanted. The outermost clade should always be specified with {{tlf|Clade}} unless its style is altered see further.
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
Line 220: Line 220:
 
{{cladogram|title=Example
 
{{cladogram|title=Example
 
|caption=Sample of {{tl|Cladogram}}
 
|caption=Sample of {{tl|Cladogram}}
|clades={{clade| style=font-size:75%;line-height:75%
+
|clades={{clade| style=font-size:75%;line-height:75%;
 
     |label1=[[Neornithes]]&nbsp;&nbsp;
 
     |label1=[[Neornithes]]&nbsp;&nbsp;
 
     |1={{clade
 
     |1={{clade
Line 245: Line 245:
 
{{cladogram|title=Example
 
{{cladogram|title=Example
 
|caption=Sample of {{tl|Cladogram}}
 
|caption=Sample of {{tl|Cladogram}}
|clades={{clade| style=font-size:75%;line-height:75%
+
|clades={{clade| style=font-size:75%;line-height:75%;
 
     |label1=[[Neornithes]]&nbsp;&nbsp;
 
     |label1=[[Neornithes]]&nbsp;&nbsp;
 
     |1={{clade
 
     |1={{clade
Line 282: Line 282:
 
   }}
 
   }}
 
}}
 
}}
Although ''Banksia''&nbsp;subser.&nbsp;''Sphaerocarpae'' and ''Banksia''&nbsp;subser.&nbsp;''Leptophyllae'' are sisters, their names are not aligned in the cladogram. If this is considered undesirable, one solution is to use a label in both cases, as shown below, which now shows the sisters at the same level.
+
Although ''Banksia''&nbsp;subser.&nbsp;''Sphaerocarpae'' and ''Banksia''&nbsp;subser.&nbsp;''Leptophyllae'' are sisters, their names are not aligned in the cladogram. If this is considered undesirable, one solution is to use a label in both cases, as shown hereafter, which now shows the sisters at the same level.
 
{{clade
 
{{clade
 
|1={{clade
 
|1={{clade
Line 294: Line 294:
 
   }}
 
   }}
 
}}
 
}}
Another 'trick' is to introduce a dummy clade. The dotted line below shows where an extra clade has been inserted:
+
Another 'trick' is to introduce a dummy clade. The dotted line hereafter shows where an extra clade has been inserted:
 
{{clade
 
{{clade
 
|1={{clade
 
|1={{clade
Line 330: Line 330:
 
-->{{#ifeq:{{{1|}}}|cladex|
 
-->{{#ifeq:{{{1|}}}|cladex|
 
==Bracketting nodes==
 
==Bracketting nodes==
 +
 
'''{{tlf|Cladex}} only.''' To insert a coloured 'bracket' around a set of leaf nodes which follow one another in the generated cladogram:
 
'''{{tlf|Cladex}} only.''' To insert a coloured 'bracket' around a set of leaf nodes which follow one another in the generated cladogram:
 
* Add <tt>barbeginN=''colour''</tt> for the first leaf node, where N is the order of that leaf node within its clade, and ''colour'' is the required colour.
 
* Add <tt>barbeginN=''colour''</tt> for the first leaf node, where N is the order of that leaf node within its clade, and ''colour'' is the required colour.
Line 339: Line 340:
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
{{clade|style=font-size:85%;line-height:100%
+
{{clade|style=font-size:85%;line-height:100%;
 
|1={{cladex
 
|1={{cladex
 
   |1=Leaf A
 
   |1=Leaf A
Line 359: Line 360:
  
 
produces
 
produces
{{clade|style=font-size:85%;line-height:100%
+
{{clade|style=font-size:85%;line-height:100%;
 
|1={{cladex
 
|1={{cladex
 
   |1=Leaf A
 
   |1=Leaf A
Line 380: Line 381:
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
{{cladex|style=width:auto;font-size:85%;line-height:100%
+
{{cladex|style=width:auto;font-size:85%;line-height:100%;
 
|1=Leaf A
 
|1=Leaf A
 
|2={{cladex
 
|2={{cladex
Line 391: Line 392:
  
 
produces
 
produces
{{cladex|style=width:auto;font-size:85%;line-height:100%
+
{{cladex|style=width:auto;font-size:85%;line-height:100%;
 
|1=Leaf A
 
|1=Leaf A
 
|2={{cladex
 
|2={{cladex
Line 404: Line 405:
 
<pre>
 
<pre>
 
<nowiki>
 
<nowiki>
{{cladex|style=width:auto;font-size:85%;line-height:100%
+
{{cladex|style=width:auto;font-size:85%;line-height:100%;
 
|1=Leaf A
 
|1=Leaf A
 
|bar2=midnightblue
 
|bar2=midnightblue
Line 419: Line 420:
 
===Specifying colours===
 
===Specifying colours===
  
You can use any of the ways in which colours can be specified in HTML; e.g. the standard [http://www.w3schools.com/html/html_colornames.asp colour names], the three or six hex digit notations, such as #FC3 or #F3C630, or the <tt>rgb()</tt> notation.
+
You can use any of the ways in which colours can be specified in [[HTML]]; e.g. the standard [http://www.w3schools.com/html/html_colornames.asp colour names], the three or six hex digit notations, such as #FC3 or #F3C630, or the <tt>rgb()</tt> notation.
  
 
===Supplying text labels===
 
===Supplying text labels===
Line 434: Line 435:
 
       ===== END OF FOR cladex ONLY-->
 
       ===== END OF FOR cladex ONLY-->
 
==Limitations==
 
==Limitations==
 +
 
===Label length===
 
===Label length===
 
Labels produced by <tt>|labelN=</tt>, where <tt>N</tt> is 1, 2, ..., can lead to poor layout of the resulting cladogram. (This does not apply to the text of leaves, i.e. text produced by <tt>|N=</tt>.) To avoid problems:
 
Labels produced by <tt>|labelN=</tt>, where <tt>N</tt> is 1, 2, ..., can lead to poor layout of the resulting cladogram. (This does not apply to the text of leaves, i.e. text produced by <tt>|N=</tt>.) To avoid problems:
* labels should be kept as short as possible, ideally a single word
+
* Labels should be kept as short as possible, ideally a single word
* any necessary spaces in labels should be represented as &amp;nbsp; not as actual spaces
+
* Any necessary spaces in labels should be represented as &amp;nbsp; not as actual spaces.
* line breaks (i.e. <nowiki><br></nowiki>) should not be used.
+
* Line breaks (i.e. <nowiki><br/></nowiki>) should not be used.
  
 
===Browser differences===
 
===Browser differences===
 +
 
[[File:Cladograms - browser variation.png|thumb|Browser variation: left – Internet Explorer, Firefox; right – Safari, Chrome, Opera]]
 
[[File:Cladograms - browser variation.png|thumb|Browser variation: left – Internet Explorer, Firefox; right – Safari, Chrome, Opera]]
 +
 
Cladograms are drawn by generating hidden tables. The horizontal and vertical lines making up the tree are actually the edges of table cells. The tables are then drawn by the browser or user agent using its internal algorithms. As these differ from browser to browser, the trees produced will not look the same on all browsers.
 
Cladograms are drawn by generating hidden tables. The horizontal and vertical lines making up the tree are actually the edges of table cells. The tables are then drawn by the browser or user agent using its internal algorithms. As these differ from browser to browser, the trees produced will not look the same on all browsers.
  

Revision as of 09:47, 8 December 2013

50px Template documentation

This is the common part of the documentation for the two templates {{Clade}} and {{Cladex}}. Set the first parameter to "clade" or "cladex" to select which version is shown.