mindgarden

Since we released the Google font directory last wednesday the response has be nothing short of amazing. Twitter was going crazy and everyone from CNN to Mr. Zeldman himself have reported about it.

What’s especially great to see is that people are already using it on their websites and what’s more, creating plugins and howtos about it. These are just a few:

• CSS-Tricks features a nice interview with Raph Levien from the webfonts team

• Design Shack have a detailed tutorial on their site how to use the API

• Paul Irish has a more detailed look at the API and created an awesome Webfont Loader demo page

• My fellow Google webmaster Melissa Louie has a great page on her website demoing what you can do with webfonts and some CSS3

• There’s already a WordPress plugin

• ...and a Drupal Module as well!

• Also there’s a little github project that let’s you change the fonts on your page using some jQuery

And if you’re not a reading person and would rather sit back and watch a video about the font directory you can do that as well:

Newspaper companies are having a hard time adjusting to a world in which people use the internet. And especially since Rupert Murdoch accused Search Engines of stealing their content and announced that he would make people pay to read News Corp. content there is a lot of discussion about how the future of the news industry will look like.

Yesterday Eric Schmidt, the CEO of Google posted his view on things in an article on Wall Street Journal , envisioning the future to look like this:

It’s the year 2015. The compact device in my hand delivers me the world, one news story at a time. I flip through my favorite papers and magazines, the images as crisp as in print, without a maddening wait for each page to load.

Apparently newspaper companies are indeed working on that future right now. Time Inc. have just released a demo of a tablet-targeted version of Sports Illustrated which gives a good impression of how they want to justify taking money for content in the digital age:

Also, the New York Times have recently released their Times Skimmer which is an alternative Interface for their headlines. What they’ve come up with is really nice I think. It is especially nice to see that they did not implement it in a proprietary format like Flash or Silverlight but instead used open standards like HTML and CSS (with some nice HTML5 and CSS3 highlights sprinkled on top). And they’re using @font-face through Typekit as well.

I did my presentation about font embedding using @font-face yesterday on BarCamp London 7. Here are the slides:

Jonathan Kew and John Daggett are showing off some font embedding porn that might make it into Firefox 3.7 in this screencast on hacks.mozilla.org

read the whole article here

For the new mindgarden layout I’m using the CSS3 module called Multi-column layout in combination with Media Queries.

This means that if you have your browser at a relatively small size you are presented with one regular content column. If you resize you browser window to more than 1008px though this changes and the column is split into two. For window sizes wider than 1440px the content is split into three columns reminding a bit of a newspaper layout.

the media query part

This is how the W3C spec (rather elaborately) describes media queries:

By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Sounds more complicated than it really is. Here’s the CSS that I’m using for my layout:

Firstly I’m setting my default styling for my element.

.entry-content { ... }

Nothing unusual or surprising here. But then I want to specify some styling for larger window sizes.

@media all and (min-width: 70em) { .entry-content {... } }

I’m using “@media all” as I want to apply my rules to all output devices (screen, print, etc.). The min-width part is used so it only effects windows that have a minimum width of 70em.

Then I’m doing the same again for even larger windows.

@media all and (min-width: 100em) { .entry-content { ... }}

multi columns

So far so good. Now we have the means to differentiate between different browser sizes. Let’s use this to do some column-magic. Let’s add some style rules:

.entry-content {
font-size: 1.2em;
line-height: 1.8em;
color: #444;
}

Again, no surprises. Alas, here come the columns:

@media all and (min-width: 70em) {
.entry-content {
-moz-column-count: 2;
-moz-column-gap: 4em;
-webkit-column-count: 2;
-webkit-column-gap: 4em;
}}

First of all, notice the namespaces used for Firefox and Safari. CSS3 is not a finished standard yet and for the time being this is how browser manufacturers like to implement CSS3 features. If Opera supported the multi-column module there would be something like “-o-column” as well. Unfortunately this feature hasn’t made it into Opera 10.

Creating our columns is quite simple. column-count marks the number of columns specified and column-cap the with of the spacing between them. The available space is distributed accordingly. Notice how the copy text flows from one column to the next when you resize this browser window.

I could have uses column-width instead to get a fixed with for my columns. Then the browser would have generated the number columns for me. There’s also column-rule which I haven’t used. With column-rule you can create a border in between you columns.

@media all and (min-width: 100em) {
.entry-content {
-moz-column-count: 3;
-webkit-column-count: 3;
}}

For really large window sizes I’m adding another column here. I don’t have to repeat my rules for the column-gap because if my window is wider than 100em, it is also wider than 70em and those rules get inherited.

Done!

Safari cutting off the images

Unfortunately, Safari isn’t playing along entirely with my cutting-edge-css3-goodness-showcase. Browsers that don’t understand media queries or multi-columns will just degrade gracefully and show the one default column. Safari on the other hand will display the columns just fine as long as you don’t use images or embedded flash content.

If you use images or flash in your columns Safari sometimes has the nasty habit of cutting them in the middle and showing one slice in one column, the other in a second.

There’s already a ticket created for this in the webkit ticketing system So far I couldn’t a workaround for this so let’s hope it will get fixed soon.

No support for column-span

A good way to prevent the Safari bug from happening would be to use column-span that is part of the CSS3 spec. Similar to col-span for tables column-span would make it possible to say for example

h2 { column-span: all; background: silver }

(example from the W3C document)

Unfortunately column-span is not supported in any browser yet.