Adventures in CSS2 Font Embedding

     

CSS2 (or maybe it’s CSS3 - who can keep up) lets you embed fonts into style sheets for use on your HTML pages. Since all modern browsers now support true type font embedding (that’d be Firefox 3.5, Safari 4, Chrome(?), and Opera 9), I figured I take a stab at it to see how practical it was.

I think in the long run this is going to be a boon for designers. I can’t count the number of times I’ve seen a designer get bummed over the “web safe font” selection. And for the most part, font embedding actually works.


Mac OS X Regex Widget Update 1.7

     

(RegexWidget is a Mac OS X dashboard regular expression testing widget)

Another small update to the Regex Widget. A bug reported by Niels Castle led to a new feature and an, arguable, bug fix.

The new feature is Multiline support. When you tick the multiline check box it allows the “beginning of line” (^) and “end of line” ($) parts of a regex to work. See the screen shot for an example:


Testing Browser Resolutions in Safari (Scriptlets)

     

I needed to test a couple different sites in different resolutions, and I couldn’t find a simple way to get Safari to resize to “standard” formats (1024x768, 800x600, etc). I found this post on MacOSX Hints about how to use scriptlets to make Safari go full screen, and decided to expanded upon it to solve my problem. Here are the scriptlets:

640x480

800x600

1024x768

Full Screen

Custom

To install them just drag them to the Safari bookmark bar (as seen in the shot below).


Enable Debug Mode on Safari (Windows) + Error

     

If you’ve downloaded the Safari build on Windows, and you want access to the very helpful debug Develop menu (the javascript console, DOM viewer, etc), Do the following:

  1. Open %APPDATA%\Apple Computer\Safari\Preferences.plist (Or open C:\Program Files\Safari\Safari.resources\Defaults.plist)
  2. Add the key / value:
...
<key>IncludeDebugMenu</key>
<true/>
...

for reference on Mac it’s:

$ defaults write com.apple.Safari IncludeDebugMenu 1

From the terminal.

In both cases you’ll have to restart Safari if you already have it open.


Javascript: String width in pixels

     

One of the hardest things about doing web development - using the browser as your GUI - is that you have to get used to, and accept, “close enough” (actually, getting your clients used to that idea is probably harder). “Close enough” is in direct conflict with many things in computer science, so it’s a difficult pill to swallow.

Keeping that in mind…

I was chatting with one of my friends, and they asked if there was anyway to get the length of a string in pixels. He needed it mostly for form layouts - to align buttons with labels. The project I am working on I have a similar issue, but not related to buttons (more of a dynamic truncation “…” kind of thing).