see more at www.crookedshit.com

Chris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.

Like thousands of others, my first websites were hosted on GeoCities.  Back then, a cool URL didn’t matter (and was more or less unattainable by non-corporate types anyway), and there wasn’t such a thing as “Googling”.  So, while today it sounds quaint, a network hosting thousands of websites for free, in specialized “districts” based on your interests (or the topic of the site), that you could then explore and browse to see your neighbors was pretty cool.  Much like MySpace, GeoCities gave you the tools to design your website by hand or pick from one of several different templates (and, also like MySpace, this had the result of creating a lot of truly hideous websites).  The best part of GeoCities, for me, was it became a sandbox to learn and play with HTML.  One thing I liked to experiment with was using different fonts I found online on my site.  This was generally as simple as saying <font face=”NameOfFont”> in the source code of the page.  Once I put the right font name in there, that site would have some pretty cool (or, alternately, really gaudy-but-I-thought-it-was-cool-at-the-time) titles or headings.  However, once I went to another computer, my fantastic fonts I spent so long hunting down and embedding would be gone.

The reason for this is because when you declare a font on a webpage, your browser looks through the installed fonts on  your computer for the appropriate font.  If it doesn’t find it, it goes back to the backup font, or, lacking that, some browser- or Operating System-specific default font.  And this is what web designers have been fighting with since the beginning of time (or at least, the Internet).  We’re faced with using the lesser of the evils, choosing a font that looks more or less the same on all computers, or using a fantastic font that only a small handful of people can see.

There are a number of ways to get around this, most of them aren’t fantastic.  You can use images to render your graphical fonts.  This is great from a design standpoint, but not so good from a search engine optimization standpoint — images are meaningless to search engines which only scan a page for text.  There are several methods for converting your font into an embedded Flash object (i.e. sIFR) or rendering it with javascript (Cufon), both of which take time to run the script, and therefore slow down your site.  Then there’s the copyright implications.  Some fonts were designed by hobbyists or designers who do other things primarily and are given away for fee.  Some fonts specifically say “free, but for personal use only.” And some fonts are strictly corporate and cannot be shared without purchasing a license.  Thus we are relegated to using a small handful of fonts that are safe for all Operating Systems, and various means of faking it for other fonts that we think are cool.

@font-face changes that.  Sort of.  What it does is enable designers to embed a font into the stylesheet of the site.  This means that when the page loads, the font downloads to the viewer’s computer the same as any other image on the site.  This kind of font embedding isn’t really all that new — in fact, it’s been around for a while (although not all browsers have supported it).  But increasingly, font designers and foundries are finding methods to make their fonts available for public use — either by going through a membership-based system like TypeKit – or by joining in a growing movement for openness and “free as in beer” fonts.

This is exciting for people like us, who have lamented the lack of choice for typefaces in web design, and have used a variety of methods for faking it in the sites we build (Arcane Palette, itself, uses a “hack” of sorts — we use a WordPress plugin called TTFTitles which converts letters into images and renders the words as transparent pngs).  Now we don’t have to fake it — assuming the font was released with a non-restrictive license, we can use the real thing, decreasing loading times and eliminating the need for javascript or Flash or any other sort of third-party software to render the font correctly.  Or, through a service like TypeKit, designers can choose from a huge collection of premium, professional fonts that they are free to use on their site (according to the terms of their membership plan).  In those cases, the font designers get credit and compensation for the work they put in to creating the font (not a small undertaking), and designers have the freedom to choose the best font face for the site they are building without limitation.

In an upcoming post, I will share the method for using @font-face in web design that we use, as well as some great free resources we’ve found along the way.  The future of the web is exciting, and you can expect more and more complexity and creativity in design in the coming months and years.

Chris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.

The problem

To understand the problem, first you need to have a brief lesson in WordPress (and probably HTML in general) structure.  What we commonly refer to as bullet points when talking about a PowerPoint presentation, or an outline, or a Word document, is known as a “list-item” (<li>) in geekspeak.  List items come in two flavors: unordered lists (bullet points, <ul>), and ordered lists (numbered lists, <ol>).

In web design, lists have far-reaching usefulness, above and beyond just a list of stuff that you’d put in your slideshow or report.  <ul>’s are used for sidebars, drop-down menus, links, pretty much any instance in which there is a series of several of the same kind of thing.  The problem, then, is that a lot of those things (say, sidebars, for instance) aren’t the type of thing that you would want to slap a • in front of.  This is resolved by putting this into the stylesheet:

li {
list-style-type: none;
}

Now you can have a sidebar and not have a bullet in front of every box in the sidebar, and every item within each box.

So what happens if you want bullets or numbered lists?  Because, as a side effect of declaring that all lists have “none” for their “list-style-type” you’re applying that declaration for list items that may want the bullets, like in a post.

The thing that I’ve noticed is that this is especially (and somewhat unnecessarily) prevalent in WordPress themes.  It doesn’t have to be this way.  You could just say something like:

.sidebar li {
list-style-type: none;
}

and not have it affect all the lists known to man (or at least known to your site).  But a lot of WordPress themes are based, to one degree or other, on one theme: the Kubrick theme that is the WordPress default theme.  Among other things, Kubrick has this in the style.css:

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

What Kubrick does is replace the standard bullet points with » which is written in CSS as:

.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020"
}

What I’ve noticed, though, is that a lot of theme designers will take this out, not wanting the » in front of all bulleted lists, and either leave it out completely or replace it with “content: none;”.

How to fix it

Well the easy solution to fix it is to search for “.entry ul” (CTRL + F to find specific phrases is your friend), and see if you can find the “list-style: none” or “list-style-type: none” in there.  If it is, then you can just delete that line, or, if you’re afraid of breaking things you can’t fix later, comment it out like this:

/* list-style: none;*/

If you can’t find it anywhere, or don’t want to modify the original code, you can use this method which will recreate the standard bullets down to three levels (you can smack this at the very bottom of your stylesheet, not touch any other code, and everything will still be hunky dory):

html>body .entry li {
list-style-type: disc; /* this starts with the standard bullet point for all <li>'s */
}
html>body .entry ol li {
list-style-type: decimal; /* for ordered lists, use a number */
}
html>body .entry ol ol li {
list-style-type: upper-roman; /* for the second level of ordered lists, use uppercase roman numerals */
}
html>body .entry ol ol ol li { /* for the third level of ol's, use lowercase roman numerals */
list-style-type: lower-roman;
}
html>body .entry ol ul li {
list-style-type: disc; /* for an unordered list inside an ordered list, use a bullet */
padding-left: 10px; /* and give it a bit more room than the others */
}
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style-type: disc; /* for regular unordered lists, we use bullets */
padding-left: 10px;

}
html>body .entry ul ul li {
list-style-type: circle; /* for the second level, we use an open circle */
}
html>body .entry ul ul ul li {
list-style-type: square; /* for the third level, we use a square */
}

This also makes it so that anything beyond 3 levels (that’s not an ordered list) will default to a regular bullet point.

Isn’t this overkill?

Well, yes, since as I established, if you can find the line that is taking the bullet points out of post entries, it’s a whole lot of code vs. one line.  HOWEVER, if, say, you wanted your default bullets to be something other than a disc, say a square, you can use this code and swap around the options.  W3CSchools.com has an excellent document that talks about all the options you can use for the “list-style-type” property.

Alternately, you can use an image that you define, rather than the default circle, square, roman numeral, decimal, etc.  Using this:

list-style-image: url('path.to.your/image.gif')

instead of this:

list-style-type: square;

There’s also a W3Schools article on that, too.