Sec, blogmal! - tidbits - checklist

Categories:

Everything

November '17

MoDiMiDoFrSaSo
303112345
6789101112
13141516171819
20212223242526
27282930123

Archive:

Mon, 06 Sep 2010

How to make a checklist in HTML

In my ongoing quest to get rid of unnecessary use of WinWord, I moved a two-page checklist into our internal wiki. Unfortunately I came across two problems while doing that:

  1. HTML <li>s don't support big empty circles. They default to black bullets, and the CSS {"list-style-type: disc;} only creates tiny circles.

    Unicode to the rescue: \x25EF, also known as \N{LARGE CIRCLE} or makes a fine replacement. Two lines of CSS to fix your list:

    ul { list-style-type:none; }
    ul li:before { content: "\25EF"; }
    

  2. No page breaks. The list was on two pages for a reason and I needed to keep it that way. That was easily fixed by inserting

    <br class="break" /> 
    

    and making the break with CSS:

    br.break { page-break-before: always; }
    

    My first attempt was to use a <hr> instead – but strangely enough it made Firefox print another empty page at the beginning when used inside our wiki.

Putting it all together for TWiki:

<!-- <pre> -->
<style type="text/css" media="all">
br.pagebreak { page-break-before: always; }
.patternTopic > ul { list-style-type:none; }
.patternTopic > ul > li:before { content: "\25EF"; }
</style>
<!-- </pre> -->

The .patternTopic makes it only apply within the article, and the > makes it only apply on the first level after that.

– Sec


posted at: 19:02 | Category: /tidbits | permanent link to this entry | 1 comment (trackback)
 

Your Comment
 
Name:
URL/Email: [http://... or mailto:you@wherever] (optional)
Title: (optional)
Comment:
Save my Name and URL/Email for next time
(Note that comments will be rejected unless you enter 42 in the following box: )

powered by blosxom
in 0.00 s