Sec, blogmal! - tidbits - checklist



April '18



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"; }
<!-- </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
URL/Email: [http://... or mailto:you@wherever] (optional)
Title: (optional)
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 1.00 s