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?

What is 'ledder-like'? It's not clear what you are trying to do. — Paulie_D, Feb 28 '14 at 12:09
I think you'd be better off using rotate, than skew for this. That will rotate the text rather than skewing it... — Alex, Feb 28 '14 at 12:23
Using `transform` transforms the element visually but not literally, for more information, read my answer [here](http://stackoverflow.com/questions/21248111/overflow-behavior-after-using-css3-transform/21305283#21305283) — Mr. Alien, Feb 28 '14 at 12:24
not possible with css but possible with javascript. [link](http://www.csstextwrap.com/examples.php) — Mr_Green, Feb 28 '14 at 12:33

score 4 · Accepted Answer · answered Apr 23 '14 at 05:11

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.

Seems not too slow even for not so small texts. – Gherman Apr 23 '14 at 16:34 — Gherman, Apr 23 '14 at 16:34

Siyah · Answer 2 · 2014-02-28T12:27:51.927

0

Just a thought, but I guess it's the only right answer:

This is not possible. Let me show you how I came to that answer. I tried it with font-style: italic, which should not change the text if the skew made it italic for me, but it does not make it italic by default. It's just the transformation of the skew that makes it this way. If you change the degree, you'll see it get's straighter. It rotates the text and than it looks like it's italic, but it is not.

Here is what I mean: http://jsfiddle.net/UPeYT/7/

You can see that it's very different than yours: http://jsfiddle.net/UPeYT/10/

You can wrap the lines in a span or p tag. you want to indent and give them a text-indent to achieve what you want.

edited Feb 28 '14 at 12:27

answered Feb 28 '14 at 12:20

Siyah

2,852
5
37
63

Whould it be OK for performance? I worry if such a rough scripting solution would make it slow. – Gherman Feb 28 '14 at 15:27
I thougth you proposed to add `text-indent` with `p` tag to every line. I don't how to do that without js. – Gherman Feb 28 '14 at 16:27
Well, yes, that is an option and not that resource intensive if you use CSS AND it's the only place where you use it. But, if your whole site depends on it, yes, than it would be intensive. Even with `jQuery`. Note that the jQuery option is better if it's on the whole site. – Siyah Feb 28 '14 at 16:32
Hm, I might do that with server-side code, but that might look messy. And the other problem is how to split a single big paragraph into separate lines? – Gherman Feb 28 '14 at 19:02

score 0 · Answer 3 · answered Feb 28 '14 at 12:27

0

Something like this?

I append parent to <p> element and apply the opposite!

see: http://jsfiddle.net/joseapl/UPeYT/9/

answered Feb 28 '14 at 12:27

Jose Paredes

3,882
3
26
50

No, I ment lines themself, not the background/parent. – Gherman Feb 28 '14 at 15:27

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

3 Answers3