How to make a text with skewed line but not letters?

Question

I have a skewed text in HTML/CSS. Like this: (http://jsfiddle.net/UPeYT/)

p {
    -webkit-transform: skew(-8deg);
-moz-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
}

I would like the alignment of the text to skew but the words themselves to not be italic. How whould I do that?

Answer 1

I've built something that I needed, but I'm not sure if it is exactly what you need. Essentially I'm taking a paragraph, skewing it, then splitting each word into it's own span with the skew reversed. I'm sure this is horrid for performance on a repaint though.

fiddle

CSS:

span {
    -webkit-transform: skew(-18deg);
    -moz-transform: skew(-18deg);
    -o-transform: skew(-18deg);
    transform: skew(-18deg);
    display: inline-block;
    position: relative;
}
p {
    -webkit-transform: skew(18deg);
    -moz-transform: skew(18deg);
    -o-transform: skew(18deg);
    transform: skew(18deg);
    padding:30px;
}

javascript (uses jquery):

$(document).ready(function(){
    var words = $('p').text().split(' ');
    $('p').empty();
    for (var i=0;i<words.length;i++){
        if (words[i]!='') {
            $('p').append('<span>'+words[i]+'</span> ');
        }
    }
});

The HTML is simply a P tag with whatever content.