12Lists and notes

Num­bered lists and un­num­bered lists are very sim­i­lar in the way they op­er­ate, the un­num­bered list is slightly eas­ier to grasp and that is where I’m going to start.

Un­num­bered lists con­sist of a se­ries of list en­tries <li>...</li> con­tained in an un­ordered list el­e­ment <ul>...</ul>. There is no limit to the num­ber of list el­e­ments that can be in an un­ordered list.

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

This isn’t quite what I want, for a start the bul­let point is ac­tu­ally po­si­tioned to the left of the cen­tral col­umn area (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: the bul­let point is now in­dented into the cen­tral col­umn area, the spac­ing be­tween the bul­let point and the list text is larger, the bul­let point is big­ger and fi­nally, the line spac­ing has been in­creased.

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

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

It’s easy, de­clare an un­ordered (un­num­bered) el­e­ment <ul> and put each entry in a <li> el­e­ment.

• Unordered, unnumbered which is it? Well officially it’s unordered, I use unnumbered because it doesn’t have numbers and the numbered list does. I use unnumbered and unordered interchangeably — unordered is the official and correct name.

The proper HTML for the web tem­plate ver­sion (Fig­ure 12.2) is pretty sim­i­lar:

<ul class="list-no-num">                    <!-- Start of unnumbered 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>
</ul>                                       <!-- End of unnumbered list   -->

The main dif­fer­ence is that the <ul> el­e­ment has been given a class: list-no-num; let’s have a look at that (in fact all the as­so­ci­ated CSS):

.list-no-num {                            /* TEXT STYLE - Unnumbered list */
    font-family: "conc-t3-r";
    list-style: none;
    margin-left: 5rem;
}
.list-no-num li:before {                  /* prefix the list with a large dot and */
    content: "\25cf"; float: left;        /* force the margin to the correct position */
    margin-left: -2rem;
}
.list-no-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}

The first bit of this is fairly easy:

The basic font for the un­ordered list is set to Con­course (I know it is show­ing as Eq­uity, that’s be­cause I change the style fur­ther down):

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

I also set the list-style to none:

    list-style: none;

The list style de­ter­mines what bul­let point is used, by set­ting it to none it doesn’t dis­play any bul­let point at all (I know the list has bul­let points, all I’ve done here is turn all the de­fault bul­let points off).

There are lots of dif­fer­ent op­tions for list-style (cir­cle, disk, square, &c.), I don’t want any of them, I want my own and so I’ve turned all the de­fault ones off.

Next is the mar­gin; this de­ter­mines where the text in the <li> el­e­ment starts (not the po­si­tion of the bul­let point).

All my text starts 5 rem in so the mar­gin is set to 5 rem:

    margin-left: 5rem;

The next bit of the CSS is an­other of those de­scen­dant se­lec­tors (in com­bi­na­tion with a be­fore pseudo-el­e­ment):

.list-no-num li:before {
    content: "\25cf"; float: left;
    margin-left: -2rem;
}

This is the bit that puts the bul­let point in for each <li> el­e­ment in the un­ordered list.

The un­ordered list el­e­ment has class list-no-num this means that all the <li> el­e­ments in the list are de­scen­dants of that class; it is there­fore pos­si­ble to use the de­scen­dant se­lec­tor to se­lect all these <li> el­e­ments within the list-no-num class and do some­thing to them. The line

.list-no-num li:before {

se­lects all the <li> el­e­ments in an un­ordered list within the list-no-num class.

The :be­fore pseudo el­e­ment means that the CSS that fol­lows will be in­serted be­fore any text that is be­tween the <li>...</li> tags in the HTML.

The next line puts in the bul­let point:

    content: "\25cf"; float: left;

This in­serts the Uni­code char­ac­ter 25cf (hexa­dec­i­mal) be­fore the text within the <li> el­e­ment. Uni­code char­ac­ter 25cf is a big black dot (●).

• In § 6.11 I explained that Unicode characters could be entered directly in HTML by prefixing the decimal character code with &# and following it with a semicolon(;):

&#65;

The above en­ters an A char­ac­ter. Hexa­dec­i­mal char­ac­ter codes can be en­tered by pre­fix­ing them with &#x:

&#x41;

CSS sup­ports a sim­i­lar fea­ture; to enter a Uni­code char­ac­ter di­rectly with its num­ber, sim­ply pre­cede the hexa­dec­i­mal (it must be hexa­dec­i­mal) code with a “\” char­ac­ter and enter the hexa­dec­i­mal code as four dig­its (use lead­ing zeros if nec­es­sary). The fol­low­ing would give the A char­ac­ter:

\0041

Section 6.11 gives a full ex­pla­na­tion of how to use Uni­code char­ac­ters in HTML, CSS and JavaScript.

It works by in­sert­ing con­tent be­fore the text in the <li> el­e­ment, in this case it in­serts every­thing in­side the quotes that fol­low the con­tent prop­erty; specif­i­cally Uni­code char­ac­ter 25cf (●).

The float: left en­sures that there is no line break after the bul­let point (the con­tent prop­erty can be a bit hit and miss in this re­gard, the float: left makes sure it be­haves prop­erly in all browsers).

The final line:

    margin-left: -2rem;

En­sures that the bul­let point is moved 2 rem to the left of where the text starts (the mar­gin is rel­a­tive to the start of the text, hence the -2rem in the in­struc­tion). The final mar­gins look like this:

There is one final thing with the un­ordered list; it’s the last bit of the CSS:

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

This is an­other de­scen­dant se­lec­tor; it says that any <p> el­e­ment that is con­tained within <li> el­e­ments (that are also con­tained within the class list-no-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 from Con­course (spec­i­fied in list-no-num) to Eq­uity, some left padding is ap­plied and a bot­tom bor­der to 0.85rem 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 un­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.2, i.e. in the Eq­uity (serif) font. If I missed out the <p>, the re­sult would be in Con­course and would have closer spac­ing, like this:

The rea­son for this is it al­lows the un­num­bered list to be used in ta­bles (that gen­er­ally use the san serif Con­course font.) The gen­eral rule is use <p> in the <li> el­e­ment if the list is in the body text and omit the <p> if the list is in a table.