Multi-tagged list <…><…><…> …

A multi-tagged list is a collection of items in which each item starts with tags. Tags can be symbols, words or phrases. Multi-tagged lists are automatically converted to tables when an Aneamal document is turned into a webpage. The items’ tags become row and column headings while the actual items make up the content of the table.

The most simple case of a multi-tagged list is the double-tagged list. Items in a multi-tagged list can be tagged with up to four items though, so Aneamal supports triple-tagged and quadruple-tagged lists and lists whose items have a varying number of tags as well.

How to

A multi-tagged list is a block, so a blank line is expected before and after it unless the list occurs at the beginning or end of a file respectively.

Each item is marked by up to four tags at the start of a line. Each tag is wrapped in angle brackets < >, also known as lower-than and greater-than sign, and may contain phrase markup. There must be no space between an item’s tags. But a space is recommended after the item’s last tag, that is before the actual content of the item. See the examples below.

When converted to a webpage, the items’ first tags become row group or row headings, second tags become column group or column headings, third tags become row headings within a row group and fourth tags become column headings within a column group.

An item’s complete combination of tags may not occur again in the same position of another item in the same list. For example, you can not have two items that are both tagged with <A><B><C> in a triple-tagged list. You can neither have an item with only two tags <D><E> and an item tagged with the three tags <D><E><F> in the same list, since the complete former tag combination occurs in the same position as part of the latter combination.

You can, however, have items tagged with <G><H><I> and <G><H><K> in the same list, since neither complete tag combination occurs in the other. You can also have items tagged <L><M> and <M><L> in the same list despite having the same tags, because they have them in different positions.

A pair of empty tags <><> can be used to address the origin, the top-left cell in the generated table, which is independent of all row and column headings. This is shown in the first example. Otherwise tags may not be empty.

The actual item after its tags can be text with or without phrase markup, or a file or math block.

Examples

The first example encodes a classification of elementary fermions according to the Standard Model of particle physics in a triple-tagged list. The table’s origin, that is the top-left cell, is also filled here and as always addressed by a pair of empty tags.

<><> elementary fermions
<quark><1. generation><up-type> up
<quark><1. generation><down-type> down
<quark><2. generation><up-type> charm
<quark><2. generation><down-type> strange
<quark><3. generation><up-type> top
<quark><3. generation><down-type> bottom
<lepton><1. generation><charged> electron
<lepton><1. generation><neutral> electron neutrino
<lepton><2. generation><charged> muon
<lepton><2. generation><neutral> muon neutrino
<lepton><3. generation><charged> tau
<lepton><3. generation><neutral> tau neutrino

The second example lists a multitude of emojis of different age, skin color, gender and hair color. The number of tags in this list varies from one to four per item.

<👶><🏿> 👶🏿
<👶><🏾> 👶🏾
<👶><🏽> 👶🏽
<👶><🏼> 👶🏼
<👶><🏻> 👶🏻
<🧑><🏿><♀> 👩🏿‍🦱
<🧑><🏿><♂> 👨🏿‍🦱
<🧑><🏾><♀> 👩🏾
<🧑><🏾><♂> 👨🏾
<🧑><🏽><♀> 👩🏽
<🧑><🏽><♂> 👨🏽
<🧑><🏼><♀> 👩🏼
<🧑><🏼><♂> 👨🏼
<🧑><🏻><♀><🦊> 👩🏻‍🦰
<🧑><🏻><♀><🐼> 👩🏻
<🧑><🏻><♂><🦊> 👨🏻‍🦰
<🧑><🏻><♂><🐼> 👨🏻
<🧓><🏿><♀> 👵🏿
<🧓><🏿><♂> 👴🏿
<🧓><🏾><♀> 👵🏾
<🧓><🏾><♂> 👴🏾
<🧓><🏽><♀> 👵🏽
<🧓><🏽><♂> 👴🏽
<🧓><🏼><♀> 👵🏼
<🧓><🏼><♂> 👴🏼
<🧓><🏻><♀> 👵🏻
<🧓><🏻><♂> 👴🏻
<💀> 💀

For developers

When Aneamal is translated to HTML, a multi-tagged list is wrapped in an HTML table element. Aneamal tags become HTML th elements, the actual items td elements. A bunch of other HTML elements and attributes is involved in building the table. Here is the generated code of the first example:

<table>
<colgroup span='2'>
<colgroup span='3'>
<thead>
<tr>
<td colspan='2'>elementary fermions</td>
<th scope='col'>1. generation</th>
<th scope='col'>2. generation</th>
<th scope='col'>3. generation</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan='2' scope='rowgroup'>quark</th>
<th scope='row'>up-type</th>
<td>up</td>
<td>charm</td>
<td>top</td>
</tr>
<tr>
<th scope='row'>down-type</th>
<td>down</td>
<td>strange</td>
<td>bottom</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan='2' scope='rowgroup'>lepton</th>
<th scope='row'>charged</th>
<td>electron</td>
<td>muon</td>
<td>tau</td>
</tr>
<tr>
<th scope='row'>neutral</th>
<td>electron neutrino</td>
<td>muon neutrino</td>
<td>tau neutrino</td>
</tr>
</tbody>
</table>

This is the HTML that corresponds to the second example:

<table>
<colgroup span='2'>
<colgroup>
<colgroup>
<colgroup>
<colgroup>
<colgroup span='2'>
<thead>
<tr>
<td colspan='2' rowspan='2'></td>
<th rowspan='2' scope='colgroup'>🏿</th>
<th rowspan='2' scope='colgroup'>🏾</th>
<th rowspan='2' scope='colgroup'>🏽</th>
<th rowspan='2' scope='colgroup'>🏼</th>
<th colspan='2' scope='colgroup'>🏻</th>
</tr>
<tr>
<th scope='col'>🦊</th>
<th scope='col'>🐼</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan='2' scope='rowgroup'>👶</th>
<td>👶🏿</td>
<td>👶🏾</td>
<td>👶🏽</td>
<td>👶🏼</td>
<td colspan='2'>👶🏻</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan='2' scope='rowgroup'>🧑</th>
<th scope='row'>♀</th>
<td>👩🏿‍🦱</td>
<td>👩🏾</td>
<td>👩🏽</td>
<td>👩🏼</td>
<td>👩🏻‍🦰</td>
<td>👩🏻</td>
</tr>
<tr>
<th scope='row'>♂</th>
<td>👨🏿‍🦱</td>
<td>👨🏾</td>
<td>👨🏽</td>
<td>👨🏼</td>
<td>👨🏻‍🦰</td>
<td>👨🏻</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan='2' scope='rowgroup'>🧓</th>
<th scope='row'>♀</th>
<td>👵🏿</td>
<td>👵🏾</td>
<td>👵🏽</td>
<td>👵🏼</td>
<td colspan='2'>👵🏻</td>
</tr>
<tr>
<th scope='row'>♂</th>
<td>👴🏿</td>
<td>👴🏾</td>
<td>👴🏽</td>
<td>👴🏼</td>
<td colspan='2'>👴🏻</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan='2' scope='rowgroup'>💀</th>
<td colspan='6'>💀</td>
</tr>
</tbody>
</table>

The part of the table which contains the row headings can be selected as colgroup:first-child for styling in CSS, the part that contains the column headings is selected as thead. So the following stylesheet separates row and column headings from the table content with solid black lines:

colgroup:first-child {
	border-right: solid medium black;
}
thead {
	border-bottom: solid medium black;
}