gcalc updated

Duncan Lock — Tue, 19 Apr 2011 21:59:34 +0000

Just a quick note to say that the gcalc – Google Calculator command line/script has been fixed after Google mark-up changes broke it. Read the original post, or Download a new copy here.

Q&A: Images of text vs. Webfonts

Duncan Lock — Sat, 20 Nov 2010 01:36:48 +0000

A little while ago I got a question from a good friend and client of mine about using fonts on websites. This also applies to other ways of faking web fonts, like sIFR. As others have been asking me about this lately, I thought I’d put my answer up here, so that I can point poeple at it in the future:

Q:

Please remind me about images of text vs real text on websites. Search engines search alt. text so why not have a navigation with images and nice typography rather than a limited selection of web fonts?

A:

It’s true that search engines search alt. text – and you can do it that way. If you’re determined to use images, you should probably also use a hidden Menu Text inside the element. These sort of work Ok, for the most part. The arguments for and against this are sort of like flash sites vs. real websites; one is the Right Thing To Do and one isn’t. You can make the wrong way work mostly Ok, if you work at it, but however hard you try, there are always downsides and you’re putting yourself at a slight disadvantage all the time.

Why is real text better?

There are a large number of little reasons why text is better than images; images are: harder to update when you change or add things to a site, harder to update when you change site designs or colours, much larger and slower to download, cause extra HTTP requests slowing down page loading even further, aren’t searchable (either by search engines, or users with ctrl+f), aren’t translatable, don’t zoom/re-flow as well on mobile devices, don’t render as well when zoomed or viewed as different resolutions, don’t print very well, aren’t as accessible, etc, etc…

Even better…

Also, I saved the best bit till last: You don’t need to choose any more! The ‘limited selection of web fonts’ issue has gone away – you can now use any font you like, provided that you’ve got a license to use it on a website. As far as I can see, this makes using images of text completely obsolete – I can now think of no circumstances where using images of text is even remotely justifiable. Previously, the only argument in favour of images was ‘it looks nicer’; this solitary argument in their favour is now gone.

Here are some resources that cover modern web fonts:

http://nicewebtype.com/
http://webfonts.info/wiki/index.php?title=What_are_webfonts%3F – this link also has a nice list of available web fonts, both commercial and open/free.

Here are some examples of sexy looking websites that make good use of modern web fonts. Notice that all the text is normal, selectable, searchable text, even the sexy looking stuff:

Some by me:

lots by others:

How do I actually use webfonts then?

The webfonts stuff is all just CSS, and pretty simple to use. You just tell it where the font file is, and give it a name:


@font-face {
font-family: 'DroidSansRegular';
src: url('/fonts/droidsans-regular.otf');
font-weight: normal;
font-style: normal;
}

then you just use it as normal:


p {
font-family: DroidSansRegular, Arial, sans-serif;
font-size: 18pt;
}

there are various tools which will write the (slightly more complex) cross-browser version of that. I used FontSquirrel for http://joaobarao.com/ – you can see what it generates here: http://joaobarao.com/css/joao.css – all the @font-face stuff at the top is generated for you by FontSquirrel. I used two excellent free / open fonts: Fontin and Droid Sans on the http://joaobarao.com/ site.

Portfolio updated

Duncan Lock — Mon, 13 Sep 2010 19:42:17 +0000

I’ve just added Twinbro into the Codeistry Portfolio, another job in my queue of jobs that need adding. I’d used the Twinbro website in my Sorfolio, so I thought I’d better put them onto the main portfolio site too.

I’ve also updated all the thumbnail images in the portfolio, after I figured out which Inkscape setting was degrading the quality. If you go into Inkscape Settings, then Bitmaps and set the ‘Oversample bitmaps’ setting to ’16×16′, you’ll get much nicer anti-aliasing on your bitmaps, especially if you’re rotating or resizing them.

I also took the opportunity to resize the thumbnails to make them a bit larger and to tidy up the formatting of the older ones, which looks much better.

Choosing syntax highlighting colours for the draw spaces Gedit plugin

Duncan Lock — Mon, 04 May 2009 18:55:11 +0000

I’ve recently upgraded to Ubuntu Jaunty – and therefore Gedit 2.26.1 – and I couldn’t figure out how to change the color of spaces shown by the ‘Draw Spaces’ plugin. This used to be set in the plugin configuration, but you now do it in the syntax highlighting theme – but how? What do you need to add?

The closest that I got googling was this: https://bugs.launchpad.net/ubuntu/+source/gedit-plugins/+bug/348500 – which almost tells you but misses out the crucial bit of info.

So, I asked the fine folks in the #gedit room on irc.gnome.org and they enlightened me; you need to add this to your syntax theme file:

Codeistry blog » Technical