Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

#Wardly-TO Wardly-TO is a symbol font that makes is easy to create a map of the wards in the city of Toronto using only HTML and CSS (and optionally javascript). Each ward can be styled independently with CSS for making simple visualizations. And since it's a font, it scales bigger and smaller while staying sharp as a tack.

Note: Wardly-TO is a fork of the Stately project.

##Files map.svg - SVG map used to create the font assets/font - Folder containing the web-font files assets/css - Folder containing compiled CSS files assets/js - Folder containing compiled JS files wardly-to.html - Basic Demo wardlyto.svg - SVG font file wardlyto.ttf - TrueType font file

##What is Wardly-TO? Each ward is a glyph within the font. Each ward is positioned and sized relative to the the rest of the wards, so that when each character is stacked on top of one another, it creates a full map. The pertinent characters are uppercase A-R and lowercase a-z.

##Basic Use Case You can use wardly-to however you like, but some base CSS, HTML, and JS examples are included. Grab the wardly-to assets folder and add it to your project. Then add the wardly.css (and optionally wardly.js which requires jquery) to the head of your document.

<link rel="stylesheet" href="assets/css/wardly.css">
<script src=""></script>
<script src="assets/js/wardly.js"></script>

If you would like to avoid using javascript, add this markup to the page:

<ul class="wardly" id="plain"> 
    <li class="foo">a</li>
    <li class="foo">c</li>
    <li class="foo">d</li>

Set the size and base map color in your CSS:

.wardly {
    width: 300px;     /* width and font size must match */
    font-size: 300px; /*width and font size must match */
    color: #f0f0f0;

Style Individual State:

.wardly .foo { 
   color: #FF0000;

##Live Example

Wardly-TO Microsite


Check out the Stately project by Ben Markowitz. Wardly-TO is basically just a skin on the brilliant idea Ben had. He has pointers on how to roll your own as well if you want to give it a go.


Created by Ben Markowitz at Intridea.

Modified by Christian Muise at Floating Tree.


MIT License. See LICENSE for details.


Copyright (c) 2013 Floating Tree.

Copyright (c) 2013 Intridea, Inc.


Project to embed a custom map of the wards in Toronto.







No releases published


No packages published