Archive for the ‘CSS’ Category

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.

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.

floating forms

demo page and complete report

I learned several advanced and quick methods of styling layout without tables, mainly used for forms, where fields should always be aligned:

inline block

label {display:-moz-inline-box; _display: inline-block}

This effectively pushes the fields to a fixed position on the right of the label, and works in almost all browsers

absolute positioning

Absolute positioning of the forms gives you the possibility to shift the fields to the right using relative positioning, as follows

form {position:relative}
input {position:absolute;left:10em}

float

Last but not least there is floating. This is usually complex because

  1. the height of labels and fields needs to be equal for correct floating/alignment, and
  2. the width of label+height should (almost) equal the form width. There should be room for margin/padding/rounding errors/font-size setting (in case of pixel widths)
  3. form {width: 20em}
    label {float:left; line-height:1.5em; margin-bottom:.2em; width: 9.5em}
    input {float:left; line-height:1.5em; width: 9.5em}
    

    This can however be fixed by adding a little border or padding to the label, assuming both have the same font size, like this:

    form {width: 20em}
    label {float:left; margin-bottom:1em; width: 10em; padding-right:1px}
    input {float:left}
    

    In this solution you can play around with margins as much as you like without messing up the display. If anybody can explain to me why this works please let me know.

    update: Ingo Chao explained why it works. The width of the label is exactly half of the form’s width. By adding that 1 pixel, two labels cannot go side by side and thus the next label in row will drop. In the original scenario (no widths, or no extra pixel) the first label moves up, but leaves space on the left, where the next label doesn’t fit, and so it moves down. That doesn’t sound very clear, but I’ll see if I can put an image here soon.

    update2: using label {clear:left} fixes the problems too.

FireFox and the endless growing select (impossible resize)

August last year I found a bug in FireFox 1.07 which I reported to the CSS-d list.

I promised Big John a long time ago I would write an article about a rare FireFox bug I found. In the meantime (several months, I know) the bug is probably fixed in FF 1.5. Hang on while I check it. Yes, it is fixed.

The FF growth hormone

Here’s how to reproduce it in FF: create a file with the following contents.


<form action="">
<select name="category" style="height: 1.75em">
<option>Testing Select Box Resize so make it really really long</option>
</select>
</form>

That’s simple, huh? After this open the file in FireFox and resize your browser window until it covers the select. Then resize it again, making the window bigger. As you resize, the select element resizes with the window, making the select wider (but not higher).

Then try making the window smaller. You’ll notice by looking at the scrollbar below that the select is becoming even bigger as you make the window smaller. There is no stopping it!

I am just mentioning it here for completeness sake, this bug has long been squashed by the excellent FireFox team.

Using cross browser transparant PNG’s

In this new series I will write a new CSS trick every day. Oops I don’t know if that is such a good idea… where am I going to find the time? All right I’ll try to post every day.

Here is a tip for all you guys who thought that crazy PhotoShopped design couldn’t be made to display in the browser window: use transparant PNG’s.

Here’s the recipe:

  1. Just design your page in PhotoShop using layers, lots of layers
  2. Export all layers as png’s, with full transparency, 24-bit’s, nice quality
  3. Use the fine pngquant tool to compress the images even more.
  4. Now place all images in an html page, and give each tag a unique ID. You don’t need to use a width and height, but if you do it would be more cross browser compatible with older browsers.
  5. Use the following css for the images
  6. img { position:absolute; border:none; margin:0; padding:0; }
    
  7. Now give each image an exact position
    img#fruit { top:25px; left:40px; }
    img#meat { top:50px; left:100px; }
    
  8. I always prefer to use only top and left, since I read horror stories about right and bottom. If you prefer to use percentages that’s fine, but not all browsers can calculate percentages that well, resulting in small pixel offsets.
  9. add the layering, using z-index. Z-index only works on elements with relative or absolute positioning. The higher the z-index, the more it is ‘on top’.
    img#fruit { top:25px; left:40px; z-index:1; }
    img#meat { top:50px; left:100px; z-index:2; }
    
  10. Add the page’s text content. You could have done that first, but since we are practicing PhotoShop-design-to-html-conversion we don’t really need text content. Normally you would add a div to the page without any positioning.
  11. update: really cross browser

    I realize I forgot to mention some of the cross-browser tips that make your PNG’s work wonders in the crap browser Internet Explorer.

    For solid color (or no) background

    There are several tools that can patch up a png pretty decent so that it
    shows up ok in IE. I now only use apha filters when the image has no
    solid color background. For solid colors I use the technique described
    here

    I know I mentioned pngquant but I later found some more interesting tools. How about pngoptimize? I know that Photoshop saves gamma information in the image, which would distort the final output in IE. You can remove that information using this program.

    For real flexibility

    For real flexibility you can use the IE proprietary filter css rule. This has the huge advantage that your png transparent images can be placed anywhere.

    Here’s an example:

    #logo a {
    position: absolute;
    top:40px;
    background: url(images/logo.png) no-repeat top left;
    width: 152px;
    height: 272px;
    }
    * html #logo a {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.png', sizingMethod='image');}
    }
    

    Unfortunately, there’s a catch. The path you use in the filter is not starting at the same directory as you would in the style sheet. Instead of using the css file path, it starts from the path of the source (aka your HTML file). The other catch is that there is no positioning of the background possible, so you’ll have to position the container instead.

    Static images

    Wait, it gets better! You can use javascript to automatically have all png images on the page use the filter property. See the following small script that you can include in every page of your site. No thinking required.

    fixPNGs = function ()
    {
    // go through each image in the page and fix them
    for ( var i = 0; i < document.images.length; i++ ) { // only if the image is a png var img = document.images[ i ]; if ( img.src.test(/\.png$/i) ) { img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', enabled=true)"; img.src="/images/blank.gif"; } } }; window.attachEvent("onload", fixPNGs); [/sourcecode]