Tag: css

Obscure HTML element of the day: dfn

I’ve had an opportunity to do a little static HTML + CSS work recently, and have had a few educational and reeducational moments about the joys of doing basic web development–all the stuff that a good CMS like WordPress hides from you.

Today’s educational moment was a question of footnote treatments. My application had footnotes at the very bottom of its page, with nothing beneath them, and did inpage links to the footnotes. But it was linking to the footnotes from a part of the text that was close to the bottom of the page, so the footnote was already visible. As a result, when a user clicked a link to get to the footnotes, nothing happened–the footnote was already there, and there was no more page to scroll up.

There are ways around this. Daring Fireball has a lot of empty space on its pages below its footnotes, meaning that the page can scroll to place the footnote at the top. But the bug got me thinking again about why I was doing the footnotes and how I could change the user experience. What if I moved the footnote text–which was generally some sort of quick definition–into a mouseover? I knew I could do it with acronym, but the text I was footnoting wasn’t an acronym so it wouldn’t have been semantically correct. Was there a semantic way to mark up the word or phrase being footnoted so that when moused over, a definition would show?

Enter dfn. See what that does? The dfn tag is basically tailor made for what I wanted to do, and is even reasonably well supported. FF3 and IE7 even automatically italicize the term.

I made one more change to my stylesheet to make it really explicit that more information was there for the mouseover, and applied the same rule that I had for abbreviations:

dfn {
   border-bottom: 1px dotted #333;
   cursor: help;
}

With that, the user got a dotted underline on the term, and a help cursor when they moused over.

I would probably make one more change if the application was expected to be printed, which would be to introduce some styles or JavaScript in the print stylesheet that would do an inline expansion of the definition. But for what I needed to do, dfn worked pretty well by itself. Yay obscure HTML elements!

CSS fixin’: toward a vertical grid

It should be theoretically possible with CSS to design a page where the type falls on a vertical grid. In reality, you rarely see this happen because multi-column sites make matching the grid values across the columns difficult, and browsers, particularly IE, have awkward ways of inserting inconsistent space around some block elements.

But the basic theory is simple enough. Decide the base unit of height of the page, and go through your stylesheet, making sure that everything there is a multiple of the base unit of height. Your tools are line-height, padding-top and padding-bottom. For example, if your base measurement is 20 pixels between lines of type, and you want space between your paragraphs, you might define a style like p { line-height: 20px; padding-bottom: 20px;} or even p { line-height: 20px; padding: 10px 0;} (where the latter splits the padding above and below the paragraph).

Getting it to work right can be a real bitch, though. What if you have a heading that you want to set larger than 20 points? The naïve approach (which I just implemented) might be to implement a rule like this: h3 { font-size: 24px; line-height: 28px; padding: 8px 0 4px;} where the 28 pixels of line height are padded with a total of 12 pixels to make up 40, or two lines. But this only works if all your h3s are less than one line in height; a heading spanning two lines will take up 66 pixels, or a little more than three lines, messing up the grid. The recipe for success is to avoid setting multi-line headings too closely–or perhaps to use smaller font-sizes for headings.

Here, as in all things related to web typography, a valuable resource is The Elements of Typographic Style Applied to the Web, the brilliant adaptation of Robert Bringhurst’s essential typography rulebook to CSS+HTML+ (occasionally) JavaScript. In this case, the sections on vertical motion (Choose a basic leading that suits the typeface, text and measure and Add and delete vertical space in measured intervals) are invaluable, and I’m going through this theme’s stylesheet and working on applying the principles now. So if things look odd, don’t worry, it’s not just you.

I should also point to 8 fonts you probably don’t use in CSS, but should as the inspiration to change my sidebar headers to Gill Sans (though I might pick a different sans in a day or two), and 10 Examples of Beautiful CSS Typography and How They Did It for the specific inspiration to use small, capitalized, letterspaced sans serif for the headings. Both are quite well written posts from the blog at 3.7 Designs.

Ongoing minor site maintenance

I’m putting enough energy into this particular theme that I think I might keep it around a while. Today I addressed a problem with my daily link posts, which come from del.icio.us with some embedded markup. The formatting of that markup was causing some bogus line breaks (on Firefox, the list bullet displayed on a line by itself), which I eliminated with some simple CSS rules. I’m probably not done playing with the formatting of the link posts, but I’ve fixed the immediate problem for now.

I’ve also created some linkage to parts of the site that used to be exposed in my main navigation, and added a few more top navigation links. Enjoy…

Excel theme fix list

I’m writing this working list so that I can keep a record of what I did to the Excel theme to get it the way I like it, as well as for anyone else who’s interested in learning how to hack up WordPress themes.

Issues:

  • The amount of vertical space consumed by the header region (seems to be a common trend among the themes I’ve tried so far)
  • Need to tweak styles — tags and recent comments run into each other, headings in the sidebar are too prominent, need some custom style work for the Delicious widget
  • The dark borders around images and the big blocky links make the top of the page feel too heavy
  • Category and single post pages missing blog title

Fixes to date:

Tags: I replaced the function call for tags that was in the theme to specify the following: the_tags('<ul class="pmeta-tags"><li>Tags: ',',</li> <li>','</li></ul>');. This basically made the tag a true unordered list with a new class, pmeta-tags, and inserted a comma and a space after each item in the list except the last one. Then I edited the stylesheet to define ul.pmeta-tags as display:inline. So the tags now displays as a comma separated list. I tried a different, very handy, css-only approach (example) first, but the browser didn’t pick up the specified commas or spaces as cues to break the line, and so the content disappeared off the right hand side of the box.

Recent comments: I used the CSS-only example cited above to style the comments and provide a semicolon as a separator between comments. Alas, IE doesn’t understand this approach so I’ll have to do something else here.

Blog title on other pages: I edited the header.php file to include the blog title in parens after the title of the object (post, category, etc.)