14 May Slant align text
This is something that I’ve had to do a couple times recently. The bottom line is that there is nogood way to do this. Until the W3 specs and browser engines allow for wrapping text around non-boxes, the best you’re going to be able to do is either add a bunch of entities and <br/> tags manually. But lets say you want to do this dynamically. Well, now we need some script help. The basic idea here is to break down the content inside the box into some bits we can move around make the text appear to flow according to the slant.
The first thing we need to do is math. Figure out the slope of the slanted line. In my example, this slant was dictated by a graphic, so I just opened up Photoshop, used the square marquee tool to draw a box that contained the slant exactly. Bam! Slope is just the height of the box over the width of the box. You could simplify this fraction if you want, but we’re using computers here, and there’s no performance hit for letting them deal with the bigger numbers. Let’s keep this handy. (I inverted my slope from the tradition “rise over run” to “run over rise” to make a multiplication later on)
var slantFactor = 33/100;
Next, we need to break down our text into some blocks we can move around. Here’s a sample text block. Note the relative position on the parent element.
<div id="slantybox" style="position: relative; padding-right: 100px;">
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo.</p>
<p>Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, commodo vitae,
ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar
facilisis. Ut felis. Praesent dapibus, neque id cursus
faucibus, tortor neque egestas augue, eu vulputate magna
eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
And now we need to break it up, unless you want bigger chunks (<p> is probably not an appropriate chunk here.) Depending on your application, you may be better off manually defining these blocks, but one option is to use the fabulous lettering.js. I’m using the words method here, which is plenty.
var words = $("#slantybox p").lettering('words').children('span');
Now here’s the meat of the situation. Each <span> we’ve generated (or hand placed), we needs to shift. Whaddya know, jQuery gives us the each() function to do this. We’ll just tweak the position on each word in the block!
$(words).each( function (i) {
var rise = $(this).position().top;
$(this).css({ position: 'relative', left: rise * slantFactor });
});
Neat! This gives us a nice top left to bottom right slant along the sides. Obviously, we can reverse the direction of the slant ( top right to bottom left ) by adding a * -1 on the left position calculation.
more fun!
One of the cool things about this is that you can use non-constants to shift your lines. Here’s an example using a cosine function to create a wave.
$(words).each( function (i) {
var rise = $(this).position().top;
$(this).css({ position: 'relative', left: -50 * Math.cos(rise/30) + 50 });
});
caveats
You’ll notice this is a really simple example, so it has the problem of not taking the right side of the parent box into account. That’s why there’s a little bit of extra padding on the right to allow for the shifting text. This will also cause problems if you’re in a fluid layout, as the text will re-flow and your word spacing will be way off, especially if you’re using an “inverted” slant.