16.5Main body area

This is a big section; the body text can contain absolutely anything (it is whatever you want to write).

That said, there are a lot of common things that can appear in main body area and any page will almost certainly use a subset of them, this section contains examples of all the following:

	^{List 16.3 — Main area components}
❶ Common elements (things on every page)
	End of page marker End of section elements
❷ Heading ❸ Tables ❹ Images ❺ Lists ❻ Code fragments ❼ Formulae

⬆️ Top

16.5.1Common page elements

The PracticalSeries Wiki pages have certain common elements within the main body area of a page, the first is an end of page marker, the second is how sections and divisions are separated from each other. Taking these in turn:

⬆️ Top

End of page marker

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<br><br> <hr> <a name="idend"></a>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽

^{Table 16.7 — Main body end of page}

The horizontal line (see section 6.3) indicating the end of the page is separated from the last text (the Lorem ipsum in the above image) by two lines, the <br><br>. The horizontal line is HTML version <hr>.

The end of page marker is analogous to the top of page marker (see section 16.4.1), it is a named anchor element that is used to identify the end of the page and allow navigation back to it (navigation to named elements was covered in section 9.5)

The end of page marker is completely invisible and does not render on the page (it is just a named anchor point, but the anchor point itself is empty, there is no text or href attribute). The Markdown for this is:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<a name="idend"></a>
^{Table 16.8 — End of page marker}

This is the last line of every Wiki page

Navigation links to the end of page marker are always in the sidebar, itlooks like this:

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table align="center"><tr>
        <td><a href="#idend"><strong>⬇️ End of page</strong></a></td>
</tr></table>

${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽

⬇️ End of page

^{Table 16.9 — End of page navigation}

The :arrow_down: is the emoji ⬇. The link is #idend, this is the same name used in the end of page anchor name attribute preceded with a hash #. The link should be preceded with a blank line, the link is contained within a central table that places a box around the link.

⬆️ Top

End of section elements

Each section in a chapter has a common look and feel before the start of the next section (with the exception of the last section on a page, this is simply followed by the end of page marker discussed in the previous section)

Each section ends with a link to the top of the page and a horizontal bar separating the sections (highlighted below):

^{Figure 16.10 — End of section}

The Markdown is:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
[:arrow_up: Top](#idtop) <HR> <br>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
⬆️ Top
^{Table 16.10 — End of section}

The :arrow_up: is the emoji ⬆. The link is #idtop, this is the same name used in the top of page anchor name attribute preceded with a hash #. The link should be preceded with a blank line, the <hr> provides the horizontal line separating the sections and the <br> at the end give the correct spacing to the following text, there should be a further blank line between the last <br> and the next heading.

Note

This was also discussed in section 16.4.1

16.5.2Headings

Headings in the PracticalSeries Wikis are standardised:

Level	Chapter, section, division	Examples
Level 1	Chapter only	1Heading_level_1 20Heading_level_1
Level 2	Chapter and section	1.1Heading_level_2 2.10Heading_level_2 12.5Heading_level_2 13.21Heading_level_2
Level 2	Chapter, section and division	1.1.1Heading_level_3 2.1.10Heading_level_3 3.10.5Heading_level_3 12.1.2Heading_level_3 12.13.5Heading_level_3 14.18.21Heading_level_3
Level 4	Inline headings (not indented, indented and trailing line)	Heading_level_4 Heading_level_4 Heading_level_4
^{Table 16.11 — PracticalSeries headings}

The first three level headings (1 to 3) are numbered with chapters, chapters and sections and chapters, section and divisions respectively.

Examining these on a Wiki page, it looks like this:

^{Figure 16.11 — Headings and different numbering arrangements}

In all cases, the heading numbers start on left edge of the main body area (left-edge of the page). The heading text is indented 120 pixels from the left edge (as shown).

The heading text, irrespective of heading level, all line up at the same indentation.

Level 4 headings are inline headings and do not have a section number. In this case, there are two versions, one indented (to the same level as numbered headings) and one without indentation. It’s personal preference which to use, I tend to go for the non-indented one.

There is a slight variation of the non-indented level 4 heading which has a trailing line at the end.

Where headings are numbered, leading zeros are not used (unlike with folder names and Web IDs), this is proper typographical practice for headings.

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

# 1<!--         H1--><img width="105" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 1
# 20<!--        H1--><img width="083" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 1

## 1.1<!--      H2--><img width="094" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 2
## 2.20<!--     H2--><img width="073" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 2
## 12.5<!--     H2--><img width="077" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 2
## 13.21<!--    H2--><img width="067" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 2

### 1.1.1<!--   H3--><img width="085" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3
### 2.1.10<!--  H3--><img width="071" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3
### 3.11.4<!--  H3--><img width="071" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3
### 12.1.2<!--  H3--><img width="071" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3
### 12.13.5<!-- H3--><img width="060" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3
### 14.18.21<!--H3--><img width="052" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 3

#### <!--       H4--><img width="120" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading level 4 
#### <!--       H4-->Heading level 4
#### <!--       H4--><u>Heading_level_4<!-- Extended line -->&emsp;&emsp;&emsp;&emsp;&emsp;</u>

^{Table 16.12 — Typical heading Markdown}

Heading levels 1 to 3 all have a very similar format, as follows (I’ve removed the comments to make it fit better on the page):

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
## 1.1<img width="094" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Text

Headings are covered in section 6.10, but these headings are slightly different.

The heading starts with hashes, one hash # for level 1, two ## for level 2, three ### for level 3 and four #### for level 4.

The PracticalSeries Wikis only use four level headings.

The starting hashes are always followed by a space for clarity.

Note

The space is not actually required, the heading will render in exactly the same way if the space is not included (the space doesn’t add any space to the rendered output, GitHub ignores it). By convention, the space is always included, it makes the Markdown easier to read.

The space is followed by the number of the chapter (and section and division depending on the heading level).

Level 1 headings just have the chapter number, level 2 headings have the chapter number and section number separated by a full stop. Level 3 have chapter, section and division number with a full stop between chapter and section and another full stop between section and division.

In all cases, there is no full stop at the end of the number.

The number is followed by a comment field that identifies the heading level (e.g. <1-- H1 -->).

The next bit is an image that gives the spacing between the end of the number and the start of the heading text. This is an <img> tag, linking to the image wi-spacer.png (this image is available to down load here: wi-spacer.png and is discussed in section 11.4).

The image is a 1 pixel by 1 pixel transparent png image. Being transparent, the image is always invisible on a web page, but by setting its width (and keeping its height at 1 px), it can be used to create a space between the heading number and the heading text (again see section 11.4 for details).

The image tag is in the form:

${\color{#446FBD}\text{<img\ }\color{#C00000}\text{width="nnn"\ }\color{#ED7D31}\text{height="1"\ }\color{#446FBD}\text{src="}\color{#4B0082}\text{00-0000/02-images/wi-spacer.png}\color{#446FBD}\text{"\ alt="Indent">" }}$

Where ${\color{#C00000}\text{width="nnn"}}$ determines the gap between the number and heading text, nnn represents the width of the image in pixels.

It can be seen that the width varies for each heading type and the number of digits in the heading number. The image itself is stored in the folder 00-0000/02-images. The image is given the alt text of Indent to clarify its meaning.

Finally comes the heading text. This should always be in sentence case (first letter capitalised along with proper nouns), it is not a title and should not use title case (all words capitalised except for articles, conjunctions and prepositions).

The template page of this Wiki contains a full set of headings, each with the appropriately sized image for the various combinations of one-digit and two-digit chapter, section and division numbering.: Appendix E Template

⬆️ Top

Compensating for number widths

Take a look at the following:

^{Figure 16.12 — Heading number widths}

The code here is this:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

# 0<img width="100" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading 
# 1<img width="100" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading 
# 4<img width="100" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading

In each case, the spacing image is the same ${\color{#C00000}\text{width="100"}}$ (100 px).

The top heading (with the number 0) is correct, the heading text is 120 px from the left edge of the page.

The next two lines are wrong, the one starting with 1 is too far to the left and the one starting with a 4 is too far to the right.

These inaccuracies arise because the font use to display the numbers and text (Segoe UI) is a non-proportional font. This means the characters in the font are different widths, a “W” is wider than an “i” for example.

This is also true of numbers, with the Segoe UI font, the number 1 is the narrowest, followed by the number 7, numbers 0, 2, 3, 5, 6, 8, and 9 are all the same width and slightly wider than the 7. Number 4 is the widest.

The difference is amplified by repeating each character between blocks (10 repetitions of each number per line):

^{Figure 16.13 — Relative withs of different number characters}

The dotted orange line coincides with the extent of the zero character.

This difference it character widths means that the image spacer in each heading has to be adjusted for the numbers in question whenever the number contains a 1, a 4 or a 7.

This becomes slightly more complicated when the heading incorporates section and division numbers, particularly where each number may be 1 or 2-digits.

Again, the template contains a full set of combinations: Appendix E Template

⬆️ Top

Appendices headings

Heading for appendices are also supported, these have the following appearances:

AHeading_level_1

A.1Heading_level_2

B.20Heading_level_2

A.1.1Heading_level_3

B.1.10Heading_level_3

C.11.4Heading_level_3

The difference here is that the chapter number is always a capital letter.

This leads to more combinations for the image spacer, particularly since most of the capital letter widths vary.

Again a full (probably) set of combinations is available on the template page: Appendix E Template

⬆️ Top

Converting a heading into a TOC entry

You may be wondering how the inclusion of an <img> tag in a heading affects any links to that heading in a table of contents (TOC) or other link.

The answer is it doesn’t, when converting the heading to a TOC or link, the rules first discussed in section 9.3.1 and reproduces here still apply:

The ${\large \color{#00B050}\text{headingName}}$ is the same as the heading itself with the following changes:

	^{List 16.4 — Rules for converting a heading}
❶	There is only one hash `#` before the ${\large \color{#00B050}\text{headingName}}$ irrespective of the heading level
❷	All text is converted to lowercase
❸	Spaces are converted to a single dash
❹	If multiple consecutive spaces are present, they are converted to a single dash
❺	Special space characters (see section 7.2) are ignored
❻	Any HTML tags are ignored (tags and attributes between `<>`)
❼	Any comments within the heading (text between ``) are ignored
❽	Numbers (0 to 9) are included
❾	All non-alphanumeric characters are ignored

So the heading:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
## 1.1<img width="094" height="1" src="00-0000/02-images/wi-spacer.png" alt="Indent">Heading name

Becomes the following link (in a TOC):

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
[Heading name](#11heading-name)

The <img> tag is completely ignored as are any comments .

⬆️ Top

16.5.3Tables

The PracticalSeries Wikis almost always use HTML tables, largely because the tables are usually centred on the page (not possible with Markdown tables) and each table has a caption at the bottom that spans the columns (again not possible with Markdown tables). This being an example:

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="t-16-14" align="center"><!-- TABLE START   (BLANK LINE ABOVE) -->
<!-- Header row --> <tr>
                        <th width="200" align="left">Character</th>
                        <th width="200" align="left">Name</th>
                        <th width="200" align="center">Escape symbol</th>
                    </tr>
<!-- Data row -->   <tr>
                        <td align="left">\</td>
                        <td align="left">Backslash</td>
                        <td align="center">\\</td>
                    </tr>
<!-- Data row -->   <tr>
                        <td align="left">`</td>
                        <td align="left">Backtick</td>
                        <td align="center">\`</td>
                    </tr>
<!-- Data row -->   <tr>
                        <td align="left">*</td>
                        <td align="left">Asterisk</td>
                        <td align="center">\*</td>
                    </tr>
<!-- CAPTION -->    <tr><th colspan="3" align="center"><sup>
<!-- CAPTION TEXT -->   Table 16.14 &mdash; Markdown escape characters
                    </sup></th></tr>
</table>
<br clear="all">                     <!-- TABLE END     (BLANK LINE BELOW) -->

${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽

Character	Name	Escape symbol
\	Backslash	\\
`	Backtick	\`
*	Asterisk	\*
^{Table 16.14 — Markdown escape characters}

^{Table 16.14 — A simple table}

The table starts with the HTML <table> tag with various attributes:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<table name="t-16-14" align="center">

All PracticalSeries tables have a name attribute, in the form: t-cc-nn, where cc is the chapter number containing the table and nn is the consecutive numbering of the tables within the chapter, in this case it is t-16-14 meaning it is the fourteenth table in chapter 16.

This name attribute allows navigation to the table from any point in the Wiki where it is referenced (see below for the navigation link details).

The align attribute determines where the table appears on the page, PracticalSeries Wiki tables are usually centred on the page so the alignment is set to center. Use left or right to align the table to either side of the page. Be aware of the word wrap problems that this can entail (see section 10.2.3)

The header row of the table is optional (it is not necessary to have a header row, unlike Markdown tables which have to have one). The header row looks like this:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- Header row --> <tr> <th width="200" align="left">Character</th> <th width="200" align="left">Name</th> <th width="200" align="center">Escape symbol</th> </tr>

This particular table is three columns wide, add or remove <th> lines as required to give more or fewer columns. Each cell within the row has its own horizontal alignment (align attribute), if vertical alignment is required (by default the cell will vertically align in the middle of the cell), use the valign attribute, see section 10.2.7 for details.

The header row is also used to specify the width of each column with the width attribute. In this case, each row is set to 200 px.

There now follows multiple sets of data rows:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- Data row --> <tr> <td align="left">\</td> <td align="left">Backslash</td> <td align="center">\\</td> </tr>

These are similar to the header rows; the alignment of each cell is specified and vertical alignment can also be added if required. Add as many data rows as are required.

The data rows are followed by a caption row (this is the bit at the bottom of the table that gives the table number):

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- CAPTION --> <tr><th colspan="3" align="center"><sup> <!-- CAPTION TEXT --> Table 16.14 — Markdown escape characters </sup></th></tr>

There are a few things here.

Firstly, the caption cell is a heading cell <th> not <td>, this puts the caption in a bold font (saving the use of a <strong> tag).

The caption spans the full width of the table; in this case there are three columns, hence the colspan="3" attribute, if the table had two columns, this would become colspan="2" &c.

The caption is always centred across the width of the table, hence the align="center".

The caption text always has the form: Table x.y — Description.

Where x and y are the chapter number and sequential table number within the chapter (these are the same as the numbers given in the t-cc-nn name at the start of the table, but without leading zeros), in this case it is 16.14.

The &mdash; is an em dash (—) use to separate the table number from the description that follows "Markdown escape characters" in this case.

The table terminates with:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
</table> <br clear="all"> <!-- TABLE END (BLANK LINE BELOW) -->

The <br clear="all"> is used to stop any text wrapping around the table (see section 10.2.3).

Each table should be preceded and followed by a blank line.

⬆️ Top

Links to a table

The naming of each table means that a link can be made to the table from any page within the Wiki (or even from an external website).

Using the previous table as an example, this had the name t-16-14. To link to this table from a point within the same Wiki page, the link would be:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="#t-16-14">Table 16.14</a>.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is a link to Table 16.14.
^{Table 16.15 — Link to a table}

If linking from a different page in the Wiki, the destination page must also be referenced, in this case it is on the this page, so the link becomes:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="#t-16-14">Table 16.14</a>.

The destination page is added prior to the #.

Finally, to link to the table from an external website, the full URL for the Wiki page must be used, in this case it is:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="https://github.com/practicalseries/GitHub-Wiki-Design-and-Implementation/ wiki/16.05-practicalseries-wiki-conventions#t-16-14">Table 16.14</a>.

A full discussion of these types of links is given in section 9.5.

⬆️ Top

A note on Markdown tables

The PracticalSeries predominantly uses HTML tables, it does, however, use Markdown tables occasionally. These are usually in appendices, for example the emoji tables of Appendix B are Markdown tables:

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

#### Face Glasses
|Emoji<br>(No.)|Short Name (gitHub)<br>Short Name (Unicode CDLR)|Esc code (Dec)<br>Esc Code (Hex)|
|:---:|:---|:---|
|😎<br>74|GitHub: `:sunglasses:`<br>CLDR:&emsp;`smiling face with sunglasses`|<sub>&amp;#128526;</sub><br><sup>&amp;#x1F60E;</sup>|
|🤓<br>75|GitHub: `:nerd_face:`<br>CLDR:&emsp;`nerd face`|<sub>&amp;#129299;</sub><br><sup>&amp;#x1F913;</sup>|
|🧐<br>76|GitHub: `:monocle_face:`<br>CLDR:&emsp;`face with monocle`|<sub>&amp;#129488;</sub><br><sup>&amp;#x1F9D0;</sup>|

${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽

Face Glasses

Emoji (No.)	Short Name (gitHub) Short Name (Unicode CDLR)	Esc code (Dec) Esc Code (Hex)
😎 74	GitHub: `:sunglasses:` CLDR: `smiling face with sunglasses`	_😎 ^😎
🤓 75	GitHub: `:nerd_face:` CLDR: `nerd face`	_🤓 ^🤓
🧐 76	GitHub: `:monocle_face:` CLDR: `face with monocle`	_🧐 ^🧐

^{Table 16.16 — A Markdown table}

It is a straight forward Markdown table of the type discussed in section 10.1 (albeit with more <br> tags than is usual). These tables do not have captions or table numbers (name).

Such tables are used where required. If the data is in a spread sheet or something that can easily be converted to Markdown and doesn’t require the formatting that can only be achieved with HTML.

⬆️ Top

16.5.4Images

PracticalSeries images are always contained in a table (this time it’s my other dog, Matilda, a puppy, or possibly a space alien, at the time the picture was taken):

^{Figure 16.14 — Matilda the saluki}

The code behind this is very similar to the table code:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="f-16-14" align="center"><!-- FIGURE START🔽🔽(BLANK LINE ABOVE) -->
<!-- Figure row --> <tr><td>
<!-- FIGURE -->         <img width="600" src="./16-0500/02-images/figm-16-14.png" alt="Matilda the saluki">
                    </td></tr>
<!-- CAPTION -->    <tr><th align="center"><sup>
<!-- CAPTION TEXT -->   Figure 16.14 &mdash; Matilda the saluki
                    </sup></th></tr>
</table>                             <!-- FIGURE END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.17 — A PracticalSeries figure}

The figure table starts with the HTML <table> tag with various attributes:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<table name="t-16-17a" align="center">

All PracticalSeries figures have a name attribute, in the form: f-cc-nn, where cc is the chapter number containing the figure and nn is the consecutive numbering of the figure within the chapter, in this case it is f-16-14 meaning it is the forteenth figure in chapter 16.

This name attribute allows navigation to the table from any point in the Wiki where it is referenced (see below for the navigation link details).

Figures are always aligned in the centre of the page align="center".

The figure image itself occupies a single row of the table (first row) and for single images, the row only has one cell (a single column tables):

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- Figure row --> <tr><td> <!-- FIGURE --> <img width="600" src="./16-0500/02-images/figm-16-14.png" alt="Matilda the saluki"> </td></tr>

The image displayed as the Figure is within an <img> tag, the width attribute determines the size of the image (in this case the image is restricted to a maximum width of 600 pixels, width="600").

The src attributes gives (in this case) the relative path to the image, the image itself is the file: figm-16-125.png.

The alt text entry should always be used and give some textual description of the image (as a general rule of thumb, make the alt text the same as the figure caption text).

The figure row is followed by a caption row (this is the bit at the bottom of the figure that gives the figure number and description):

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- CAPTION --> <tr><th align="center"><sup> <!-- CAPTION TEXT --> Figure 16.14 — Matilda the saluki </sup></th></tr>

The caption is very similar to the caption used in tables (see the previous section).

The caption cell is a heading cell <th> not <td>, this puts the caption in a bold font (saving the use of a <strong> tag).

The caption is always centred across the width of the table, hence the align="center".

Note

The figure is a contained in a table with a single column, hence there is no need for a 1colspan1 attribute

The caption is within a <sup>, superscript tag. This makes the text smaller than normal and give it a caption type appearance.

The caption text always has the form: Figure x.y — Description.

Where x and y are the chapter number and sequential figure number within the chapter (these are the same as the numbers given in the f-cc-nn name at the start of the table, but without leading zeros), in this case it is 16.15.

The — is an em dash (—) use to separate the table number from the description text.

The table terminates with a simple </table>

Note

There is no <br clear="all">* tag after the table; figures are always centred on the page and are not floating tables (see section 10.2.3 for details of floating elements).*

Each table should be preceded and followed by a blank line.

⬆️ Top

Images that open in a new tab

It is possible to add a link in the image table that allows the image to open in a new window (sort of).

This is the Markdown:

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="f-16-14a" align="center"><!-- FIGURE START🔽🔽(BLANK LINE ABOVE) -->
<!-- Figure row --> <tr><td>
<!-- LINK -->         <a href="./16-0500/02-images/fig-16-16.png" title="Use ctrl+click to open image in new tab">
<!-- FIGURE -->         <img width="200" src="./16-0500/02-images/figm-16-16.png" alt="Adult Matilda">
                    </td></tr>
<!-- CAPTION -->    <tr><th align="center"><sup>
<!-- CAPTION TEXT -->   Figure 16.14a &mdash; Adult Matilda
                    </sup></th></tr>
</table>                             <!-- FIGURE END  🔼🔼(BLANK LINE BELOW) -->

${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽

^{Figure 16.14a — Adult Matilda}

^{Table 16.18 — An image that opens in a new tab}

It has a link line above the <img> line

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<a href="./16-0500/02-images/fig-16-17.png" title="Use ctrl+click to open image in new tab">

The link itself href="./16-0500/02-images/fig-16-17.png" is identical to the src link for the image itself.

The title attribute for the link always has the text

Use ctrl+click to open image in new tab

This is an instruction that appears if the mouse hovers over the image. Pressing ctrl and clicking the image will open the image in a new browser tab.

The image that opens will be full size (or will have it's size restricted by the browser window size).

Important

It’s not actually possible to make GitHub open an image automatically in a new tab. This is the closest I could get.

⬆️ Top

Double images

Here’s a double image:

^{Figure 16.15 — Matilda the puppy}	^{Figure 16.16 — Matilda the adult}

She’s quite a pretty dog really.

The code is:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table align="center"><!-- DBL FIGURE START             🔽🔽(BLANK LINE ABOVE) -->
<!-- Figure row --> <tr>
<!-- FIGURE 1 ID -->    <td name="f-16-15">
<!-- FIGURE 1 IMAGE --> <img width="300" src="./16-0500/02-images/figm-16-15.png" alt="Matilda the puppy">
                        </td>
<!-- FIGURE 2 ID -->    <td name="f-16-16">
<!-- FIGURE 2 IMAGE --> <img width="300" src="./16-0500/02-images/figm-16-16.png" alt="Matilda the adult">
                        </td>
                    </tr>
<!-- CAPTION -->    <tr>
                        <th align="center"><sup>
<!-- CAPTION TEXT 1 --> Figure 16.15 &mdash; Matilda the puppy
                        </sup></th>
                        <th align="center"><sup>
<!-- CAPTION TEXT 2 --> Figure 16.16 &mdash; Matilda the adult
                        </sup></th>
                    </tr>
</table>                             <!-- DBL FIGURE END🔼🔼(BLANK LINE BELOW) -->

^{Table 16.19 — A PracticalSeries double figure}

This is basically the same table as before, just with two cells on each row (one for each image on the first row and one for each of the two captions on the second row).

The main difference between this and the single figure is that there are two name attributes and they have been moved to the <td> cells.

The reason for this is that it is not possible to give a tag multiple name attributes, i.e. The following wouldn’t work:

<table name="f-16-21" name="f-16-22" align="center">

By moving the name attributes to the <td> element, it allows navigation to either image to work.

⬆️ Top

Links to a figure

These are very similar to the links to a table discussed in section 16.5.3.

The naming of each table figure that a link can be made to the figure from any page within the Wiki (or even from an external website).

Using the previous figure as an example, this had the name f-16-15. To link to this figure from a point within the same Wiki page, the link would be:

^{Markdown and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="#f-16-15">Figure 16.15</a>.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
This is a link to Figure 16.15.
^{Table 16.18 — Link to a figure}

If linking from a different page in the Wiki, the destination page must also be referenced, in this case it is on the this page, so the link becomes:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="#f-16-15">Figure 16.15</a>.

The destination page is added prior to the #.

Finally, to link to the table from an external website, the full URL for the Wiki page must be used, in this case it is:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
This is a link to <a href="https://github.com/practicalseries/GitHub-Wiki-Design-and-Implementation/ wiki/16.05-practicalseries-wiki-conventions#f-16-15">Figure 16.15</a>.

A full discussion of these types of links is given in section 9.5.

⬆️ Top

16.5.5Lists

I don’t like the lists that are available via Markdown or HTML (see section 8.2 & 8.3), they are too simplistic and they don’t look very good:

An ordered (numbered) list	An unordered (unnumbered) list
OrderedPoint OrderedPoint OrderedPoint OrderedPoint OrderedPoint	UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint

The PracticalSeries supports more “exciting” lists, here’s some examples:

^{List c.n — PS Basic unordered}
UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint

^{List c.n — PS Basic ordered}
OrderedPoint OrderedPoint OrderedPoint OrderedPoint OrderedPoint

	^{List c.n — PS mixed, basic list}
MainPoint MainPoint
	SubPoint SubPoint
MainPoint MainPoint
	SubPoint SubPoint
MainPoint MainPoint

	^{List c.n — PS unnumberd 2-column list}
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint
●	MainPoint

	^{List c.n — PS indexed 2-column list}
①	MainPoint
②	MainPoint
③	MainPoint
④	MainPoint
⑤	MainPoint
⑥	MainPoint
⑦	MainPoint
⑧	MainPoint
⑨	MainPoint
⑩	MainPoint

	^{List c.n — PS Reversed indexed 2-column list}
❶	MainPoint
❷	MainPoint
❸	MainPoint
❹	MainPoint
❺	MainPoint
❻	MainPoint
❼	MainPoint
❽	MainPoint
❾	MainPoint
❿	MainPoint

	^{List c.n — PS mixed indexed list}
① MainPoint ② MainPoint
	SubPoint SubPoint
③ MainPoint ④ MainPoint
	SubPoint SubPoint
⑤ MainPoint ⑥ MainPoint ⑦ MainPoint ⑧ MainPoint ⑨ MainPoint ⑩ MainPoint

	^{List c.n — PS mixed reverse indexed list}
❶ MainPoint ❷ MainPoint
	SubPoint SubPoint
❸ MainPoint ❹ MainPoint
	SubPoint SubPoint
❺ MainPoint ❻ MainPoint ❼ MainPoint ❽ MainPoint ❾ MainPoint ❿ MainPoint

Task lists are catered for too:

⭕ MainPoint ✅ MainPoint ⭕ MainPoint ✅ MainPoint ⭕ MainPoint
	✅ Subpoint ⭕ Subpoint ✅ Subpoint ⭕ Subpoint ✅ Subpoint
	^{List c.n — PS task list}

	Points and subpoints	Observations
⭕ MainPoint ✅ MainPoint ⭕ MainPoint ✅ MainPoint ⭕ MainPoint		Observation Observation Observation Observation Observation
	✅ Subpoint ⭕ Subpoint ✅ Subpoint ⭕ Subpoint ✅ Subpoint	Observation Observation Observation Observation Observation
	^{List c.n — PS enhanced task list}

The one thing all these lists have in common is that they are all contained within tables.

I think it is fair to say that this list looks better than a default GitHub list.

The default lists don’t stand out enough, putting it in a table applies more emphasis to the table and allows them to become navigable objects.

The following sections go through the various PracticalSeries list formats, some are easy to use, others are more esoteric and don’t self-number.

I go through each in turn (unfortunately, there are quite a few of them). Each starts with an example showing how the list appears on a page, ignore the ones you don’t like.

The terminology I use is this: mixed lists have a combination of ordered and unnumbered lists, indexed lists use numbers in circles (①, ②, ③ &c.), reverse index have numbers in a black circle (❶, ❷, ❸ &c.). Task lists have either a tick ✅ or a circle ⭕.

⬆️ Top

Common points for all lists

All lists discussed here are contained within a HTML table, in fact the lists themselves are also in HTML format (this is necessary, it is not possible to use Markdown within a HTML table).

All the lists are within a <table> tag with a name attribute, the list table is always centred on the page align="center".

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<table name="l-cc-nn" align="center"> <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
^{Table 16.20 — Common points for lists}

All PracticalSeries lists (like tables and figures) have a name attribute, in the form: l-cc-nn, where cc is the chapter number containing the list and nn is the consecutive numbering of the list within the chapter, example l-01-05 meaning it is the fifth list in chapter 1.

These lists can be linked to in exactly the same way as that for tables and figures discussed in the previous sections.

Lists are either one, two or three columns wide, the width of each column is set at some point within the table by the width attribute (usually in the caption area and sometimes in the heading area). The width attribute is contained with a <td> or <th> tag and sets the width of the column in pixels.

**Generally, each point within a list should fit on a single line (without wrapping onto the next line), there are some lists that specifically manage wrapped text, but for most lists, stick to one line.

The lists are largely similar in construction, the first list below covers the main points of a list, subsequent lists explain the differences.

⬆️ Top

PS basic unordered list

^{List 16.5 — PS basic unordered list}
UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint UnorderedPoint

This is the simplest of the PracticalSeries lists, the code is:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-05" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- UNORD LIST -->   <tr><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->UnorderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->UnorderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->UnorderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->UnorderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->UnorderedPoint</li>
<!-- END OF LIST -->  </ul></td></tr>
<!-- CAPTION -->      <tr>
<!-- LIST WIDTH -->     <th align="left" width="400">&emsp;&emsp;&emsp;&ensp;&nbsp;<sup>
<!-- CAPTION TEXT -->List 16.5 &mdash; PS basic unordered list
                       </sup></th></tr>
</table>                                <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.21 — PS basic unordered list code}

The unordered list is within a one column, 2 row table. The first row contains the individual points in the list (the UnorderedPoint in the above code), these should be changed to reflect the required points in the list. Lines can be deleted or added as required.

The list itself is within with the <ul> unordered list HMTL tag, and each entry in the list is within its own <li> list tag, see section 8.2.

The text of each point within the list (the UnorderedPoint text in the above code), is indented by two em-spaces, these add whitespace between the point character and the text, it just makes things look nicer.

The second row of the table contains the list caption (a list number followed by a descriptive text)

The caption is very similar to the caption used in tables (see section 16.5.3).

The caption is indented by several space characters, to make the text align with the text of the individual list points (again, just to make the thing look better).

Other points in the caption are comparible with table captions, again see section 16.5.3.

The width of the table must be specified and must be wide enough that each point within the list does not wrap onto a second line. The width of the table is set in the <th> tag of the caption with the width="400" attribute. In this case the table is set to a width of 400 pixels.

⬆️ Top

PS basic ordered list

^{List 16.6 — PS basic ordered list}
OrderedPoint OrderedPoint OrderedPoint OrderedPoint OrderedPoint

The code is:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-06" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- ORD LIST -->     <tr><td><ol start="1">
<li>&emsp;&emsp;<!-- TEXT -->OrderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->OrderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->OrderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->OrderedPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->OrderedPoint</li>
<!-- END OF LIST -->  </ol></td></tr>
<!-- CAPTION -->      <tr>
<!-- LIST WIDTH -->     <th align="left" width="400">&emsp;&emsp;&emsp;&ensp;&nbsp;<sup>
<!-- CAPTION TEXT -->List 16.6 &mdash; PS basic ordered list
                       </sup></th></tr>
</table>                                <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->
                                <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.22 — PS basic ordered list code}

This is identical to the unordered list of the previous section with the exception of using the ordered list tag <ol> in place of the unordered tag <ul>. Change the start value to renumber the list (by default, it is set to 1).

Again the width of the table must be set in the caption <th> tag.

⬆️ Top

PS mixed ordered and unordered lists

	^{List 16.7 — PS mixed ordered and unordered lists}
MainPoint MainPoint
	SubPoint SubPoint
MainPoint MainPoint
	SubPoint SubPoint
MainPoint MainPoint

This is a mixture of ordered (numbered) list points and unorder list points, referred to here a “staged” list.

The list is in a two column, multiple row table.

The main points are ordered (numbered) and span both columns in a row, the unordered sub-points (unnumbered) are in the second column of the next row down (generally, main points are in an unshaded row and sub-points in the shaded rows).

The width of the first column is fixed and is arranged such that the point character of the sub-points aligns with the text of the main points.

The code is:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-07" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- MAIN LIST - START --><tr><td colspan="2"><ol start="1">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2"><ol start="3">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2"><ol start="5">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="400"><sup>
<!-- CAPTION TEXT -->&emsp;<!-- TEXT -->List 16.7 &mdash; PS mixed ordered and unordered lists
                          </sup></th></tr>
</table>                               <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.23 — PS basic unordered list code}

The main points are all ordered lists <ol> that span both columns of the table colspan="2", as follows:

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- MAIN LIST - START --><tr><td colspan="2"><ol start="1"> <li>&emsp;&emsp;<!-- TEXT -->MainPoint</li> <li>&emsp;&emsp;<!-- TEXT -->MainPoint</li> <!-- END OF MAIN LIST --> </ol></td></tr>

Again, each numbered point MainPoint is in its own <li> tag, add and remove lines as required.

The starting number for each main list is specified in the start="1" attribute, these have to be set for each set of main points in the list (1, 3 and 5 in this case).

The sub-points are just unordered lists <ul>. Again add and remove as necessary.

^Markdown
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
<!-- SUB LIST - START --> <tr><td></td><td><ul> <li>&emsp;&emsp;<!-- TEXT -->SubPoint</li> <li>&emsp;&emsp;<!-- TEXT -->SubPoint</li> <!-- END OF SUB LIST --> </ul></td></tr>

The caption is very similar to the caption used in the previous lists, in this case there are two columns, the first is set to a fixed width of 52 pixels. The second is set to give the required width of the list table.

⬆️ Top

PS enhanced mixed ordered and unordered lists

		^{List 16.8 — PS mixed ordered and unordered lists}
	MainPoint MainPoint
		SubPoint SubPoint
	MainPoint MainPoint
		SubPoint SubPoint
	MainPoint MainPoint

This is very similar to the previous list; it just has a blank column to the left to give additional indentation to the list.

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-08" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- MAIN LIST - START --><tr><td></td><!-- first cell is empty (spacer) -->
<!-- MAIN LIST - NUMBER --> <td colspan="2"><ol start="1">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- SUB LIST - START --> <tr><td colspan="2"></td><td><ul><!-- Entry in third column -->
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td></td> <!-- first cell is empty (spacer) -->
<!-- MAIN LIST - NUMBER --> <td colspan="2"><ol start="3">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- SUB LIST - START --> <tr><td colspan="2"></td><td><ul><!-- Entry in third column -->
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td></td> <!-- first cell is empty (spacer) -->
<!-- MAIN LIST - NUMBER --> <td colspan="2"><ol start="5">
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->MainPoint</li>
<!-- END OF MAIN LIST --> </ol></td></tr>
<!-- CAPTION -->          <tr><th width="50"></th><th width="52"></th><!-- SPACERS -->
<!-- LIST WIDTH -->         <th align="left" width="400"><sup>
<!-- CAPTION TEXT -->&emsp;<!-- TEXT -->List 16.8 &mdash; PS mixed ordered and unordered lists
                          </sup></th></tr>
</table>                               <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.24 — PS basic unordered list code}

Refer to the previous table for instructions, the main difference is that the first line of the caption sets the width for the first two columns, these are fixed at 50 pixels and 52 pixels.

⬆️ Top

PS index list

^{List 16.9 — PS Index list}
① MainPoint ② MainPoint ③ MainPoint ④ MainPoint ⑤ MainPoint ⑥ MainPoint ⑦ MainPoint ⑧ MainPoint ⑨ MainPoint ⑩ MainPoint ⑪ MainPoint ⑫ MainPoint ⑬ MainPoint ⑭ MainPoint ⑮ MainPoint ⑯ MainPoint ⑰ MainPoint ⑱ MainPoint ⑲ MainPoint ⑳ MainPoint

This isn’t actually a list at all (and in truth I’m not the biggest fan of it, the numbers are too small — the reverse index is better, it has larger numbers, see below), it is a series of circled numbers that are entered individually (there is no automatic numbering) to create the list.

There are only 20 of these numbers in circles (there are actually some more, all the way up to fifty I think, but after 20 the numbers changes size and the list looks silly).

The code is this (this is for all 20 numbers):

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-09" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- INDEXED LIST -->      <tr><td>
&emsp;&#x2460;<!-- 1  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2461;<!-- 2  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2462;<!-- 3  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2463;<!-- 4  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2464;<!-- 5  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2465;<!-- 6  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2466;<!-- 7  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2467;<!-- 8  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2468;<!-- 9  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2469;<!-- 10 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246A;<!-- 11 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246B;<!-- 12 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246C;<!-- 13 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246D;<!-- 14 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246E;<!-- 15 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246F;<!-- 16 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2470;<!-- 17 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2471;<!-- 18 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2472;<!-- 19 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2473;<!-- 20 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF LIST -->      </td></tr>
<!-- CAPTION -->          <tr>
<!-- LIST WIDTH -->         <th align="left" width="400">&emsp;&emsp;&emsp;&ensp;&nbsp;<sup>
<!-- CAPTION TEXT -->List 16.9 &mdash; PS Index list
                          </sup></th></tr>
</table>                                <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.25 — PS Index list code}

It is very similar to the basic ordered list, but doesn’t have an ordered list tag <ol> and the entries are not within <li> tags.

Instead the entire list is constructed using the Unicode escape sequences, here &#x2460; corresponds to the character ① and ⑳ corresponds to the character ⑳.

⬆️ Top

PS reverse index list

^{List 16.10 — PS reverse index list}
❶ MainPoint ❷ MainPoint ❸ MainPoint ❹ MainPoint ❺ MainPoint ❻ MainPoint ❼ MainPoint ❽ MainPoint ❾ MainPoint ❿ MainPoint

This looks better than the indexed list, the numbers are larger and more readable.

The downside is that there are only ten such numbers, so the list can’t be more than 10 points long: This is the code, the only difference between this and the indexed link are the Unicode characters and the spacing characters.

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-10" align="center"><!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- INDEXED LIST --> <tr><td>
&emsp;&#x2776;<!-- 1  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2777;<!-- 2  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2778;<!-- 3  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2779;<!-- 4  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277A;<!-- 5  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277B;<!-- 6  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277C;<!-- 7  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277D;<!-- 8  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277E;<!-- 9  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277F;<!-- 10 -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
<!-- END OF LIST -->  </td></tr>
<!-- CAPTION -->      <tr>
<!-- LIST WIDTH -->            <th align="left" width="400">&emsp;&emsp;&emsp;&ensp;&nbsp;<sup>&thinsp;
<!-- CAPTION TEXT -->List 16.10 &mdash; PS reverse index list
                    </sup></th></tr>
</table>                             <!-- LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.26 — PS reverse indexed list code}

⬆️ Top

PS index list with text wrap

	^{List 16.11 — PS index list with text wrap}
①	MainPoint lorem ipsum dolor sit amet, consectetur adipiscing elit.
②	MainPoint
③	MainPoint
④	MainPoint
⑤	MainPoint
⑥	MainPoint
⑦	MainPoint
⑧	MainPoint
⑨	MainPoint
⑩	MainPoint
⑪	MainPoint
⑫	MainPoint
⑬	MainPoint
⑭	MainPoint
⑮	MainPoint
⑯	MainPoint
⑰	MainPoint
⑱	MainPoint
⑲	MainPoint
⑳	MainPoint

This list has two columns per index number, the first column contains the point number and is vertically aligned (number is always at the top).

The second column contains the text for the ordered point, because this is a separate column, the text can be allowed to wrap without interfering with subsequent rows (as shown in point ①)

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-11" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- LIST ROW 01  --><tr><td valign="top">&#x2460;<!-- 1  --></td>
    <td><!-- TEXT -->MainPoint lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<!-- LIST ROW 02  --><tr><td valign="top">&#x2461;<!-- 2  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 03  --><tr><td valign="top">&#x2462;<!-- 3  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 04  --><tr><td valign="top">&#x2463;<!-- 4  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 05  --><tr><td valign="top">&#x2464;<!-- 5  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 06  --><tr><td valign="top">&#x2465;<!-- 6  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 07  --><tr><td valign="top">&#x2466;<!-- 7  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 08  --><tr><td valign="top">&#x2467;<!-- 8  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 09  --><tr><td valign="top">&#x2468;<!-- 9  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 10  --><tr><td valign="top">&#x2469;<!-- 10 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 11  --><tr><td valign="top">&#x246A;<!-- 11 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 12  --><tr><td valign="top">&#x246B;<!-- 12 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 13  --><tr><td valign="top">&#x246C;<!-- 13 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 14  --><tr><td valign="top">&#x246D;<!-- 14 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 15  --><tr><td valign="top">&#x246E;<!-- 15 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 16  --><tr><td valign="top">&#x246F;<!-- 16 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 17  --><tr><td valign="top">&#x2470;<!-- 17 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 18  --><tr><td valign="top">&#x2471;<!-- 18 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 19  --><tr><td valign="top">&#x2472;<!-- 19 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 20  --><tr><td valign="top">&#x2473;<!-- 20 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="348"><sup>
<!-- CAPTION TEXT --><!-- TEXT -->List 16.11 &mdash; PS index list with text wrap<
                           </sup></th></tr>
</table>                              <!-- LIST END    🔼🔼(BLANK LINE BELOW) -->

^{Table 16.27 — PS index list with text wrap}

⬆️ Top

PS reverse index list with text wrap

	^{List 16.12 — PS reverse index list with text wrap}
❶	MainPoint lorem ipsum dolor sit amet, consectetur adipiscing elit.
❷	MainPoint
❸	MainPoint
❹	MainPoint
❺	MainPoint
❻	MainPoint
❼	MainPoint
❽	MainPoint
❾	MainPoint
❿	MainPoint

This is identical to the previous list, but uses the reverse index characters. There are only 10 such characters, hence the list cannot have more than 10 points

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-12" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- LIST ROW 01  --><tr><td valign="top">&#x2776;<!-- 1  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 02  --><tr><td valign="top">&#x2777;<!-- 2  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 03  --><tr><td valign="top">&#x2778;<!-- 3  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 04  --><tr><td valign="top">&#x2779;<!-- 4  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 05  --><tr><td valign="top">&#x277A;<!-- 5  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 06  --><tr><td valign="top">&#x277B;<!-- 6  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 07  --><tr><td valign="top">&#x277C;<!-- 7  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 08  --><tr><td valign="top">&#x277D;<!-- 8  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 09  --><tr><td valign="top">&#x277E;<!-- 9  --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- LIST ROW 10  --><tr><td valign="top">&#x277F;<!-- 10 --></td>
    <td><!-- TEXT -->MainPoint</td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="348"><sup>
<!-- CAPTION TEXT --><!-- TEXT -->List 16.12 &mdash; PS reverse index list with text wrap
                           </sup></th></tr>
</table>                              <!-- LIST END    🔼🔼(BLANK LINE BELOW) -->

^{Table 16.28 — PS index list with text wrap}

⬆️ Top

PS indexed, mixed list

	^{List 16.13 — PS indexed, mixed list}
① MainPoint ② MainPoint
	SubPoint SubPoint
③ MainPoint ④ MainPoint
	SubPoint SubPoint
⑤ MainPoint ⑥ MainPoint ⑦ MainPoint ⑧ MainPoint ⑨ MainPoint ⑩ MainPoint ⑪ MainPoint ⑫ MainPoint ⑬ MainPoint ⑭ MainPoint ⑮ MainPoint ⑯ MainPoint ⑰ MainPoint ⑱ MainPoint ⑲ MainPoint ⑳ MainPoint

This is a combination of the index list and the staged list

The code is similar except that the main point lists are replaced with the reverse index lists

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-13" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x2460;<!-- 1  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2461;<!-- 2  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x2462;<!-- 3  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2463;<!-- 4  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x2464;<!-- 5  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2465;<!-- 6  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2466;<!-- 7  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2467;<!-- 8  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2468;<!-- 9  -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2469;<!-- 10 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246A;<!-- 11 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246B;<!-- 12 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246C;<!-- 13 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246D;<!-- 14 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246E;<!-- 15 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x246F;<!-- 16 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2470;<!-- 17 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2471;<!-- 18 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2472;<!-- 19 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2473;<!-- 20 -->&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="300"><sup>
<!-- CAPTION TEXT -->&emsp;<!-- TEXT -->List 16.13 &mdash; PS indexed, mixed list
                           </sup></th></tr>
</table>                              <!-- LIST END    🔼🔼(BLANK LINE BELOW) -->

^{Table 16.29 — PS indexed, mixed list}

⬆️ Top

PS reverse indexed, mixed list

	^{List 16.14 — PS reverse indexed, mixed list}
❶ MainPoint ❷ MainPoint
	SubPoint SubPoint
❸ MainPoint ❹ MainPoint
	SubPoint SubPoint
❺ MainPoint ❻ MainPoint ❼ MainPoint ❽ MainPoint ❾ MainPoint ❿ MainPoint

This is identical to the previous list, but uses the reverse index characters (of which there are only 10).

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-14" align="center">   <!-- LIST START🔽🔽(BLANK LINE ABOVE) -->
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x2776;<!-- 1  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2777;<!-- 2  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x2778;<!-- 3  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x2779;<!-- 4  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- SUB LIST - START --> <tr><td></td><td><ul>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<li>&emsp;&emsp;<!-- TEXT -->SubPoint</li>
<!-- END OF SUB LIST -->  </ul></td></tr>
<!-- MAIN LIST - START --><tr><td colspan="2">
&emsp;&#x277A;<!-- 5  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277B;<!-- 6  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277C;<!-- 7  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277D;<!-- 8  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277E;<!-- 9  -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
&emsp;&#x277F;<!-- 10 -->&emsp;&ensp;&thinsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN LIST --> </td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="300"><sup>
<!-- CAPTION TEXT -->&emsp;<!-- TEXT -->List 16.14 &mdash; PS reverse indexed, mixed list
                           </sup></th></tr>
</table>                              <!-- LIST END    🔼🔼(BLANK LINE BELOW) -->
                             <!-- LIST END    🔼🔼(BLANK LINE BELOW) -->

^{Table 16.30 — PS indexed, mixed list}

⬆️ Top

PS task list

⭕ MainPoint ✅ MainPoint ⭕ MainPoint ✅ MainPoint ⭕ MainPoint
	✅ Subpoint ⭕ Subpoint ✅ Subpoint ⭕ Subpoint ✅ Subpoint
	^{List 16.15 — PS task list}

The task list is a two-column table constructed using emoji characters for the red circles ⭕ and green ticks ✅.

The construction is very similar to the indexed, mixed lists, except that sub-points (like the main points of the indexed list) have no list tags <ul> or <li>.

To mark a task as complete, simply replace the circle emojis with the ticked emoji. There is a copy of both in the comment field of the first <table> tag.

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-15" align="center"><!-- TASK LIST START🔽🔽(BLANK LINE ABOVE) ⭕✅-->
<!-- MAIN LIST -->     <tr><th colspan="2" align="left">
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
✅&emsp;&emsp;<!-- TEXT -->MainPoint<br>
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
✅&emsp;&emsp;<!-- TEXT -->MainPoint<br>
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF MAIN -->   </th></tr>
<!-- SUBLIST -->       <tr><td></td><td>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ⭕&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ⭕&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
<!-- END OF SUBLIST --></td></tr>
<!-- CAPTION -->          <tr><th width="52"></th><!-- SPACER -->
<!-- LIST WIDTH -->         <th align="left" width="348"><sup>&#8202;
<!-- CAPTION TEXT -->List 16.15 &mdash; PS task list
                       </sup></th></tr>
</table>                             <!-- TASK LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.31 — PS task list code}

⬆️ Top

PS enhanced task list with observations

	Points/subpoints	Observations
⭕ MainPoint ✅ MainPoint ⭕ MainPoint ✅ MainPoint ⭕ MainPoint		Observation Observation Observation Observation Observation
	✅ Subpoint ⭕ Subpoint ✅ Subpoint ⭕ Subpoint ✅ Subpoint	Observation Observation Observation Observation Observation
	^{List 16.16 — PS enhanced task list with observations}

The task list is a three-column table constructed using emoji characters for the red circles ⭕ and green ticks ✅.

The construction is very similar to the indexed, mixed lists, except that sub-points (like the main points of the indexed list) have no list tags <ul> or <li>.

To mark a task as complete, simply replace the circle emojis with the ticked emoji. There is a copy of both in the comment field of the first <table> tag.

The third column in the list table allows observations to be entered.

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="l-16-16" align="center"><!-- TASK LIST START🔽🔽(BLANK LINE ABOVE) ⭕✅-->
<tr><th width="52"></th><th align="left" width="174">Points/subpoints</th>
                    <th align="left" width="174">Observations</th></tr>
<!-- MAIN LIST -->     <tr><th colspan="2" align="left">
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
✅&emsp;&emsp;<!-- TEXT -->MainPoint<br>
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
✅&emsp;&emsp;<!-- TEXT -->MainPoint<br>
⭕&emsp;&emsp;<!-- TEXT -->MainPoint<br>
<!-- END OF POINTS -->   </th>
<!-- OBSERVATIONS -->    <td>
    Observation<br>
    Observation<br>
    Observation<br>
    Observation<br>
    Observation<br>
<!-- END OF OBS -->      </td>
<!-- END OF MAIN -->   </tr>
<!-- SUBLIST -->       <tr><td></td><td>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ⭕&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ⭕&emsp;&emsp;<!-- TEXT -->Subpoint<br>
  ✅&emsp;&emsp;<!-- TEXT -->Subpoint<br>
<!-- END OF SUBLIST --></td></td>
<!-- OBSERVATIONS -->  <td>
    Observation<br>
    Observation<br>
    Observation<br>
    Observation<br>
    Observation<br>
<!-- END OF OBS -->    </td>
<!-- END OF MAIN --> </tr>
<!-- CAPTION -->     <tr><th></th><!-- SPACER -->
                       <th align="left" colspan="2"><sup>&#8202;
<!-- CAPTION TEXT -->List 16.16 &mdash; PS enhanced task list with observations
                       </sup></th></tr>
</table>                             <!-- TASK LIST END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.32 — PS enhanced task list with observations code}

The main difference here is the addition of the observation cells (one for main points, one for sub-points).

This table has a header row at the top, the widths of each column is set in this header row rather than in the caption row at the bottom.

⬆️ Top

16.5.6Code fragments

Code fragments are fairly easy, they generally use syntax highlighting (although this is very limited within GitHub). The following is an example of an HTML code fragment:

FILENAME.ext

<section class="section-std" id="js--020102a">          <!-- Start of section         -->
    <div class="rg-row sub-title-row">                  <!-- Start of subtitle row    -->
        <div class="rg-col rg-span1-5"></div>           <!-- Left column (not used)   -->
        <div class="rg-col rg-span3-5">                 <!-- Start of subtitle column -->
            <div class="sub-title-text-box">
              <h4>Backwashing</h4></div>
        </div>                                          <!-- End of subtitle column   -->
        <div class="rg-col rg-span1-5"></div>           <!-- Right column (not used)  -->
    </div>                                              <!-- End of Subtitle row      -->
    <div class="rg-row">                                <!-- Start of section content -->
        <div class="rg-col rg-span1-5">                 <!-- Start of left column     -->
        <!--     <aside class="aside-left">                  Start of left side bar   -->
        <!--         <p></p>                                 Side bar content         -->
        <!--     </aside>                                    End of left side bar     -->
        </div>                                          <!-- End of left column       -->
    </div>                                              <!-- End of section content   -->
</section>                                              <!-- End of section           -->

^{Code 16.1 — PS code fragment}

Like most other objects, the code fragment is placed in table, in this case with a header and a caption.

The header need not be included, it is generally used to hold a filename, but this is optional.

This is the code:

^Markdown

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="c-16-10" align="center"><!-- CODE BLOCK START🔽🔽(BLANK LINE ABOVE) -->
<!-- Filename --><th align="right"><code>FILENAME.ext</code></th>
<tr><td><!-- START OF CODE BELOW (BLANK LINE BELOW) -->

```html
<section class="section-std" id="js--020102a">          <!-- Start of section         -->
    <div class="rg-row sub-title-row">                  <!-- Start of subtitle row    -->
        <div class="rg-col rg-span1-5"></div>           <!-- Left column (not used)   -->
        <div class="rg-col rg-span3-5">                 <!-- Start of subtitle column -->
            <div class="sub-title-text-box">
              <h4>Backwashing</h4></div>
        </div>                                          <!-- End of subtitle column   -->
        <div class="rg-col rg-span1-5"></div>           <!-- Right column (not used)  -->
    </div>                                              <!-- End of Subtitle row      -->
    <div class="rg-row">                                <!-- Start of section content -->
        <div class="rg-col rg-span1-5">                 <!-- Start of left column     -->
        <!--     <aside class="aside-left">                  Start of left side bar   -->
        <!--         <p></p>                                 Side bar content         -->
        <!--     </aside>                                    End of left side bar     -->
        </div>                                          <!-- End of left column       -->
    </div>                                              <!-- End of section content   -->
</section>                                              <!-- End of section           -->
```

</td></tr><!-- END OF CODE (BLANK LINE ABOVE) --> 
<!-- CAPTION -->     <tr>
                       <th align="center" width="200"><sup>
<!-- CAPTION TEXT -->Code 16.1 &mdash; PS code fragment
                       </sup></th></tr>
</table>                             <!-- CODE BLOCK END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.33 — PS code fragment}

All PracticalSeries code fragments have a name attribute (just like everything else covered here) In this case it is in the form: c-cc-nn, where cc is the chapter number containing the list and nn is the consecutive numbering of the code fragment within the chapter, in this case it is c-16-01 meaning it is the first code fragment in chapter 16.

The code fragment is within a one column, 3 row table. The first row contains any associated filename, this is right aligned and displayed in a non-proportional font (hence the <code> tag).

The second row contains the code fragment itself, this starts with three backticks followed by the lowercase abbreviation for the language type (a full list of these is given in section 13.3.1), in this case it is ```html, for HTML code fragments.

The fragment terminates with three backticks. The starting and terminating backticks must be on their own line and have a blank line both above and below (as shown).

The third row of the table contains the code fragment caption. This works in the same way as those for images, tables and lists.

The width of the table must be specified (in this case it is a minimum width, the code fragment itself will determine the actual width of the table) The width of the table is set in the <th> tag of the caption with the width="200" attribute. In this case the table is set to a minimum width of 200 pixels.

⬆️ Top

16.5.7Formulae

Formulae (equations) can be displayed in two formats:

Firstly:

^{Equation 16.1 — General quadratic equation}
$$x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}$$

Secondly (the alternative arrangement):

^{General quadratic equation}
$$x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}$$	^(16.2)

The first form of the formula is the standard arrangement, a one-column, 2 row table with the equation in the top row and a caption in the second row (very similar to the code fragment of the previous section).

The second form of the formula is an alternative form that can be used for multiple rows of equation with each row having its own equation number.

Taking each in turn:

⬆️ Top

PS standard formulae

^{Equation 16.1 — General quadratic equation}
$$x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}$$

The Markdown is

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="e-16-01" align="center"><!-- FORMULAE START🔽🔽(BLANK LINE ABOVE) -->
<tr><td><!-- START OF FORMULAE BELOW (BLANK LINE BELOW) -->

```math
x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}
```

</td></tr><!-- END OF FORMULAE (BLANK LINE ABOVE) --> 
<!-- CAPTION -->     <tr>
                       <th align="center" width="400"><sup>
<!-- CAPTION TEXT --> Equation 16.1 &mdash; General quadratic equation
                       </sup></th></tr>
</table>                             <!-- FORMULAE END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.34 — PS Standard formulae code}

Yes, it has a name attribute, just like everything else.

The formula is within a one column, 2 row table. The first row contains the formula itself, this is starts with three backticks followed by the lowercase math designation ```math, which will cause the equation to be rendered by GitHub. The equation terminates with three backticks.

The starting and terminating backticks must be on their own line and have a blank line both above and below (as shown).

The second row of the table contains the code fragment caption (a number followed by descriptive text) and is identical to those of tables, images and code fragments

The width of the table must be specified (in this case it is a minimum width, the formula itself will determine the actual width of the table) The width of the table is set in the <th> tag of the caption with the width="400" attribute. In this case the table is set to a minimum width of 400 pixels.

⬆️ Top

PS alternate formulae

^{General quadratic equation}
$$x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}$$	^(16.2)

The Markdown is

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table name="e-16-02" align="center"><!-- FORMULAE START🔽🔽(BLANK LINE ABOVE) -->
<tr><td><!-- START OF CODE BELOW (BLANK LINE BELOW) -->

```math
x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}
```
</td><th width="60"><sup>(16.2)</sup></th></tr><!-- EQUATION NUMBER -->
</td></tr><!-- END OF CODE (BLANK LINE ABOVE) --> 
<!-- CAPTION -->     <tr>
                       <th align="center" width="400" colspan="2"><sup>
<!-- CAPTION TEXT --> General quadratic equation
                       </sup></th></tr>
</table>                             <!-- FORMULAE END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.35 — PS alternate formulae code}

This format allows for multiple formulae rows to be added, each can have its own equation number in brackets in the right-hand column (16.2) in this case

The width of the equation number cell is fixed at 60 pixels. The overall (minimum) width of the table is set in the caption row width="400". This caption row spans both columns.

Multiple rows look like this:

^{General quadratic equation}
$$x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}$$	^(16.3)
$$derived \space from \space ax^2+bx+c=0$$	^(16.4)

The Markdown is

^{Markdown and GitHub output}

${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽

<table align="center"><!-- FORMULAE START🔽🔽(BLANK LINE ABOVE) -->
<tr name="e-16-03"><td><!-- START OF CODE BELOW (BLANK LINE BELOW) -->

```math
x=\frac{-b\pm\sqrt{b^2—4ad}}{2a}
```
</td><th width="60"><sup>(16.3)</sup></th></tr><!-- EQUATION NUMBER -->
</td></tr><!-- END OF CODE --> 
<tr name="e-16-03"><td><!-- START OF CODE BELOW (BLANK LINE BELOW) -->

```math
derived \space from \space ax^2+bx+c=0
```
</td><th width="60"><sup>(16.4)</sup></th></tr><!-- EQUATION NUMBER -->
</td></tr><!-- END OF CODE --> 
<!-- CAPTION -->     <tr>
                       <th align="center" width="400" colspan="2"><sup>
<!-- CAPTION TEXT --> General quadratic equation
                       </sup></th></tr>
</table>                             <!-- FORMULAE END  🔼🔼(BLANK LINE BELOW) -->

^{Table 16.36 — PS alternate formulae, multiple rows}

16.05 PracticalSeries Wiki conventions - practicalseries/GitHub-Wiki-Design-and-Implementation GitHub Wiki

16.5Main body area

16.5.1Common page elements

End of page marker

End of section elements

16.5.2Headings

1Heading_level_1

20Heading_level_1

1.1Heading_level_2

2.10Heading_level_2

12.5Heading_level_2

13.21Heading_level_2

1.1.1Heading_level_3

2.1.10Heading_level_3

3.10.5Heading_level_3

12.1.2Heading_level_3

12.13.5Heading_level_3

14.18.21Heading_level_3

Heading_level_4

Heading_level_4

Heading_level_4

Compensating for number widths

Appendices headings

AHeading_level_1

A.1Heading_level_2

B.20Heading_level_2

A.1.1Heading_level_3

B.1.10Heading_level_3

C.11.4Heading_level_3

Converting a heading into a TOC entry

16.5.3Tables

Links to a table

A note on Markdown tables

Face Glasses

16.5.4Images

Images that open in a new tab

Double images

Links to a figure

16.5.5Lists

Common points for all lists

PS basic unordered list

PS basic ordered list

PS mixed ordered and unordered lists

PS enhanced mixed ordered and unordered lists

PS index list

PS reverse index list

PS index list with text wrap

PS reverse index list with text wrap

PS indexed, mixed list

PS reverse indexed, mixed list

PS task list

PS enhanced task list with observations

16.5.6Code fragments

16.5.7Formulae

PS standard formulae

PS alternate formulae

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️