Blog Surfer

CSS Tip: Positioning photos with floats
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos.

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace=”5″ vspace=”5″ align=”right” into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property “float” to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page’s existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call “photoright.” The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

• .photoright is the name of the class. Usually class names don’t include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
• float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
• padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
• margin: 0; specifies that I have 0 pixels of margin on all sides. I’m using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
• font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I’ll leave the merits of various font-sizing methods for a later discussion.)
• color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3’s. Because the text is small I’ve made this slightly darker than the usual lime color.
• font-style:italic; specifies that the caption will be italic.
• width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use
  ’s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else’s. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.

Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I’ve put this at the very beginning of my entry:

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

Close-up of first pavilion, floated left.

In this example I’ve used a class that defines a width of 200 pixels, the same width as the photograph. Note that I’ve included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn’t define the width. I’ve left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I’ve included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn’t include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

The state of functional programming in PHP
With the rise of Javascript, and languages like Python and Ruby, functional programming is becoming more mainstream. Even Java seems to be getting closures in the next version, so does this leave PHP lacking behind or is there an unrealised potential hidden within? Dynamic dispatch What exactly defines a functional programming language, is perhaps an open question, […]

With the rise of Javascript, and languages like Python and Ruby, functional programming is becoming more mainstream. Even Java seems to be getting closures in the next version, so does this leave PHP lacking behind or is there an unrealised potential hidden within?

Dynamic dispatch

What exactly defines a functional programming language, is perhaps an open question, but one key element is functions as data. As it happens, PHP kind-of-supports this concept; The syntax permits you to use variables as function-names, making the following possible:

  function add($a, $b) {    return $a + $b;  }  $add = "add";  $add(2, 8); // return 10  

Unlike languages with first class functions support, the variable $add isn’t a special type — It’s merely a string, which is evaluated in the context. It may just be a wrapped up eval, but superficially it works similar, once the function has been declared.

It is also possible to explicitly call a function reference with call_user_func. This is interesting, because it accepts different types of arguments, which makes it possible to call a method on an object. More on this in a moment.

Binding state

Another prerequisite for functional programming, is the ability to bind a variable to a function. This bound function serves essentially the same purpose as objects do in object oriented programming, but is usually more fine grained and more flexible.

In languages, which are traditionally associated with functional programming, functions are usually bound with variables, through something called a closure. This is a side effect of the scoping rules of those languages.

Since PHP doesn’t have lexical scope, we can’t use closures, but we can use currying to achieve the same goal. In Wikipedia’s words, currying is the technique of transforming a function that takes multiple arguments into a function that takes a single argument. If that sounds abstract, assume the following:

  $add2 = curry($add, 2); // returns a new function reference, to add(), bound with 2 as the first argument  $add2(8); // return 10  

Before you try that out, hold your horses — it won’t work, because curry isn’t a PHP function. As it turns out though, it’s possible to create it. Sort of.

Implementing curry

Without going into great details, there are two ways, currying can be implemented in PHP.

• The first option is some sort of run-time evaluated code. This could be variable-variables, pointing to function names or callback pseudotype, invoked by call_user_func. Eventually, they are just kinds of eval.
• The other option is to use a command object, encapsulating the callback and its state.

For a more detailed explanation, have a look at Partial function application in PHP.

Weighing the options

Looking at the syntax, variable-variables have a much more functional “feel” to them, than a command object. The callback pseudotype does allow one to reference an object + method-name, but even though this is supported by PHP’s internal functions, it get’s bulky in user land code. If a command object feels like functional programming with OOP syntax, then call_user_func feels like functional programming with procedural syntax.

When it comes to performance, the run-time evaluated approach has some serious shortcomings. Currying must be done by creating new static code each time and this can’t be reclaimed until the end of the process. Furthermore, the only way to bind state, using this pattern, is to rely on a global container of some sort, generating a new, unique symbol each time. Since it’s impossible to know, when the callback isn’t referred anymore, it follows, that it’s impossible to safely remove the variable from the global container. Thus, any state bound this way, will be impossible to reclaim for PHP’s memory management system, furthering the risk of the script running out of memory.

In conclusion

So, if the offset for this post was to assert the current options for functional programming in PHP, the only practical solution is currying, using command objects. The awkwardness can be somewhat smoothed out, with a library of utility classes. phunctional is an attempt at this and we might also see some of these ideas emerge into more general purpose frameworks.

Another idea, could be a language level addition to PHP. What we need, is a way to make all callbacks callable with the variable-variable syntax. I’m thinking this could be supported with a magic-method. If an object was to be used as a function, and it implemented said magic method, the method would be called. From a design perspective, it would fit fine with the other magic methods, such as __call and friends.

Declaring functions

Another limitation, which could be addressed at the language level, is the matter of declaring functions in the first place. Currently, functions must be declared in the global scope or through the use of the hideous create_function. There have been some stabs at improving this, on the php-internals team, so maybe we should be as lucky as to see this in PHP 6?

This article provided by sitepoint.com.

IE8 Passes Acid2 Test, Web Standards Project Dies of Shock
Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today: I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. The Acid2 test […]

Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today:

I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode.

The Acid2 test was developed by the Web Standards Project (WaSP) as a challenge to browser developers. In a single page, the test makes use of a broad range of features from several different web standards that developers have wanted to have in browsers for some time, and it uses them to display a deceptively simple smiley face.

The first browser to support the Acid2 test was Safari 2.0.2, back in November 2005. Since then, iCab and Konqueror have announced their own support. The current beta of Firefox 3 comes close, but isn’t there just yet. With this announcement, it looks like Internet Explorer may actually beat it to the punch!

At the time this post was published, the Web Standards Project’s web server had collapsed under the strain of traffic generated by this announcement, but thanks to the Internet Archive I was able to collect this list of new features that we can now infer will be supported in IE8:

• displaying images with the