Tuesday, September 25th, 2007

If I Told You You Had a Beautiful Figure…

Category: JavaScript, JSON, Library, Prototype

…. would you hold it against Aaron Gustafson? Aaron has written about “laying out images consistently within a design is difficult; especially when you hand the keys over to someone else to fill in the content.”

The article discusses a microformat for figures so you define a figure using as little or as much as:

  1. <div class="figure">
  2.   <img src="fa.jpg" alt="" />
  3.   <p class="credit"><abbr class="type"
  4.    title="Photograph">Photo</abbr>
  5.     by <cite>Aaron Gustafson</cite></p>
  6.   <p class="caption"><em class="title">Figure 1</em>
  7.     The Faces of the Fallen
  8.     exhibit at Arlington National Cemetery.</p>
  9. </div>

He then writes a JavaScript class FigureHandler which will:

  1. Parse the page looking for div elements classified as “figure,”
  2. Compare the width of the image within that figure to the overall column width (assumed to be the figure’s parentNode),
  3. Apply a class to the figure that corresponds to the percentage of the column width the image takes up,
  4. And, as an added bonus, FigureHandler will also adjust the widths of any paragraphs within the figure to match the width of the image, so you never have to worry about the text and the image not aligning properly.

Posted by Dion Almaer at 7:00 am

2.9 rating from 39 votes


Comments feed TrackBack URI

I hate to say this but … this is an example of what not to do with JavaScript. JavaScript is meant to add interaction to a webpage, not fix an html/css issue. The only exception might be using JS to fix a browser specific css bug but still it is usually better to fix you’re css bugs within your stylesheets.

This example could easily be done using a table. The ‘image with caption’ can be wrapped with which will collapse the outer container. Another easy solution is just include the image width, which we all know to do from HTML 101, and then you could also set the outer div width.

Comment by jake — September 25, 2007

Another solution is to work closer with “those who fill in the content” so they understand the design goals (and the designer understands the content goals) to avoid this kind of thing all together.

Also, if the “images pixelate horribly when resized”, why would the browser be any better at this?

Comment by Andy — September 25, 2007

Jake, Andy I got flamed the other day for suggesting the same things:
1. How, as a layout designer, does one not have control over the layout
2. Just because something seems hard in CSS does not mean it can’t be done. Too often JS is used where designers can’t see a solution in grid design or floats. The worst part is that JS is not very good at resizing the flow of content — for instance, firing up to 1000s of times on a window resize.

The strange part to me is that this is being done client-side, not in the CMS. If you know what the target dimensions are for images, you could have a backend utility read the dimensions on post, or send the image dimensions from the client, and have the change permanently committed to the HTML. That way there’s no weird resizing on page load. Also, then there’s no need for prototype (or other libraries).

I repeat that I think this is a bad example for n00bs, encouraging framework dependency over faster, more proper JS or CSS . It’s great now that jQuery, Prototype, and YUI have Positioning/Dimensions libraries, but relying on them for basic layout is a bad path to take.

Comment by Charles — September 25, 2007

I agree with everyone. There’s many ways to skin a cat but this just seems to be breaking out a chainsaw when other options are far better.

Comment by Joe — September 25, 2007

Leave a comment

You must be logged in to post a comment.