12Lists and notes

Num­bered lists con­sist of a se­ries of list en­tries <li>...</li> con­tained in an or­dered list el­e­ment <ol>...</ol>. Under nor­mal cir­cum­stances, there is no limit to the num­ber of list el­e­ments that can be in a num­bered (or­dered) list. Where this web tem­plate is used, there is an ab­solute limit of 99 en­tries and if you are using the open source ver­sion, that limit is 26 en­tries — I ex­plain why as we go through it

A de­fault num­bered list looks like this:

Again, this isn’t what I want; it’s suf­fer­ing from all the faults the un­ordered list had: the num­ber is po­si­tioned to the left of the cen­tral col­umn area and the “Entry” text is aligned with the left edge of the cen­tral col­umn. I want it to look like this:

Four things have changed here: (most ob­vi­ously) the num­ber is en­cased in a cir­cle, the num­ber is now in­dented into the cen­tral col­umn area, the spac­ing be­tween the num­ber and the list text is larger, and fi­nally, the line spac­ing has been in­creased.

The HTML for the de­fault num­bered list (Fig­ure 12.5) is:

        <ol>
            <li>Entry 1</li>
            <li>Entry 2</li>
            <li>Entry 3</li>
            <li>Entry 4</li>
            <li>Entry 5</li>
        </ol>
 

It’s much the same as the un­ordered list: de­clare an or­dered (num­bered) el­e­ment <ol> and put each entry in a <li> el­e­ment.

• Ordered list is the official name for this type of list. I use numbered because it has numbers. I use numbered and ordered interchangeably — ordered is the official and correct name.

The HTML for the web tem­plate ver­sion (Fig­ure 12.6) is very sim­i­lar to the un­ordered list of § 12.1. It looks like this:

<ol class="list-num">                       <!-- Start of numbered list -->
    <li><p>Entry 1</p></li>
    <li><p>Entry 2</p></li>
    <li><p>Entry 3</p></li>
    <li><p>Entry 4</p></li>
    <li><p>Entry 5</p></li>
</ol>                                       <!-- End of numbered list   -->

The main dif­fer­ence is that the <ol> el­e­ment has been given a class: list-num; the full CSS is:

.list-num {                                 /* TEXT STYLE - Numbered list */
    font-family: "conc-i3-r";
    margin-left: 5rem;
}
.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}

This is shorter (and a bit dif­fer­ent) from the un­ordered list.

The first bit sets the font for the whole or­dered list to the Con­course Index font, the one that looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 ... 99

The CSS being:

    font-family: "conc-i3-r";

The next bit is the same as the un­ordered list:

    margin-left: 5rem;

The left mar­gin is set to 5 rem; this de­ter­mines where the text in the <li> el­e­ment starts (not the po­si­tion of the num­ber point).

The or­dered list does not need the :be­fore pseudo el­e­ment used to give the bul­let point in the un­ordered list, the num­ber­ing uses the font spec­i­fied in the <li> el­e­ment. In this case the <li> el­e­ment in­her­its the Con­course Index font (conc-i3-r) spec­i­fied in the par­ent class list-num.

How­ever, the text that ap­pears in the list entry needs to be Eq­uity and needs to match the body text arrange­ments. This is iden­ti­cal to the un­ordered list:

Again, it is the de­scen­dant se­lec­tors:

.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}

Just as be­fore, this is a de­scen­dant se­lec­tor that en­sures the text within a <p> el­e­ment that is con­tained within the <li> el­e­ment (that is it­self con­tained within the class list-num) will have the fol­low­ing prop­er­ties ap­plied:

    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;

I.e. the font is changed to Eq­uity, some left padding is ap­plied and a bot­tom bor­der of 0.85 rem is also ap­plied. This makes the text look like nor­mal body text in terms of the font and line spac­ing.

In the HTML, nor­mal num­bered list en­tries are con­tained in both a <li> el­e­ment and a <p> el­e­ment:

            <li><p>Entry 1</p></li>

This makes the text ap­pear as it does in Fig­ure 12.6.

The num­bered list uses the Con­course Index font and this will dis­play any sin­gle or dou­ble digit num­ber as that num­ber sur­rounded by a cir­cle. Three digit num­bers are not sup­ported; hence the num­ber­ing limit is 1-99.

The con­se­quence of this is if using Con­course Index for list num­ber­ing, only have list en­tries num­bered be­tween 1 and 99.

If you are using my PS-Index fonts, the num­ber­ing can­not ex­ceed 26, I ex­plain why in the next sec­tion.

To start a num­bered list at a dif­fer­ent num­ber, add the fol­low­ing to the HTML:

<ol class="list-num" start="5">             <!-- Start of numbered list -->
    <li><p>Entry 1</p></li>
    <li><p>Entry 2</p></li>
    <li><p>Entry 3</p></li>
    <li><p>Entry 4</p></li>
    <li><p>Entry 5</p></li>
</ol>                                       <!-- End of numbered list   -->

The start="5" will cause the list to start at num­ber 5 (or what­ever num­ber is be­tween the quotes). It looks like this: