A different slant
A different slant...
You don't often see diagonally aligned text on a web page - but here it is. Most web designers wouldn't know how to produce such an effect (without rendering), but this oul' fella still has one or two tricks up his sleeve.
Although the basic technique has appeared in (a few) other designs, I believe that this version is unique since, unlike any before, it re-scales with the browser window while preserving the relative spacing of image versus text. Try it. Regrettably, things go haywire on IE5/6 and horrible old Macs when the the reader's browser text is resized. Roll on CSS3...
For those interested in how the pictures were made, I've written a short tutorial on it HERE.
But what about the HTML layout itself? The principle is simple enough, and looks more complicated than it really is. Although I've presented a diagonal slanting layout here, the same technique, modified, can be used to generate other alignments such as a "cutout" semicircle of text, or perhaps a pyramid. For a kick-off, take a look at the source for this page.
The interesting bit happens within the "contenalt" <DIV>. At first glance, it makes no kind of sense. What's happening is that the two large blocks of code correspond to the images that are to their left, and right, respectively. Basically, having made the top and bottom "halves" of a single image, I introduce a series of formatted <DIV>s with fixed heights but varying margins. The number of elements depends on how high the two images are (in pixels) - in this case, there are eleven 20px elements needed for each sector to match sizes.
Let's look at the first part of the code...
<div style="text-align: left; width: 100%; background-image:url(falls5.jpg); background-repeat: no-repeat; position: relative; background-position: top right; overflow: hidden">
This says: "Align all the following text left, use the full width of the panel, show this picture as the background, put it at the top right and only show it once, if the panel gets too narrow then hide the sides of the picture."
That's the easy bit. If we left matters there, the text would just overlay the picture because it's a background - and if we floated the picture, the text would just flow round the rectangular edges of it. What's needed now is a way of steering the text round the visible area - but at an angle.
To do this, we could set different right (or later, left) margin widths for each line of text. In fact, changing the margin every two lines is adequate for images of this height, so we measure up and discover that the block of text used on this page can be "sliced" every 20 pixels. So let's do that...
<div style="display:inline; height:20px; margin-left:160px; float:right; clear:right"></div>
<div style="display:inline; height:20px; margin-left:140px; float:right; clear:right"></div>
<div style="display:inline; height:20px; margin-left:120px; float:right; clear:right"></div>
...
And so on. The same method applies to the second section where the image is on the left, but with a couple of necessary changes...
<div style="display:inline; height:20px; margin-left:40px; float:left; clear:left"></div>
<div style="display:inline; height:20px; margin-left:60px; float:left; clear:left"></div>
<div style="display:inline; height:20px; margin-left:80px; float:left; clear:left"></div>
...
What happens is that there are now eleven <DIV>s in each section, stacked one after the other with differing margins - and all floated. As the browser text flows through each <DIV> it has to respect that margin setting - and so the effect is created. The 'display-inline' declaration stops IE5/6 from getting the element width wrong."But hang on..." I hear you cry, "...we looked at your source and the margins and spacing aren't exact figures!" Yes, that's true. When using images with this apparent shape, it's necessary to tweak the layout so that the text maintains a proper spacing along the edges. The mathematics of this are left as an exercise for the reader.
Hth,
Paul