Hi Internet! Happy New Year! Here’s a list of the best web­logs on the inter­net in 2009:

1. Kottke.org. Run expertly by Jason Kottke — live from New York — the blog links to new inter­est­ing things every hour of the day (except week­ends). Sometimes the links have little accom­pa­ny­ing notes, some­times it’s just straight-up link­age when it’s clear enough.

Chris Coyier over at css-tricks.com had a great example of a css conun­drum: how to centre, both ver­tic­ally and hori­zont­ally, mul­tiple lines of text. He some good code (using table-cell) but his code for IE relied on some (script)expressions which can have the unfor­tu­nate habbit of slow­ing down a page.

[update: to get a bit more back­ground on abso­lute & rel­at­ive pos­i­tion­ing, and how to cen­ter hori­zont­ally, read:  On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.]

The reg­u­lar way of ver­tic­ally cent­ring in css has been doc­u­mented by Dušan Janovský back in 2004. It needs an extra div for its IE solu­tion, but it doesn’t require any expres­sions, only reg­u­lar (fast!) css. Because a div-tag is semantic­ally empty (like the span-tag), it doesn’t add any wrong semantic mean­ing (like a table-tag would).

The .area div isn’t stricly neces­sary, but it was in the ori­ginal prob­lem posed in the css-tricks.com art­icle. I have how­ever edited out the super­flu­ous back­ground declar­a­tion, as it doesn’t have any­thing to do with positioning.

I’ve updated the example to use con­di­tional com­ments instead of hacks. The html (in your page) becomes:

<div class="area" id="two">
<div class="bubble">
<div>
<p>Doing this may not be as easy or obvious as we would hope.</p>
</div>
</div>
</div>


The css (in your stylesheet) becomes:

.area {width:300px; height:300px; position:relative; float:left; }
.bubble {position:absolute; left:93px; top:21px; width:135px; height:84px; display:table; }
.bubble div {display:table-cell; vertical-align:middle; text-align:center;}


The IE spe­cific css (in your html-page) becomes:

<!--[if lt IE 8]>
<style>
.bubble div {position:absolute; top:50%;}
.bubble div p {position:relative; top:-50%}
</style>
<![endif]–>

Have a look at the demo to see what you should end up with. Questions welcome!

This series of art­icles is about the chal­lenges that arise when using @font-face. Font licens­ing is one (that many oth­ers have writ­ten about) and the file-size of included font-files is another, but this art­icle is about browser imple­ment­a­tion eccent­ri­cit­ies. I’ll start off by show­ing the ideal @font-face imple­ment­a­tion in this art­icle, before mov­ing on to show­ing cur­rent browser defi­cien­cies and the imple­ment­a­tion I settled on for includ­ing a full font-family which works in the here and now.

Ideally, design­ers would spe­cify the font-file they wanted to use for reg­u­lar text, and then one for each vari­ation they had at their dis­posal (so, one for Bold, Italic, Bold Italic, Small Caps, Light, Ultra Condensed, etc.) – all using the same font-family name, so that all vari­ations would be picked up auto­mat­ic­ally for body text, and, if @font-face isn’t sup­por­ted by the browser,  all text will still dis­play in the proper font-variant.

To do that, your css would look some­thing like this:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_R_45b.otf) format("opentype");
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_I_45b.otf) format("opentype");
font-style: italic;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_BI_45b.otf) format("opentype");
font-style: italic;
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_SC_45b.otf) format("opentype");
font-variant: small-caps;
}

This would ensure proper fall-back in browsers that don’t sup­port @font-face (or only part of it) and com­pat­ib­il­ity with cur­rent stylesheets, mak­ing @font-face imple­ment­a­tion for design­ers plug-&-play.

The ideal @font-face ren­der­ing (on the left) and fall-back ren­der­ing (on the right) would look a little like this (notice the fi-ligature!):

You’ll have guessed by now that browsers haven’t reached this ideal imple­ment­a­tion yet. The series will con­tinue with CSS 3 Fonts: The here and now.

Information in this series was acquired while work­ing on the design and css for the site of Standards.next and sub­sequent tests after­wards. The Fontface used in this example is Fontin Sans by Exljbris (Jos Buivenga).

Rain.

Hong Kong (via space­ships via talkev)

Good Example: YouWorkForThem:

Nice clear ver­tical design from YouWorkForThem. Good use of fixed pos­i­tion­ing for the pagination.

An art­icle fea­tur­ing an inter­view with, and beau­ti­ful bank­notes of Ootje Oxenaar designer of the most beau­ti­ful bank­notes in the world. (Guilder notes, now replaced by the euro) – via www.creativereview.co.uk

If you’re inter­ested in hear­ing more about the pro­cess that Ootje Oxenaar went through with the Dutch Central Bank to get these amaz­ing designs into pro­duc­tion (i.e. mak­ing it all actu­ally hap­pen), you’ll be inter­ested in the video ‘The Money Maker’.

Just a quick note to com­mem­or­ate a design refresh of this site. Have been look­ing for ways to cre­ate seper­ate atten­tion for main text and the side­bar. Can’t say I haven’t been inspired by Jon Hicks (and oth­ers) who has also just imple­men­ted a differing-colour-main-part-with-border on his site. Kept the main nav in the middle, to add ugli­ness give the design a quirky edge. If I have time to put the search­bar up top the nav may be able to move over to the left.

You’ll notice the logo is a lot smal­ler. What can I say? My cream ran out, plain and simple. I’m much hap­pier with it, now it’s smal­ler. I’ve still to update the logos for the inspir­a­tion square.

The side­bar still suf­fers from mixed header styles head­ers have been updated too. Haven’t man­aged to add any other col­ours to the red & gold col­our scheme yet though!

Make sure you visit my (on site!) Tumblr page. An upcom­ing post will describe how I man­aged to cre­ate internal links to the con­tent there — the “latest inter­est­ing stuff” links in the side­bar are gen­er­ated on the fly.

Of course, if you find any quirks, let me know.