A non-trendy way to wrap text to the width of an image

Say you have an image, whose width is unknown.  You want to display a caption below the image, and the length of the caption text is also unknown.  How do you display the caption so that the text wraps to the width of the image?

As far as I know, there is no way to do this with divs and Css.  It *may* be possible to do it with figures and figcaptions, but now you’re in Html5 land, and to support older browsers you’ll need to do gymnastics.

You could use an img load event handler and resize the caption after the image comes in, but now you have to add javascript for something that should be handled by your html.

So you use tables.  Yes tables, those horrible, horrible remnants of Web 1.0.

And you do it like this (though your styles would obviously be in a css stylesheet somewhere):

<table>
<caption style="caption-side: bottom; margin: 0 5px;">Oh caption, my caption! our fearful task is done!<br>
The layout has weathered every wrack, the prize we sought is won</caption>
<tr><td><img alt="some unknown sized image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Ocaptain.jpg/394px-Ocaptain.jpg">
&/lt;tr></table>

which renders thusly (Live writer may corrupt this - sorry view-sourcers):

Oh caption, my caption! our fearful task is done!
The layout has weathered every wrack, the prize we sought is won

---

Also see http://jsfiddle.net/austegard/fGwve/

archive.rollingstone.com – another feather in our cap

With the successful launch of the new iPad-enabled Rolling Stone Archive, I figured I’d take the time out to congratulate our client, Bondi Digital, and my team at Applied Information Sciences (AIS): Jim Jackson, Robin Kaye, Ian Gilman and Siva Mallena  (with additional help from Leslee Sheu and Kevin Hanes).

Built on the same technology that we used to launch i.Playboy.com, the Rolling Stone archive combines our Silverlight viewer and the Html5, touch-optimized iPad viewer in a single site, sharing peripheral components such as menus and search features.  Per client requirements for Rolling Stone all desktop users will get the Silverlight-based viewer, with its keyboard and mouse integration, and deep zoom of images, while iPad users are automatically switched to the Html5 viewer.

Building and optimizing a highly graphics intensive app like this for the excellent, but admittedly limited, iPad browser has been a thoroughly enjoyable challenge. Showcasing our work to the public through another premier publication like Rolling Stone makes it all the more satisfying.

Our team is already onto the next publishing project – stay tuned…

"Microsoft has completely lost the web development community."

Last year Mark Pilgrim released a free e-book/site called “Dive Into Html5” (http://diveintohtml5.org/).  The site/book has served as a valuable resource on a recent Html5 project we’re working on here at AIS, and I have frequently gone back for details on topics such as local storage and canvas.  It is an excellent book for any bleeding edge web developer.  It is so choice. If you have the means, I highly recommend picking one up.

This week, Mark posted his observations on how publishing a free e-book (which is also purchasable in print format) works well for him, and that it gives great insight into what parts of the book are being read, and by whom. He then makes the following observation:

6% of visitors used some version of Internet Explorer. That is not a typo. The site works fine in Internet Explorer — the site practices what it preaches, and the live examples use a variety of fallbacks for legacy browsers — so this is entirely due to the subject matter. Microsoft has completely lost the web development community. (emphasis mine)

I forwarded this internally within AIS, and a nice debate ensued.  One common complaint was the hyperbole of the statement, and I agree; a more accurate line would likely be "Microsoft as a browser vendor has lost significant mindshare in the bleeding edge web development community."

Personally one of the things I love about Html5 (using the term the way the hypers would – to mean modern web development with client-driven UI interactions using JavaScript, CSS(3) and some HTML5 semantics) is that it has in some ways unified the web development community:  The debate a few years ago was about JSP vs .NET vs PHP vs Python vs Rails vs someotherservertechnology.  Folks from different camps seldom interacted and learned from each other.  With Html5, the backend processes are completely irrelevant, as long as they don’t muck with the Html (ASP.NET webforms is still a major sinner here, unfortunately) and developers using all sorts of backend software and operating systems are now adding to the collective knowledge, mostly working towards the common goal of getting as much functionality as possible, pushed to end users through mostly standards compliant browsers. 

For instance, our Html5 app is backed by ASP.NET MVC 2 and SQL server.  We do all our development on Windows, in Visual Studio – we’re looking to deploy to Azure.  Clearly we’re MS developers.  But we could just as well have done the app in Php against MySql running on linux and apache, and we’re taking cues from folks using python, java, Rails, Node.js, php and God knows what on the backend.

At the same time I haven’t used IE by choice for about 5 years, maybe more…

I was asked what I thought MS could do to gain back some developer mindshare – so here goes:

• My thoughts are that if Html5 and the set of bleeding edge technologists that go with it are any kind of priority for MS,  they need to do some or all of the following:
• Find a way to upgrade the legions of IE 6, 7  and 8 users to IE9.  This will obviously not be easy,  but they could do something similar to what Google did with Chrome frame (i.e. make IE9 a plugin for the older browsers),  or they could do something like the makers of the “IE Tab” Chrome and Firefox extensions do,  allow IE to be hosted inside Chrome,  and only activate it for certain sites.  Or let users install IE9 side by side with the older versions.   All of these would have as goal to encourage end users to use the latest possible browser for the task they need it for,  and to make them install IE9 instead of Chrome or Firefox.
• Make IE9 the paragon of standards compliance.   (They are actually getting close to this...)
• Bring IE9 to WP7 and whatever tablet software they're coming out with.
• Reduce the focus of Silverlight as a browser plugin,  and make it more about web-deployed desktop apps.
• Drastically improve the support for css and javascript in Visual Studio, including debugging and unit testing.   And give this toolset away in the form of VS Express.
• Evolve the Dev tools in IE9 to become better than Chrome's inspector and the Firebug plugin.
• Separate the IE development from Windows to allow quicker iterations
• Do more things like the jQuery deal. The world of CSS is a mess (we desperately need mixins and code forks like those provided by media queries), MS could take the lead here…

The point is, whether Mark’s browser percentages are statistically valid as an indication of web developer’s preferences, or to what degree Microsoft is lagging/losing developer mindshare; these are not the pertinent questions.  The fact is that Microsoft is now not a leader in emerging web development areas – maybe they never were – but should they want to be, they need to take action. IE9 is shaping up to be a great browser, and they need to push it aggressively.

CSS3 Fun

Today I learned about two new CSS3 rules that both work in newish webkit (Chrome/Safari) browsers.  We can FINALLY vertically align elements in a div, without resorting to use/simulating of tables, by using box-sizing.  About freaking time.  And you can now also resize elements in the client.  I clearly need to read up more on what’s coming in CSS3…

Example (you'll need a newish webkit (Chrome/Safari) browser):
You can resize the div below – see how the image always stays centered?

Source:

<div style="display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; resize: both; overflow: hidden; width: 200px; height: 200px; background-color: black;">
<img src="http://www.appliedis.com/images/tagline_01.gif" style="max-width:100%; max-height: 100%">