Hi Internet! Happy New Year! Here’s a list of the best weblogs on the internet in 2009:
- Kottke.org. Run expertly by Jason Kottke — live from New York — the blog links to new interesting things every hour of the day (except weekends). Sometimes the links have little accompanying notes, sometimes it’s just straight-up linkage when it’s clear enough.
On: Web
• 5th of January 2010 • No Comments »
Chris Coyier over at css-tricks.com had a great example of a css conundrum: how to centre, both vertically and horizontally, multiple lines of text. He some good code (using table-cell) but his code for IE relied on some (script)expressions which can have the unfortunate habbit of slowing down a page.
[update: to get a bit more background on absolute & relative positioning, and how to center horizontally, read: On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.]
The regular way of vertically centring in css has been documented by Dušan Janovský back in 2004. It needs an extra div for its IE solution, but it doesn’t require any expressions, only regular (fast!) css. Because a div-tag is semantically empty (like the span-tag), it doesn’t add any wrong semantic meaning (like a table-tag would).
The .area div isn’t stricly necessary, but it was in the original problem posed in the css-tricks.com article. I have however edited out the superfluous background declaration, as it doesn’t have anything to do with positioning.
I’ve updated the example to use conditional comments 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 specific 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!
On: CSS
• 14th of July 2009 • 2 Comments »
This series of articles is about the challenges that arise when using @font-face. Font licensing is one (that many others have written about) and the file-size of included font-files is another, but this article is about browser implementation eccentricities. I’ll start off by showing the ideal @font-face implementation in this article, before moving on to showing current browser deficiencies and the implementation I settled on for including a full font-family which works in the here and now.
Ideally, designers would specify the font-file they wanted to use for regular text, and then one for each variation they had at their disposal (so, one for Bold, Italic, Bold Italic, Small Caps, Light, Ultra Condensed, etc.) – all using the same font-family name, so that all variations would be picked up automatically for body text, and, if @font-face isn’t supported by the browser, all text will still display in the proper font-variant.
To do that, your css would look something 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 support @font-face (or only part of it) and compatibility with current stylesheets, making @font-face implementation for designers plug-&-play.
The ideal @font-face rendering (on the left) and fall-back rendering (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 implementation yet. The series will continue with CSS 3 Fonts: The here and now.
Information in this series was acquired while working on the design and css for the site of Standards.next and subsequent tests afterwards. The Fontface used in this example is Fontin Sans by Exljbris (Jos Buivenga).
On: CSS
• 12th of July 2009 • Comments Off

Rain.
Hong Kong (via spaceships via talkev)
On: Tumblr
• 24th of June 2009 • 1 Comment »
Good Example: YouWorkForThem:
Nice clear vertical design from YouWorkForThem. Good use of fixed positioning for the pagination.
On: Tumblr
• 2nd of June 2009 • Comments Off

An article featuring an interview with, and beautiful banknotes of Ootje Oxenaar designer of the most beautiful banknotes in the world. (Guilder notes, now replaced by the euro) – via www.creativereview.co.uk
If you’re interested in hearing more about the process that Ootje Oxenaar went through with the Dutch Central Bank to get these amazing designs into production (i.e. making it all actually happen), you’ll be interested in the video ‘The Money Maker’.
On: Tumblr
• 21st of May 2009 • Comments Off
Just a quick note to commemorate a design refresh of this site. Have been looking for ways to create seperate attention for main text and the sidebar. Can’t say I haven’t been inspired by Jon Hicks (and others) who has also just implemented a differing-colour-main-part-with-border on his site. Kept the main nav in the middle, to add ugliness give the design a quirky edge. If I have time to put the searchbar up top the nav may be able to move over to the left.
You’ll notice the logo is a lot smaller. What can I say? My cream ran out, plain and simple. I’m much happier with it, now it’s smaller. I’ve still to update the logos for the inspiration square.
The sidebar still suffers from mixed header styles headers have been updated too. Haven’t managed to add any other colours to the red & gold colour scheme yet though!
Make sure you visit my (on site!) Tumblr page. An upcoming post will describe how I managed to create internal links to the content there — the “latest interesting stuff” links in the sidebar are generated on the fly.
Of course, if you find any quirks, let me know.
On: Web
• 5th of May 2009 • 3 Comments »