Skew a paragraph in css but keep each line left justified

Question

I'm trying to skew some text that sits within a div, which is all nice a straight forward, but I am trying to find a way to keep each line completely left justified to one side of the div, as currently the first few lines sit in so many pixels and the last few lines overflow out. The font we're using is already italic but we want to push it a little more with the skew, I know it's not going to look perfect but it works for what we want.

Is there a way to do this? I've tried searching one out already but I'm not sure if I'm looking for the right thing or it's something that's nobody bothers doing.

Heres a basic JSfiddle

and an awful mock up... bad mockup

and the basic code to test it out...

Here is the CSS:

.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
 transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */ 
}

And the HTML:

<div class="box">
    <p>Text here - more in the fiddle</p>
</div>

Thanks guys!

Answer 1

This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew completely and give your .box p selector font-style: italic:

.box p {
    font-style: italic;
}

JSFiddle demo.

If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew on that:

<article>
    <p>...</p>
</article>

.box article {
    transform: skew(-20deg);
   -ms-transform: skew(-20deg); /* IE 9 */
   -moz-transform: skew(-20deg); /* Firefox */
   -webkit-transform: skew(-20deg); /* Safari and Chrome */
   -o-transform: skew(-20deg); /* Opera */ 
}

Now simply counter that skew on your p element by skewing the same amount in the opposite direction:

.box article p {
    font-style: italic;
    transform: skew(20deg);
   -ms-transform: skew(20deg); /* IE 9 */
   -moz-transform: skew(20deg); /* Firefox */
   -webkit-transform: skew(20deg); /* Safari and Chrome */
   -o-transform: skew(20deg); /* Opera */ 
}

Here I've again added font-style: italic to make the text render italic.

JSFiddle demo.