CSS Parallelogram with Text

Question

I've made a parallelogram using CSS3's skew transform, and placed text within another div that has an opposite skew value so that the text remains un-transformed: JSFiddle example.

Is there a way to have the text aligns to the edges of the parallelogram like this:

I'm open to other suggestions, such as using the canvas if it's not possible using CSS. If there is a JavaScript technique to do this then any links that may be useful would be appreciated.

UPDATE: After hunting for some cross-browser solutions, the easiest tool I found to achieve this was with this tool.