Comments down?
April 15, 2008
I hate finding out comments on ACD are down. Again. From another blogger. In his comments. On another blog. Argh.
This is me debugging them. Move along.
Better Hanging Indents in CSS
November 20, 2007
This is a post I have been meaning to complete for a while: better Hanging Indents in CSS.
A big part of my day job—well, less of it now, but just a short time ago, a big part of my day job—is to take marketing creative and bust it down into HTML (4.01), get it into our source code control (CVS), and integrate it with our backend (JSP/Struts).
The latter two are practiced, scripted processes, but the HTML part is still a hand-crafted element and something that I enjoy a lot. The creative will always contain legal footnotes in “mice type” and referenced with various asterisks, daggers, and markers. Many times, depending on the mood of the graphic artist, these markers will be set in a “hanging indent.”
What exactly is a hanging indent, for the uninitiated?
It is a typographic construct that serves to eliminate any visual interruption of the text alignment. Here is a visual aid:
The ubiquitous method found doing a Google search will be: use a negative text-indent, e.g., text-indent: -.7em;. This method works, but has some visual problems when the markers are doubled-up, or are not the same em width, etc. Another visual aid:
This alignment problem using text-indent has always put me off, so let me get to the point: there is a better way to do a hanging indent that works across most modern browsers (“The A-Grade”) without weird ordered, or unordered, lists, background markers, and “class explosion.”
The Code
#ft p {
position: relative;
}
#ft a {
position: absolute;
top: 0;
left: -2em;
display: block;
width: 1.5em;
text-align: right;
}
The How and Why
Disclaimer: The vast assumption here is that the CSS constructs being used apply to your code. If not, apply as apropos to your code.
The #ft element contains the footnotes (“legalese”) in child p elements. Setting the position:relative of the paragraph prepares child elements for absolute positioning, that is relative (hence the term), to the parent.
The next block does the work. Here, the use of an a element is semantic and intended to allow the developer a way to link the body reference to the footnote. You can use any inline element desired though. Using position:absolute removes the element from the document flow and positions relative to the p element. Setting the left property to a negative em value pulls it out of the p box.
The display:block prepares the element width and text alignment properties. Setting the width is important. The width of the positioned element allows for the right edge alignment of the markers.
Nothing is better than examples to study. The first, using text-indent, and the second, using this new (?), better (?), and more visually appealing (?) method.
Decide for yourself. Comments welcome! 
Flock 0.9x test
August 04, 2007
I follow the development of Flock from time-to-time. Updating as major releases become available. Playing with the interface, toying around with posting here, etc.
Some notes on preparing and writing this post:
- Adding a link means spec'ing the full URL (or is it URI?), e.g, http://www.flock.com. "flock.com" or "www.flock.com" don't work.
- Adding a blog, at least a MetaWeblog API capable blog service, means each category shows up as a separate blog. Seems I read that somewhere, might be a limitation of MetaWeblog API, or just a misunderstanding by Flock. Not sure, but it's odd interface to work with when mentally I don't organize my blog this way.
- The HTML could be better... no <p> tags, at least in the source view. Editor note: After posting it seems that not only are there no <p> elements, there are no break tags either. The first view of this post was one CLOB (Character Large Object for you minor geeks).
The real test is what this looks like once I hit post... Tada.
Testing MarsEdit
June 17, 2007
Looking for a good blogging tool.
I like the admin interface for blojsom, but I would like less web-based tool.
This is a test post from MarsEdit.
YUI madness
March 12, 2007
I love the YUI libraries.
My coworker and I have been introducing it at work for one thing and another. And I have been using it on projects in the moonlight, as they might say.
So when I stumbled on a bug in the new DataTable component (in beta), I was glad to submit a defect report and patch. The problem:
The YAHOO.widget.Column.formatDate function used date.getMonth() unmodified. Meaning that passed a date formatted string, i.e., "March 11, 2007", date.getMonth() returns "2" for "March". The API documentation for ECMAScript, or JavaScript, states that getMonth will return a number between 0 (January) and 11 (December).
Date strings passed to the DataTable Column would result in formatted dates that were nonsensical ("00/01/2000") or a month off.
The bug, and patch files, are available at the YUI SourceForge site.
Back, and still running.
February 17, 2007
No hiccups, upgrade went flawlessly.
I primarily wanted to get the old editor back in the admin console. TinyMCE just didn't work out for me the way I hoped. Held a lot of promise, but I need to be able to escape from the editor at times, especially when massaging post meta-data.
Upgrade under way...
February 17, 2007
I'm upgrading the blog engine, blojsom, to 2.32 momentarily. Let's see how it goes shall we?
Awake. Again.
March 08, 2006
Many caffeinated days have passed quietly on ACD.
The main thing keeping me away was an upgrade to the photo album plugin (“SimplePhotoAlbumPlugin” ) I was using.
It seems a new version had several bugs which should have been simple to hash out, yet I spent more time ferreting those bugs out than I care to admit--all the while it was broken in "production!" In the time spent working on the bugs, I refactored the whole plugin (not sure for the better, but the branching is cleaner, if not only clearer), and the plugin now supports photo albums spec’d as a comma-separated list in the meta-data (meta-photo-album-list). This new feature is something that would allow a user to load a bunch of photos to an album (defined as a directory on the host filesystem) and incrementally reveal them by updating the meta-data.
The plugin is still not public, but will be soon. It will be made available on the blojsom wiki. With some appropriate documentation of course.
Tilt-shifting meme now displays the picture as I originally intended.
Subversion kool-aid tastes good
August 02, 2006
Don't tell my friends, but I've tasted the Subversion kool-aid, and it tastes good.I'm migrating some of my source to Subversion over the next couple of days to really get a feel for using this "CVS++" VCS.
Comments from the peanut gallery welcome.
;)
New toy
February 02, 2006
The SimplePhotoAlbumPlugin is now in use.
It's configuration is a bit rough on a new install. I'll see if I can clean that up a bit.
It uses meta-data to peek at the filesystem and get image information to load as a thumbnail and in the permalinks of the blog.
Experiment: plugin chains and scode
February 02, 2006
The concept of plugin chains for blojsom will not be covered here, but instead here. If you're not using blojsom, then all of this is moot.
Move along now. Thank you.
- served by fedora
- powered by blojsom
- made on a mac
- theme by joe.caffeinated
- built in bbedit