Scribbler

example

Scribbler is a WordPress plugin that allows you to show an animation of handwritten text on your site. See an example on deschrijfcoacharuba.com

Why use Scribbler?

Handwriting is very personal, this can give a personal touch to your logo, your site, product, app or videos.

How to use Scribbler

  1. Download the plugin  (we’re not on the WordPress directory yet).
  2. Go to your admin section in WordPress and choose Plugins.
  3. Choose ‘upload plugin’
  4. Press ‘choose file’ and then install
    • Alternatively, unzip the plugin. Use FTP to go to your WordPress/wp-content/plugins folder and upload the directory there. Activate the Scribbler plugin
  5. Go to Settings > Scribbler
  6. Enter the text you’d like to see animated on your home page

Options

There is currently only one option: text. This defines what text to show on the page.

Customization

You will probably want to customize the CSS file, which is in the same folder as the plugin. By default the text appears in div#pen, which will be placed right below the content of the post.

Limitations

  • The plugin is programmed to only work on a home page (using is_frontpage), because having a handwriting animation on every page gives bad usability.
  • The speed is fixed to 400 ms per character
  • As already said, it has only one font: ‘Tangerine’ (a Google Font).

Caveats

The plugin hasn’t been tested on every website known to man, and it relies heavily on javascript, in particular the Raphael, jQuery and Cufon libraries.

There is only one font (Tangerine). If you want to use another font, you’ll have to do the preparations yourself: create a cufonized font and modify the default in Scribbler.php.

Known Problems

There are no known problems as of yet.

Contribute

If you want to help me, I’d appreciate to be sent cufonized fonts. I will then implement the use of that font in the plugin.

I want this too on my site!

If you’re not technically inclined I can customize it for you on your site. Just leave a comment or contact me (http://about.me/michiel) and we can agree on a price.

Download

Or, do it yourself.

Source

Download

Advertisements

sIFR reloaded

 

sIFR
sIFR

sIFR (scalable inman flash replacement for the outsiders) is a technique to embed custom fonts in a webpage. You know, traditionally web pages can only show a couple of fonts reliably – the ubiquitous Arial, Times, and a couple of others.

 

When sIFR was introduced I was pretty psyched out about it. Showing any font, and still accessible, selectable, etc. However, it’s giving me nothing but headaches. Let’s recap some of those:

  • sIFR needs Flash. At a certain point there was a security issue and I had to disable Flash. No more sIFR.
  • Lots of people block Flash, because of the ads. 
  • Special characters weren’t showing. It appeared my font didn’t even have these defined. Well that’s not sIFR to blame, but still
  • It’s almost doing a good job presenting the CSS correctly. Almost.
  • Documentation? Don’t get me started. Besides a collection of pages on several blogs, that are badly maintained, there’s absolutely nothing.
  • Every time you install a new version you have to recreate your font files. Now that’s annoying!

Here are some alternatives I found today

TrueFontFamily

trademarks: JS, PHP, CSS, commercial. 

Server side generating is of course a good idea, but I can’t see if the textimages are cached, it looks like not.

Facelift

trademarks: JS, PHP, hosted, commercial

This one seems very good, but a bit too commercial. Hosted? No thank you.

TypeFace

trademarks: JS, SVG/VML, free

Typeface is a diamond among these, so it seems, if it doesn’t suffer from the lack of documentation that is. But if it’s really good it doesn’t need documentation.

NFB is not so blind friendly itself

The web standards project writes

“Yesterday, the U.S. District Court for the Northern District of California certified the NFB lawsuit against Target as a class action on behalf of blind Internet users throughout the U.S. and ruled that websites like Target.com are required, under California state law, to be accessible.

In February of 2006, the National Federation of the Blind took legal action against Target for having an inaccessible website. A month later the case after it went to federal court (at Target’s request), and in September, the NFB began pushing for class action certification after Target failed to get the case thrown out.”

This is strange. I just looked at the NFB site and it doesn’t look accessible at all. I looked at it without style sheets and that is not the list-item look you’d expect. Also it fails a simple WAI check. Maybe the most disturbing is the use of light blue on orange!

However, of course I support the NFB in it’s goal of making the web accessible to everyone.

CSS, buttons and links

Buttons have some strange quirks in browsers, and not just in quirks mode:

Browser or OS rendered?

When a button has no border and no background it will be styled as the standard Windows button (in IE) . Similarly so in Firefox. Other browsers do it their own way.

Example: 
By the way, <button> and <input type=”submit”> is exactly the same to a browser, where the only difference is that a button tag does not have to be embedded in a form, and an input does.

When a button has a border, or a background defined, it suddenly loses it’s standard ‘nice’ appearance and turns into a CSS styled element, just like any other element.

Big Buttons

Another quirk you may see sometimes in Internet Explorer is when you make a button very wide. The background image that MS has decided to put on the button has a fixed width, and is stretched to fit the button. This results in a horrendous look.

Example: <button style=”width:300px”>

big button

Making an anchor look like a button

A lot of times buttons are used in places where there should just be a link. Using CSS we can make the link look like a button.

Like so:

a {
    display:block;
    width: 150px;
    height: 50px;
    background-color: silver;
    border: 1px solid black;
}

Adding a hover effect to the button is simple:

a:hover {
    background-color: white;
}

float:center

Unfortunately float:center is not valid CSS, no matter how much we would like it to be. And God knows I tried. The thing with floats is that the left and right property really make them go to the left of their (floating) container. The problem you can get in to is with a series of boxes that you want to have floating alongside, and then centered in the middle of the site.

Let’s say for example you want to have three buttons next to each other, spread out over the full width of your site, and they all link to some section of your site, say:

  • My Portfolio
  • About CSS
  • Blog

In addition, you want it to be viewable on a really small screen, as a PDA or phone browser, and the easiest way you think would be to put them floating, so they would automatically wrap. This is usually a good idea, however, in this case you also want the buttons to be smack left aligned when viewed on a small screen.

There just is no solution for that. The only thing that comes close is giving all these buttons a fixed width (don’t get me started on percentages, it just won’t work). Make sure the sum of the widths equals the width of the container. So if I have a site of 660px, I would give every box a width of 200px and add 10px padding on every side of each box.

So

  • Box A: 10+200+10 = 220px
  • Box B: 10+200+10 = 220px
  • Box C: 10+200+10 = 220px

The only problem is that when you make the window smaller the boxes all have a little indentation on the left.

This is the CSS you would use

.container {
  width: 660px;
  margin:0 auto;
  display:block; }
.button {
  width:200px;
  padding:10px;
  background-color: gray;
  border:1px solid black; }

Of course you could do the same thing with ems.

Update: this problem was recently solved by Firefox 3.0. As of this version all major browsers, including IE6 have support for inline-block. When you use inline-block, you don’t need floats. Put it on the boxes (as in the above example Box a,b and c). You don’t have to specify a width, and by putting text-align:center on the container the boxes will automatically be centered, no matter how many boxes you have.

CSS for XML in Firefox

I always assumed that XML was not stylable in normal HTML documents, it being unable to conform to the HTML DTD. I tried in Internet Explorer a long time ago, and found out that XSLT was the only way to do this. And that is too bad, since it requires a lot more thought.

I was very surprised when at one time I accidentally threw generated XML into an XHTML document, and the content actually showed with a lot of errors and warning, but displaying nonetheless. I applied styles, and hey, it works!

In Opera and IE nothing shows up.

Here’s an example, HTML mixed with CSS first (I cannot use the source code tag here, due to WordPress.com censoring of my tags).

<title>CSS for XML</title>

<h1>This is an example of mixing CSS and XML</h1>

<xml>

 <language>

  <name>php</php>

  <version>5.0</version>

 </language>

 <language>

  <name>javascript</php>

  <version>1.3</version>

 </language>

 <language>

  <name>python</php>

  <version>1.0</version>

 </language>

 <language>

  <name>ruby</php>

  <version>1.0</version>

</language>

</xml>

And here’s the styling

language {
float:left;
width: 8em;
height: 3em;
border:.3em solid #09f;
margin-left:2em;
padding:10px;
background: #06f;
color: white;
text-transform:uppercase;
text-align:center;
-moz-border-radius: 1em 1em 1em 1em;
}
version {
clear:both;
display:block;
text-align:center;
font-size:.9em;
color: #000;
background-color: white;
-moz-border-radius: 1em 1em 1em 1em;
}

css debugging for pros: the margin revealer


I see the version I published is not working correctly in IE. Please use this older one instead for now, while I work on the problems:

Older version of Margin Revealer

Lately I have been missing something in my life. Now I know what: a tool to outline margins in my web pages. So I gave it a try and after a lot of struggling I did it. See for yourself: the margin revealer.

I have used the Yahoo User Interface library. Yahoo has done a great job. Now we don’t have to think about all that basic DOM stuff, that isn’t so basic after all. I don’t think it’s at it’s final version, but it works quite ok.

I hope you like it, it’s still a very pre-alpha-no-support-whatsoever version.