Here’s the results of how current browsers render the test case, compared to the reference rendering.

Can the browser pick up the style natively?

Can the browser emulate from the regular version?

The most up to date support table, with pretty colours, can always be found on its own page alongside the test case. It also has more notes on ligatures and small-caps support.

Why is falling back to regular style so bad?

It makes sentences full of expression look like sentences full of expression. Thus removing part of the typographical elements of a text, whereas @font-face is meant to embellish it typographically.

So what does this mean we should do?

Browser developers:

• Please work on emulating bold, italic, bold-italic, etc. when they’re not present. Browsers already do this for system-fonts, which means web developers expect this to work. Falling back to the regular style (i.e. font-style:normal) is horrible as you lose all styling.
• Also give some thought to picking up “font-variant:small-caps;” in your @font-face code. It’s the only way to ensure proper fall-back. Emulating, like Firefox & Opera do, is a step forward, but it’d be a pity to stop there.
• If HTML 5 has taught us anything, it’s that browsers should be more bulletproof, not web designer’s code. Also: asking web developers to specify as little as possible is better.

Web designers:

• Using @font-face when you only have the regular version of a font at your disposal is not a good idea. Especially for body text.
• If you use small-caps text, chances are visitors will see the fallback system-font. So make sure you specify a system-font that matches your @font-face font nicely when rendered as small-caps. (The test-case uses an especially jarring one on purpose.)
• Use a (less lazy, less practical) more bulletproof way of specifying your @font-face fonts is recommended (alas) for now.

CSS3 @font-face browser support table originally appeared on Candy by James on 20 February 2010.

1. 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.

The end. Stay tuned for a new list next year!

Best blogs of 2009 originally appeared on Candy by James on 5 January 2010.

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.

Refreshed Candy originally appeared on Candy by James on 5 May 2009.

Full page zoom is important because it means no more mucking about with elastic layouts (em-based) or liquid layouts (%-based). That just leaves fixed layouts (based on pixels), which is good because images, videos and other media are in pixels too!

Note: I’m not saying it’s good to use pixels for font-size: properties! (Just all the other properties, like height, width, margin, padding, etc.)

[1] Update: Safari 4 (beta) has implemented full page zoom too! All major and minor browsers have implemented full page zoom. Until widespread updating of Safari 3 with 4 and (more importantly) IE 6 with 7 or 8, approx. a quarter of visitors will only have text-based zoom available to them. IE 6 users are likely not to know anything about zoom-capabilities however.

Full page zoom (update) originally appeared on Candy by James on 12 January 2009.

One of the most useful things on a 404 page is a direct link to the page visitors were trying to get to. Now we can’t read minds, but we do know the URI (explained in the third paragraph of the previous article) and that’s good enough. The following code is adapted from this archGFX article. The method used to transform the URI into a search query is very simple. If you would like a more advanced please refer to “A better 404 — Redux” at Urban Mainframe, where Jonathan Hollin expounds on his (downloadable!) 404 page code.

There are two parts to this “related posts” code. The first part makes it possible to get from “/wrong/link.html” (the URI) to “wrong link” (the search query).

Here it is:

<?php

$search_term = substr($_SERVER[’REQUEST_URI’],1);

$search_term = urldecode(stripslashes($search_term));

$find = array (“’.html’”, “‘[-/_]’”) ;

$replace = ” ” ;

$search_term = trim(preg_replace ( $find , $replace , $search_term ));

$search_term_q = preg_replace(‘/ /’, ‘%20′, $search_term);

?>

That’s all there is to it. If you, however, don’t want to make “/wrong/link.html” into “wrong link”, but rather just “link” (because the first part of the URI is likely to be useless), use the following on the fourth line:

$find = array ("'.html'", "'.+/'", "'[-/_]'") ;

The second part consists of telling WordPress to use the search terms and outputting a list of articles based on the results.

In this case the loop will output a linked title, a line-break and then the date of the article. You can edit out the line-break and the date if you want. Also, you can change OL to UL if you want an unordered list outputted.

<?php

query_posts(‘s=’. $search_term_q );

if ( have_posts() ) :

?>

<h1>Possibly related content</h1>

<ol>

<?php while ( have_posts() ) : the_post(); ?>

<li><a href=”<?php the_permalink() ?>”><?php the_title() ?></a>

<br>

<?php unset($previousday); printf(__(‘%1$s’, ‘sandbox’), the_date(”, ”, ”, false), get_the_time()) ?>

</li>

<?php  endwhile; ?>

</ol>

<?php else : endif; ?>

That’s all there is to it! Once you’ve added this code your 404 error page should look a little something like this.

To conclude, add the following to your 404.php, wherever you think it fits best, to add :

<?php /* Transforming the URI into search terms */

$search_term = substr($_SERVER[’REQUEST_URI’],1);

$search_term = urldecode(stripslashes($search_term));

$find = array (“’.html’”, “‘[-/_]’”) ;

/* If you only want the last term of the URI, use the following instead:

$find = array (“’.html’”, “‘.+/’”, “‘[-/_]’”) ;  */

$replace = ” ” ;

$search_term = trim(preg_replace ( $find , $replace , $search_term ));

$search_term_q = preg_replace(‘/ /’, ‘%20′, $search_term);

?>

<?php /* Use the search terms to run a query */

query_posts(‘s=’. $search_term_q );

/* check to see if there are posts */

if ( have_posts() ) :

?>

<h1>Possibly related content</h1>

<ol>

<?php /* start the loop */  while ( have_posts() ) : the_post(); ?>

<li><a href=”<?php the_permalink() ?>”><?php the_title() ?></a>

<br>

<?php unset($previousday); printf(__(‘%1$s’, ‘sandbox’), the_date(”, ”, ”, false), get_the_time()) ?>

</li>

<?php /* end the loop */  endwhile; ?>

</ol>

<?php else : endif; ?>

If you’ve any questions, don’t hesitate to ask!

Improve your WordPress: related posts for 404’s originally appeared on Candy by James on 8 January 2009.

Four-Oh-Fours are hot again! Just recently came a across the article A Better 404. I remember reading the A List Apart article “A Perfect 404″ ages ago, but had never done anything about it. Time to improve.

First some quick vocab: the part after your .com (or .co.uk) is called the URI, so if www.google.com/analytics/provision/ is the address,  /analytics/provision/ would be the URI. The URI is the part that’s wrong when someone’s followed an outdated link. This means we can use the URI to create a more helpful 404 page. To create a 404 page for your WordPress theme just create a 404.php file in the directory of your theme (/wp-content/themes/default/ is the default).

The default wordpress 404 page code looks something like this:

<?php get_header(); ?>
<h1>Nothing Found (Error 404)</h1>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Which I suppose is functional enough, but doesn’t actually help the user much, depending on the content of your sidebar. The first thing to do is to tell programmes visiting  (browsers and more importantly search engine spiders!) that the page is a 404 error page.

You do that by adding the following to the top of your 404.php:

<?php ob_start(); ?>

<?php header(“HTTP/1.1 404 Not Found”); ?>

This “HTTP/1.1 404 Not Found” message tells spiders exactly what they need to know.

Next up, adding useful things for human users! There are three main things you can do to be helpful. Telling the user exactly what’s wrong, giving them a list of related articles and listing your recent articles. Related articles requires some URI magic which I haven’t figured out yet, but Jonathan Hollin has, so stay tuned for an article from him which I’ll link to when the time comes.

Telling the user exactly what’s wrong goes a little something like this:

<?php // When the visitor is linked through by another site or page
if ($_SERVER['HTTP_REFERER']) { ?>
<p>The link at <em><a href="<?php echo $_SERVER['HTTP_REFERER'];?>">
<?php echo chunk_split($_SERVER['HTTP_REFERER'], 25);?>
</a></em> is incorrect or <em><?php echo $_SERVER['REQUEST_URI'];?></em> has been moved, renamed or deleted.</p>
<?php } // When the visitor isn't linked through (most likely a bookmark)
else {
echo "<p><em>" . $_SERVER['REQUEST_URI'] . "</em>";
?>
has been moved, renamed or deleted.</p>
<?php } ?>

As the comments in the code make clear, there are two situations to tailor for: when people come in from another site and when they don’t. A nice addition is “echo chunk_split($_SERVER[’HTTP_REFERER’], 25)” which echo’s (outputs) the HTTP_REFERER (the site where the user was linked from) in little blocks of 25 characters. This way long URLs still wrap nicely. I chose 25 characters as that’ll put “http://james.gameover.com” all on one line.

That just leaves a list of some recent posts to add:

<h1>Recent Posts</h1>
<ol>
<?php $postslist = get_posts('numberposts=6');
foreach ($postslist as $post) :
setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>

This code simply outputs a linked title of the 6 most recent journal entries in a numbered list. Simple!

So, to recap, you’ll end up with something like this as your final code in the 404.php file:

<?php ob_start(); ?>
<?php header("HTTP/1.1 404 Not Found"); ?>
<?php get_header(); ?>
<h1>Nothing Found (Error 404)</h1>
<? if ($_SERVER['HTTP_REFERER']) { ?>
<p>The link at <em><a href="<?php echo $_SERVER['HTTP_REFERER'];?>">
<?php echo chunk_split($_SERVER['HTTP_REFERER'], 25);?>
</a></em> is incorrect or <em><?php echo $_SERVER['REQUEST_URI'];?></em> has been moved, renamed or deleted.</p>
<?php } else {
echo "<p><em>" . $_SERVER['REQUEST_URI'];
?>
</em> has been moved, renamed or deleted.</p>
<?php } ?>
<p>Don't worry, just try again!</p>
<h1>Recent Posts</h1>
<ol>
<?php $postslist = get_posts('numberposts=6');
foreach ($postslist as $post) :
setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

You can visit the final 404 error page here. Many thanks to Jonathan M. Hollin for much of the code and ideas, and to the WordPress Codex and php.net for being such handy recourses.

Update: Added “Possibly related content” to my 404 pages, followup post will come later.

Improve your WordPress: the 404 error page originally appeared on Candy by James on 1 January 2009.

A lot of open source projects use Bugzilla (of Mozilla origin) to track bugs and make discussion of those bugs possible. Shouldn’t Bugzilla make it possible (and easy!) to include images and video in bug reports?

If Buzzfeed can do it…

Bugzilla Thoughts originally appeared on Candy by James on 7 September 2008.

You see, when a picture loves another picture very much, they get together and do something very special. Son, I’m going to use a word I’m sure you’ve heard before — they get Photoshopped together. And this is how a disaster comes into the world; it’s a beautiful thing.

From Photoshop Disasters, a site which I enjoy, especially since I dabble a bit in Photoshop too.

Photoshop disasters originally appeared on Candy by James on 19 May 2008.

Now with full-page zoom being implemented (as default!) in Internet Explorer 7, Firefox 3 and Opera 9*, it’s a different story. Full-page zooming means your easy px-based layout will be fully flexible. Even more flexible than most em-based layouts in fact, as images will scale along too.

So I’m asking myself, why bother with hard-to-keep-from-breaking em-based layouts?

[update] I don’t think liquid layouts are relevant anymore either.

[update 2] * And now Safari too! That’s all of the major browsers.

PS. This still leaves percentage-based layouts of course, but they maximise screen real estate. Which is very different from maximising readability (line-lengths and all that jazz). As far as I can see, %-based layouts are good for some web-apps (like gmail) but aren’t optimal for other uses.

Px vs Em: Is it still relevant? originally appeared on Candy by James on 31 March 2008.

* Why is Wi-Fi free at cheap hotels, but $14 a night at expensive ones?

That’s an easy one. At the core it’s price discrimination, or the art of making people pay the maximum of what people are willing to pay. The way it works is that rich people at expensive hotels have more than enough cash (and value their time online highly) to buy WiFi for their room. At cheap hotels you have crummy cheap people who aren’t willing to pay one penny extra for WiFi, but for whom it’s still a feature which’ll make them choose the WiFi-hotel over the Non-WiFi-hotel.

* What happens to software programs when their publishers go out of business?

Some customers cling on to them but in the end everyone switches over to something newer and worse.

* Would the record companies sell more music online if it weren’t copy-protected?

They’d sell more because it’d ‘work everywhere’. Which is to say that if they’d sell mp3’s then yes, and if they sold (hypothetical) mp7’s (which would only play on one line of hypothetical devices), then it’d lessen that effect considerably, until the other device manufacturers caught up.

* Do cellphones cause brain cancer?

In scientific studies only the people who believed it would be bad for them had (anywhere near significant) negative effects. Pretty much a negative placebo effect.

* What’s the real reason you have to turn off your laptop for take-off?

It ads confusion in an emergency and stewardesses are sadistic little creatures who want you to experience the displeasure of taking off in all its glory. Muhahahahaha.

* Why can’t a digital S.L.R. camera record video?

Because they’d have to reconjig’re it to do so which would cost time and money. Given that the people who are in the market for a digital S.L.R. camera wouldn’t be happy with a stuck-on-video mode if they really wanted video and that the rest of the people wouldn’t want video anyway, makes that they’d have a hard time earning their investment back.

* Wi-Fi on airplanes. What’s taking so long?

Airlines didn’t believe that Wi-Fi would be a major enough selling point to give them an edge in attracting customers up till now. I don’t think they were wrong, and I also imagine that 3G mobile tech (woo! internet!) on a plane would make many more people happier in the coming years.

* Who are the morons who respond to junk-mail offers, thereby keeping spammers in business?

Two groups: The nice naive people with time on their hands and the morons who watch and order from Tell-Sell.

* I’m told that they could make a shirt-pocket digital camera that takes pictures like an S.L.R., but it would cost a lot. So why don’t they make one for people who can afford it?

Because the people who can afford it can be flogged a digital S.L.R. AND a shirt-pocket digital camera at the moment.

* How come there are still no viruses for Mac OS X? If it has 6 percent of the market, shouldn’t it have 6 percent of the viruses?

Aside from the fact that we don’t know if 6 % is big enough for it to be profitable, it’s the same reason Apache has 50.48% of the web-server market (down from 70% a year or two ago) and still doesn’t get the most viruses or hackings. (Hint: It’s a Microsoft product that does!)

* Do shareware programmers pay taxes on all those $20 contributions?

Most would as either they’d be honest or it’d represent a sizeable chunk of income.

* How are we going to preserve all of our digital photos and videos for future generations?

On YouTube.

* Why are there no federal rebates or tax credits for solar power?

Because at this point there’s no tech on the market that’s efficient enough and/or you don’t live in Germany.

* Why do you have to take tape camcorders out of your carry-on at airport security, but not the tapeless kind? Couldn’t you hide a bomb equally well in either one? (Actually, I have about 500 more logic questions about the rules at airport security, but I have a feeling they’ll remain answerless for a very long time.)

Because That’s How the Rules Are.

* Laptops, cameras and cellphones have improved by a thousand percent in the last ten years. Why not their batteries?

There has been groundbreaking work with alternative methods (i.e. other than Lithium-Ion) like sugar and fuel-cells. From the mouth of an HP researcher: (paraphrased) “Lithium-Ion tech is at its end, we don’t believe it can be improved much more.”

* SmartDisplay, Spot Watch, U.M.P.C., Zune… when will Microsoft realize that it’s not a hardware company?

Not until it finds another high-margin wonder to complement (and replace) windows/office cash-flows.

* Why don’t public sinks have foot pedals?

They do in (our) trains. It’s most likely more expensive to install.

* Why don’t all hotels have check-in kiosks like airlines do?

In the high-end, there’s no way the level of expected service could be achieved and at the low-end it’s handy to have human eyes, ears and noses to sniff out potential trouble-makers.

* Five billion dollars a year spent on ringtones? What the?

I know. It’s like people want to show the world they have an individual taste. Who knew?

* How come cellphone signal-strength bars are so often wrong?

If you’re in a part of the world where it Just Works Everywhere, you stop looking at them.

* Do P.R. people really expect anyone to believe that the standard, stilted, second-paragraph C.E.O. quote was really uttered by a human being?

Do P.R. people know from their training that the standard, stilted, second-paragraph C.E.O. quote will have the desired effect?

* Why aren’t there recycling bins for bottles and cans where they’re most obviously needed, like food courts and cafeterias?

Because that’d mean that the food courts and cafeterias would have to deal with that recycling for you instead of just throwing everything in the dumpster.

* Why doesn’t someone start a cellphone company that bills you only for what you use? That model works O.K. for the electricity, gas and water companies —and people would beat a path to its door.

We have that. I can get a nice normal mobile (cell-phone) for 35 euro, without giving up any personal information, with 10–15 euros of phone-credit to start me off included, free voicemail and never-deprecating phone-credit.

Still, most people have a plan because it’s cheaper.

* Why doesn’t everyone have lights that turn off automatically when the room is empty?

In Korea you can turn the lights on and off with your mobile. WAY COOLER.

* What’s the deal with Palm?

They didn’t have a clue (anymore). People left, structures got reconjig’red and stuff just kept trudging along. There are new people at the top now, who might actually know what they’re doing, so don’t give up hope!

* Why are so many people rude on the Internet?

I present you with John Gabriel’s Greater Internet Fuckwad Theory, as recorded by Jerry Holkins and Mike Krahulik.

Phew, that’s a lot of questions answered. Hope that satisfies you Pogue! If you think you have better ones, or are simply deeply awed by my insights, don’t forget to speak up!

Pogues’ Imponderables: Impondered originally appeared on Candy by James on 8 November 2007.

What’s a Meter? ★
Good Magazine on the history of the official definition of the meter. Includes this humiliating nugget: “There are only three countries that do not use the metric system: Liberia, Myanmar, and the United States.”
(Thanks to Rab Barari.) #

It’s concise, clear and even has a friendly nod to Rab Barari, who ostensibly mailed him the link.

For those of you who haven’t read Daring Fireball, you should know that John Gruber follows Apple. He calls journalists out when they write up silly biased articles about Apple’s products.That’s a good thing. He does it so much in fact, that he even has a feature “Jackass of the week” for very silly journalists. It can, and has been, awarded several times a week. But — John Gruber can be a Jackass too.

He recently wrote the following:

Adobe Adds H.264 Support to Flash Player 9 ★
My bet is that it performs like total crap, at least on OS X, but I’d love to be proven wrong. #

And bam! He slams a great development in video on the web in one sentence — just like that. Sure, Flash reportedly performs weakly on OS X. The Flash Player Beta — which includes the H.264 — is right there to download.

He could have, at the very least, tried it and reported his findings before slamming it. Otherwise, it’s just weak conjecture. Just like the conjecture from the hack journalists or (shudder) hack scientists he so rightly calls out.

John Gruber can be unfair too. originally appeared on Candy by James on 23 August 2007.

Greg Story, over at Airbag, is quite articulate on this matter:

There are six-hundred-and-eighty-three proposal submissions for next year’s South by South West, and once again it’s up the the Internet to filter through all of them and choose which ones are worthy of becoming real events.

How absolutely absurd.

I didn’t like the crowdsourced voting last year and with this astonishing amount of submissions I fail to see how the quality of the SXSW experience is going to improve. I heard a lot of complaints about the lack of quality in many of the panels so I don’t understand why the conference leadership is extending the program.

Source: Cross, Airbag.

Hugh Forrest, one of the organisers commented on the post and explained SXSW’s stance on the matter. I still found myself agreeing with Greg, and commented on possible improvements for the choosing mechanism:

Hugh: Why not extend that idea by having the would-be panelists upload a snippet of their talk. That way you (and us) could rate their speaking abilities (filtering out the monotones) and get an even better idea of the route they’re going to take their talk in.

Of course, it needn’t be limited to audio…SXTube FTW

Source: Myself at Cross, Airbag.

I was happily surprised Hugh then took the time to respond to me by email!

James,

I’ve been following the dialogue on Airbag. Good stuff there — meaning, all dialogue is good dialogue.

Re the suggestion of letting panel proposers add rich media to the Panel Picker, this is a good idea. And, one that we talked about last week.

Reasons we have decided not to do this for this year:

1) Still having some tech issues. So, best to try to work those out with the site as is before adding in new features.

2) Philosophically . . my concern is that the experts (who we most want to speak at SXSW) have the least time to put together a video for the site. So, in some ways, this might be counterproductive to the ultimate goals here.

But . . again . . it’s a really good suggestion and something that we are still kind of mulling about. Thanks for the feedback!

Best regards,

Hugh Forrest
(Published with his permission)

My response:

Hi Hugh,

I’m glad you’re enjoying the conversation on Airbag — all attention is good attention, right?

Thanks for getting back to me, I’m flattered that you took the time to respond personally.

As for your arguments, #1 I can sympathise with, but #2, well… If the experts can take the time to prepare a panel and go to a week long conference, I imagine they can put in the extra 20 — 30 mins to say some words into a microphone and upload it to one of the many audio/podcast sites.

The non-experts (who you’re trying to filter out) will probably have more time, and might discover during the process of recording something that they need to get their act together.

[..]

Again, thanks for taking the time to mail me,

James

So what do you, the reader think? Is the choosing mechanism fine? Is it completely broken? Or do the (often lacking) descriptions of panels just need some audio or video to give voters a better idea of what they’re voting for?

(Hat tip to John Gruber who’s link I followed to Airbag in the first place.)

Improving the SXSW panel voting originally appeared on Candy by James on 22 August 2007.

[update] We’re done with Testiculating.

Testiculating originally appeared on Candy by James on 26 February 2007.

Can’t wait to see what wisdom he has to share with us!

And no, I’m not just saying that because it might help my chances in the (very old) DxF Recoding Challenge…

Andrei’s back originally appeared on Candy by James on 22 June 2006.