Simian Design, by Tony Stephens

Pixels to Ems Conversion

A really great chart to determine the Pixels to Ems Conversion Table for CSS. Thank you Jon Tan.  A quick over-view/sampling below.

What this chart allows you to do is determine the em width of something. Say you have something that is 770px wide, and using a font-size of 1em. You know then that the em-width of the layout is: 1 ÷ 16 × 770 = 48.125em.

Vertical Text

I’m working on a project that requires some vertical text.  But I was unsure as to the “correct” way for the vertical text to be set, 90 degrees clockwise or counter-clockwise.  Luckily, I didn’t have to do a lot of research, as it’s been done for me. Robust Vertical Text Layout outlines the basic rules for vertical text for me.

In a purely physical layout scheme, each of these text layout properties would be given as an absolute: The inline progression of this run of English is top to bottom, its glyph orientation is 90 degrees clockwise, its block progression is from right to left.

But absolutes don’t hold much water.

For scripts in a non-native orientation, the natural inline text flow depends on the direction of line stacking: the text is most comfortably laid out as if the whole text block were merely rotated from the horizontal. For example, English text in vertical lines that stack from left to right will face with the glyphs’ tops towards the left and the text direction running from bottom to top. The same text, by the same logic, would in a right-to-left line stacking context face right and flow within each line from top to bottom.

Basically it boils down to this from what I can determine: Have the bottom of the text point in the direction of the block progression.

Reset CSS

Eric Meyers Reset CSS has found a permanent home now. Reset CSS is a useful tool to help you default a lot of generic styles built into browsers.

” The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.”

Also be sure to check out his diagnositic css file as well.

“With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. If you want to see this in action, there are two demos to check out:”

Incredibly useful tools, check them out.

Spruce up your search box

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Two web-related links today. Forms and jQuery.

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Using HTML Lists

Using HTML Lists Properly is a decent refresher on what semantic HTML is, and how to go about using it.  He focuses on three things; Ordered Lists, Unordered Lists and Definition Lists.
He talks about how to combine them, use them and style them.  Nothing earth-shattering here, nor anything new if you’ve been dealing with HTML for a while.  But it is always decent to remind yourself of the base items, and if you’re new to codind HTML, this is a good starting point.

A CSS Sticky Footer

A sticky footer, that is, a footer that sticks to the bottom of the browser window, has been traditionally a pain.   Well, this guy has come up with an elegant and working CSS-based footer that has been tested in IE 5 and up, Firefox, Safari and Opera.

Setting Type on the Web to a Baseline Grid

From A List Apart: Setting Type on the Web to a Baseline Grid.

“We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.”

A nice writeup to an odd problem that does plague sites.

Peter’s Blog - The window.onload problem (still)

Peter writes about the still present window.onload problem. It’s a most excellent article, and you should go read it.

The base problem is that if you truly do seperate presentation, structure and interaction (HTML, CSS or Javascript), then you can be presented with a situation where a large image is trying to load, preventing from the window.onload from firing, which is preventing the Javascript from attaching the functions needed. If that Javascript doesn’t fire, the user can then easily break the page.

Luckily Peter outlines several solutions, all very easily explained.

PNG support

The easiest way to PNG support in IE6 at blog.bjorkoy.com. It couldn’t be easier. This apparently was created by Angus Turnbull.

img { behavior: url(iepngfix.htc); }

You put a .htc file into your CSS directory, and then put that declaration into your CSS file. Pretty straightforward, and you then have PNG Alpha Transparency for IE6. Can’t be more straightforward.