Angled Wrap Script - Some math - anyone up 4 a challenge?

Angled Wrap Script - Some math - anyone up 4 a challenge?

Maybe this post belongs in projects, I'll let the moderators decide.

I'm working on a custom layout, which has an element that is angled on the page. It's for a coffee shop, and I had an idea to make the top portion of their menu (coffee and tea) appear next to a scanned image of an award they just received, I placed the scanned image at an angle in the layout and made it a background element in the containing block of the list to its left.

Here is an example of the page: http://solidmotive.com/clients/cafehey/

Right now the menu list is written pretty lame. Each <li> is incrementally longer by just laying on the "period" key (.).

I'd like to adjust this with jQuery, but I must admit that I'm crappy at writing math functions, even though this seems easy in my head (my left brain really sucks).

A simple way for me to create a "faked" angled edge to this list is to incrementally change the width of the li element which has the css set at
li { display: block; }


I need a function that simply gets the width set statically for the first list item:

So something like:
$("li:eq(0)").css({width: "300px"});


Then takes the width value of the first list item and makes the next list item's width value that number plus an integer. I wrote a file called angle.js and this is what it contains (but I know I'm pretty far far off, hence why I'm posting):
var first = $("li:eq(0)").width();
      var int = "45"
      
      function addWidth() {
      $("li").next().css({width: "30"+int+"px"});
      }
      
      addWidth();


In theory (or in my "right brain" artist-mind, since I don't know how to write this correctly). The above concept would add 45px to the next li after the first one. Then for each consecutive li 45px to the width of the previous li).

So if the value of the first li was 300px:

I would get the output of these widths:

1st li = 300
2nd li = 300 + 45
3rd li = 345 + 45
4th li = 390 + 45
and so on....

I used 45 just as an example, the actual value would be smaller than that, so say 12px...
This would create an angled appearance of the list, and I could play around with the amount that the function would add, to create the correct angle, thus achieving the same "visual effect" as above, (the text appearing to wrap along an angled edge)... With much cleaner code and the ability to implement a super clean cms back end, where the client could change the values and menu items, without ever screwing up the layout (as in typing a bunch of periods and reloading the page to make sure the spacing looks right).

I've made a test page: http://solidmotive.com/clients/cafehey/test.html

Here is the crappy .js file: http://solidmotive.com/clients/cafehey/js/angle.js

(Once I get a solution to this, I'm going to add the "dots" between the (strong)menu item and its (strong)price using jQuery) Either with an image like this: http://tuscany.cssmastery.com/ (See the table of contents to the right) Or by placing ellipses entities dynamically...
&hellip;
. This way I can add a back end where the cafe can update menu items, and the formatting will stay the same, rather then have the owners go into the HTML, or call me to do it.

I think this would be a cool thing to write and tell other designers, it would be even cooler to write a plugin that makes this work for paragraphs or other block elements too, that way a designer would have the ability to create a layout using angled images and/or other visual elements and the text could appear like its wrapping around them without using
<br />
.. So if you come up with a solution, I will be sure to write your name into the article that I write about this design.. Thanks a million to anyone who looks into this!

- T