cssvault - inspiring creativity

Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.

The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.

Scalable Inman Flash Replacement (sIFR) / sIFR 3

Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.

Pros:

• Fully accessible to screen readers and assistive technology
• Partially selectable text (cannot select surrounding elements)
• jQuery integration
• Anti-aliasing results in crisp font rendering
• Flash-based font embedding is generally an allowable practice by most font foundries
• Easy to add text effects such as shadows in Flash

Cons:

• Requires Flash
• CPU and memory intensive
• Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
• Can be tricky to set up
• Embedded fonts cannot be printed

Cufon

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Pros:

• Easy to set up
• Does not require Flash
• Fastest loading and processing time (according to this presentation)

Cons:

• Inability to highlight and copy/paste text
• License issues prevent many fonts from being legally embedded
• Does not support justified text alignment
• Hover state for elements other than links might result to unpredictable results
• Requires extra JavaScript to prevent FOUC on IE7

Typeface.js

Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.

Pros:

• Easy to set up
• Does not require Flash
• Fast loading and processing time

Cons:

• Fonts are only selectable in browsers that support <canvas>
• Hover state is not supported, but a workaround that requires extra code is available
• License issues prevent many fonts from being legally embedded
• Long loading times in IE
• Only supports TTF (does not support .otf, PFB, and postscript fonts)
• Requires extra JavaScript to prevent FOUC on IE7
• Has spacing issues, according to some people

Facelift Image Replacement (FLIR)

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
Pros:

• Does not require Flash or JavaScript
• Fonts are rendered as an image and does not violate font licensing terms
• Many text effects available thanks to Imagemagick

Cons:

• Inability to highlight and copy/paste text
• Can be painful to set up
• Requires a web server with PHP and the GD library enabled
• Finer details of fonts are not rendered very well by the GD library
• Takes up additional server resources to process (bandwidth and CPU)

The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.

Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.

Share

CSS or Cascading Style Sheets is normally used to separate the style and layout of your HTML files from the actual content. However, few are aware of the added value that CSS can give to your website. Aside from the obvious ones like style standardization, CSS can be utilized to provide other useful stuff not possible with table-based layouts.

Among these benefits are things like:

• Server bandwidth reduction
• Media type formatting
• Menu overlapping
• Styling of form elements
• and even E-mail address obfuscation

Much information about these techniques can be found on the web. Below are some example implementations.

Server bandwidth reduction

CSS Optimization can translate to huge savings in server bandwidth, resulting in lower operational costs.

This article compares some of the best CSS optimizers available on the web by using heavy traffic websites like Digg and Slashdot as an example.

Media type formatting

By utilizing the CSS media attribute, you can easily control display for different media types. This is best used when formatting websites for mobile display and creating printer-friendly pages.

Here is a good tutorial that covers CSS development for mobile browsers. For techniques related to print styling, refer to this tutorial, another tutorial, and this article by Eric Meyer.

Menu overlapping

The CSS z-index property specifies the order an element is stacked, similar to how layers are arranged in Adobe Photoshop. It is also relatively easy to understand, and can be quite powerful when used correctly. It can also come in handy when creating overlapping menus. Here is a very good tutorial on how this can be done.

Styling of form elements

In a previous article we linked to Jeff Howden’s CSS-Only, tableless forms article which gives an example of what can be accomplished with CSS form styling.

Then, there’s also The Form Assembly, a CSS Zen Garden clone for showcasing form designs.

E-mail address obfuscation

When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. There are many ways to accomplish this, and one such method can easily be implemented in CSS. Silvan Mühlemann tested nine methods and published a test page for spambots to harvest. 1.5 years later the results are out and surprisingly, only the CSS methods resulted in absolutely zero spam.

Share

Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.

Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.

SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.

What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.

It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.

In the README file:

SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.

The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.

It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!

Share

“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.

OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:

• It allows you to write fast, maintainable, standards-based front end code.
• It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

OOCSS is governed by two main principles:

1. Separate structure and skin
2. Separate container and content

Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.

Share

Here is an article that you may find useful.

Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.

For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.

Share

Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.

It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.

Kayla Knight has written a very good article on the topic of building good websites with fluid layout.

She comes up with 6 techniques to do this, which can be summed up as follows:

1. Fluid Layout Using A Grid
2. Adaptive Content
3. Images In A Fluid Layout
4. jQuery Masonry
5. Smart Columns with jQuery & CSS
6. Text Zooming

She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.

Read the full article

Share

Adobe BrowserLab is an online service that allows web professionals to test their websites on popular browsers and operating systems. Screenshots of actual browser renderings are generated in real time, with multiple viewing options to help pinpoint issues. Adobe provides integration with Dreamweaver CS4, and the free preview is currently available only to a limited number of users.

Currently, BrowserLab supports the following web browsers and operating systems:

• Firefox 2.0 - Windows XP
• Firefox 3.0 - Windows XP
• Internet Explorer 6.0 - Windows XP
• Internet Explorer 7.0 - Windows XP
• Safari 3.0 - Macintosh OS X
• Firefox 2.0 - Macintosh OS X
• Firefox 3.0 - Macintosh OS X

The sad thing about BrowserLab is that it will eventually be released as a paid service. In the meanwhile, there are alternatives like Browsershots which remain free for low-priority usage.

Share

The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:

• 16px default main text size
• Partial 26px baseline grid
• Serif for Heading, sans-serif for the paragraphs
• Lower color text contrast
• Intensified paragraph division (new line + indent)
• Bigger leading (line-height) 1.625

The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:

1. We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
2. Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
3. You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:

You can head over to the project homepage, or click on the links below to view the library in action:

• Typography
• Absinthes to Go Mad Over - NY Times
• An American Prayer - The Doors
• Critique of Pure Reason - Immanuel Kant
• Excerpt from No Way To Paradise - Charles Bukowski
• How To Sniff Out A Liar - Forbes
• Hubble - Ars Technica
• One Day in Spring - Rabindranath Tagore
• Shaman’s Blues - The Doors
• Tarantino - NY Times
• The Alchemist - Paulo Coelho
• The Last Question - Isaac Asimov
• The Raven - Edgar Allan Poe
• Viva Las Vegas - Elvis Presley

You can also head over and download the full library here.

Share

The Peeling Page is an effect is normally used by advertisers to show advertisements that would otherwise occupy space that is larger than what is available on a page. It is very slick, and is normally implemented in Flash. This script on Flashden costs $4, though there is a free tutorial available. The thing about the Flash version is that it uses both JavaScript and Flash, which may not be everyone’s cup of tea.

This is where Soh Tanaka’s jQuery + CSS idea comes in. It uses simple CSS and jQuery to mimic the Flash version, which can possibly translate to faster development and maybe even faster loading pages. The tradeoff is the absence of any extensive banner animation — something that can only be done in Flash. However, I believe this solution is worthy of a look, at least for those in need of a quick peeling page component for their project.

Simple Page Peel Effect with jQuery & CSS

Share

As self-proclaimed CSS experts, we must live, eat and breathe CSS - 25 hours a day. What better way to do this than by using a CSS + HTML calendar! Lovingly hand-crafted(tm) by Vladimir Carrer, the Grid Calendar is inspired by the Best of Calendar Design, and can be downloaded for free (can you believe it?)

This reminds me a lot of the designs posted on the 2007 elzr Infodesign challenge, as well as Adam Sporka’s Thumb Calendar which I am personally very fond of.

Perhaps there’s a designer out there with uber talent a lot of spare time who could take the Grid Calendar to the next level. It certainly could use a little more color, and those white spaces between the grids are making the nerve endings of my eyes do the polka dance. While we’re at it, let’s throw in a bunch of AJAX to turn our simple calendar into a leet app. Or maybe not.

Read the full article.

Share