@font-face Test

cufón Test

Conclusion

Unless I can find a way to get lettering displayed with the CSS @font-face property to turn up clearer I may be forced to stick with cufón for now.

A short time later I started a site at http://radio.lionking.org and since the title treatment for this animated film has an overline effect in it I decided to add one with CSS to the title of my site. The H1 for the title is as follows:

<h1>R<span>ADIO</span> L<span>ION KIN</span>G</h1>

Using my old school CSS techniques from “The Year 2000″ I set the base font-size for the H1 to 70 pixels (I might change it to an em-based sizing sometime) then set anything wrapped within a SPAN in the H1 to 75% of that. Then the second SPAN (the one that needs the overline effect) has text-decoration: overline; applied to it. The result, which turned out quite well, can be seen below or at the site:

As evidence that the overline property is not being completely ignored the CSS3 Working Draft provides for extra overline styles that will allow for different visual appearances and colors for overlines applied to text. My initial testing showed that none of these are supported yet by mass-market browsers, but keep in mind that they may be supported at some point in the future. They have a “thick” property but I wish they also had a “thin” one because in the example I am showcasing here the overline could stand to be a little thinner.

Has anyone else seen any other legitimate uses of overline?

In twelve-plus years of working with HTML I’ve noticed that many web developers take a crash course in it, learn a few basics, then “move on” to the “real stuff.” While HTML is admittedly easy to learn and not super difficult to master there are still many concepts relating to it which seem to be ignored or are maybe completely unheard of in the web development world. When these concepts are grasped they significantly increase productivity, clarity of code, ease-of-maintenance, etc. But so many people seem content to live without these benefits. In my own development experience I’ve come to be aware of many of these concepts but thought they were too idiosyncratic to bring up to other people. But the book I’m currently reading, HTML & CSS: The Good Parts by Ben Henick and published by O’Reilly Press, crystallizes my thought process on these matters and shows that they really are important to sites of any size. This is not a book to learn HTML or CSS from. It exists at an intermediate or perhaps advanced level but any serious web developer wanting to perfect their coding practices will benefit from reading this book. As I write this I am on page 68 in the book so I may add more to this entry later.

For those readers viewing this on a browser with decent CSS support the following style rules:

1. {
2. background-color: #BD8B00;
3. border: 3px solid #990000;
4. width: 200px;
5. height: 200px;
6. -moz-border-radius: 100px;
7. }

should produce a perfectly circular DIV here:

Current Drawbacks

Border Style Restrictions

Unfortunately it appears that the only border-style type a circular DIV can properly show is “solid.” I have tried other values and they all produced funny results or end up looking as though they were just set to “solid” anyway:

Dotted

Dashed

Groove

Padding Issues

When you place elements within your circular DIV they behave as though it was rectangular:

Of course that happens when any amount of radius is applied to a DIV’s border and the problem is solved by properly applying padding:

Rotate It!

Why not have a little fun by applying the transform property?:

What About IE?

While I recognize the improvements in CSS support that came to versions 7 and 8 of Microsoft’s Internet Explorer it’s sad to say that circular DIVs (in my testing so far) have not worked in any version of IE even with the aid of jQuery Rounded Corners or jQuery Canvas Rounded Corners or jQuery Curvy Corners. Alas, we await support hopefully no later than IE 9. I have had some success with several potential jQuery solutions but no reliable cross-browser solution as of yet.

Post Script

After I wrote this entry I found this article that also has a round DIV in it, but also has IE troubles, even with IE8.

The interesting thing about it is that it reminds me of when I got into a discussion with somebody about this very topic at the SitePoint forums. This guy was going into great detail about all the things wrong with XHTML. On one hand, I could see the truth behind many of the points he was making. On the other hand, I’ve never seen that any of my XHTML pages were breaking the Internet and it also seemed to me that if you really, really wanted to switch from XHTML to HTML 5 that all you would have to do is simply change the document type declaration. Well, this web comic confirms that that is indeed the case.

So, I just found out about Cooliris recently even though it’s been around for a while. I downloaded the plugin and tried out some of their code to get flickr albums to show up in it and I got one working. Here’s an example that you will see if you have the plugin installed (Continue reading…):

Well, I’ll be darned if the very next day I didn’t see that flickr is now Cooliris-enabled. If you have Cooliris installed and you are looking at flickr and hover over an image the Cooliris launch icon will appear in the lower left-hand corner (see example photo at top of entry) and you can click on that and launch your image (or album even) in super awesome Cooliris style.

Going to look for some more uses of Cooliris, including possibly using it for a revamped web portfolio.

Let’s look at an example. Here is the blog’s logo with a border added to its DIV and a little text thrown in so you can see better what’s happening when it gets transformed:

Like my logo?

And here is the logo transformed:

Like my logo?

And here is the code for the DIV:

1. #tr-logo
2. {
3. width: 205px;
4. margin: 2.2em;
5. padding: 4px;
6. border: solid #990000;
7. text-align: center;
8. -moz-transform: translate(10px, 4px) scale(.8, .6) rotate(30deg);
9. -moz-transform-origin: 60% 100%;
10. -webkit-transform: translate(10px, 4px) scale(.8, .6) rotate(30deg);
11. -webkit-transform-origin: 60% 100%;
12. }

In the -moz-transform property, the translate value “pushes” the element to a spot on the grid. In this case the element is pushed 10 pixels to the right on the X-axis (a negative value would push it to the left) and 4 pixels down on the Y-axis (a negative value would push it up, which I find to be a little counterintuitive). The scale value scales the width and the height of the element. Here I have the element scaled to 80% of its original width and 60% of its original height. It should be pretty obvious what the rotate value does. Here the element is getting rotated 30 degrees.

It goes without saying that if you’re not looking at this in a browser that supports this property you won’t see the effect. We’ll look into this property more later and see if we can even find a practical use for it.

Allow me to illustrate. Here is a simple table that I don’t think anyone would argue really is a table:

Example #1

Table

Example #2

Form

Now, what if we remove half the information, leave half the information, and wait for a user (Donald Duck, presumably) to fill in the remaining half:

Does the form then become something other than a table? To me it is still basically a table.

Example #3

Form That’s Even More Like a Table

Now, let’s look at the form with the information plugged into the blank text fields:

Doesn’t it now look almost exactly like the first example?

Post Script

Before you jump all over me please realize that I am not saying that tables should be used for page layout (yes, I do my page layouts with DIVs and CSS). But, if after what I presented you have good reason to say that a web form should not be laid out using tables please let me know by leaving a comment. I am open to all points of view.

(Also, I’m not saying that tables or forms need to be presented in such a plain fashion. I am just making things simple here for purposes of illustration. See Data Tables, Lesson #2 for some instruction on how to dress up a table, and look for more such lessons in the future.)

This technique utilizes a transparent PNG placed as the background image in a SPAN you include in the element you want to add the effect to. Since that will validate but it’s still a little on the hacky side I made it a little less hacky by using jQuery to write the SPAN in, like so:

1. jQuery(‘H3,H4′).append(‘<span></span>’);

But, wait a second…

You may be thinking to yourself, “But sometimes an H2 on this blog has the grunge effect and sometimes it doesn’t.” That is because when you apply the grunge effect to an element it can no longer work as a link. To get to any specific entry on this blog from the front page you can get there by clicking the article title, which is wrapped in an A element which is then wrapped in an H2 element, so I turn off the grunge effect on the H2 elements on the front page with the jQuery URL plugin (which I think I got from here) and the following jQuery code:

1. if ( jQuery.jqURL.url() != “http://developer.cmzmedia.com/” ) {
2. jQuery(‘H2′).append(‘<span></span>’);
3. }

Once you go to a specific article its H2 no longer needs to act as a link so the grunge effect is turned back on.

Welcome Grufón

I have also found that you can add the grunge text effect to Cufón-enabled text. My name for it? “Grufón.” The Grufón effect currently appears on any H2 element of this blog except for those on the front page.

So, what is good about Cufón? Well, it seems to work faster than sIFR and it seems to be better than sIFR at handling larger blocks of text. You also don’t seem to need extra CSS to use Cufón.

Are there any drawbacks? Yes, the main one I can think of now is that, as far as I can tell, you can’t copy and paste Cufón text whereas sIFR text was copyable and pastable. Um, that’s the only one I can think of right now (in addition to the previously stated fact that the setup wasn’t simpler than sIFR’s setup), but it’s a big one. Here’s hoping the next version of Cufón addresses this issue.