Question

I’m trying to get text to wrap along an angle. This illustrates what I’m trying to do better than I can describe it:

http://bdub.ca/angle.png http://bdub.ca/angle.png

I found a solution here but it uses a heck of a lot of empty floated divs to create the effect. I will need to do this a bunch of times on a page so it would be better to have a solution that is lighter in weight. JavaScript is okay if it’s something that I can just run on page load to spare the DOM from an overload of extra elements.

My brainstorming for a JS solution got as far as trying to figure out how to wrap each line in a span and set the left margins of the spans successively larger. The caveat is that the text is a paragraph that will auto wrap to fit in the container – I unfortunately can’t ask my client to insert line breaks from WordPress – so to wrap each line in a span would involve somehow detecting the automatic line breaks using javascript.

Any suggestions?

Answer 1

It’s very tricky in that you can’t legitimately (w3c standards; monitor screen resolution size and privacy) detect the actual width of characters. You could set the font-size to a specific width and insert a line-break yourself when it comes close to the width. (in b4 monitor)

so css: .paraIncrement { font-size: 12pt; }

I’m a little rusty with javascript so let’s psudo-code this one:

outputstr[] = array();
int index = 0;
int startmax = 80;
int innerCount = 0;
for (int i = 0; paragraph.length; i++) {
   outputstr[index] += paragraph[i];
   innercount++;
   if (innercount == startmax) {
      startmax -= 5; // how much you want the indent to shrink progressively.
      innercount = 0;
      index++;
   }
}
for (int i = 0; i < output.length(); i++) {
   echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>';
}

This section expects the maximum length of the start to be 80 characters long, decrementing by 5 each time. Also if you want to be sure it doesn’t break early, ensure the the css.overflow is set to hidden/visible.