Grow your CSS skills. Land your dream job.

Italicize font the oposite direct?

  • # February 22, 2013 at 5:18 pm

    Some crazy way possible?

    # February 22, 2013 at 5:19 pm

    Here is one option but that is no good for me http://www.myfonts.com/fonts/baselinefonts/rough-egyptienne/left-italic/

    # February 22, 2013 at 5:49 pm

    I’m pretty sure it’s impossible to do. And why would you want to? Give us some context. What are you trying to do exactly? Is it decorative piece or informative piece of text? Are you worried about readability and legibility?

    If it’s a decorative piece maybe use Photoshop to mock up the right solution.

    Here are some resources with similar question:

    http://stackoverflow.com/questions/11976193/italicize-text-backward

    # February 22, 2013 at 6:16 pm

    Skew transform was what I was thinking of as well, but… it won’t really work if your text spans multiple lines (unless you ‘skew’ each line separately) and it looks ugly.

    # February 22, 2013 at 7:16 pm

    I just updated that [StackOverflow question with my answer](http://stackoverflow.com/a/15035402/145346)… basically I used the skew matrix from the [Mozilla docs](https://developer.mozilla.org/en-US/docs/CSS/transform#Live_examples) and ended up with [this demo](http://jsfiddle.net/Mottie/dRQaw/510/):

    HTML

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi.
    Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a
    malesuada erat.

    jQuery

    // html function requires jQuery 1.4+
    $(‘#skewed’).html(function (i, h) {
    h = h.replace(/s+/g, ‘u00a0′).split(”);
    return ‘‘ + h.join(‘‘) + ‘‘;
    });

    CSS

    #skewed {
    font: 24px Georgia, sans-serif;
    background: #ccc;
    padding: 10px 20px;
    }
    #skewed span {
    display: inline-block;
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */
    -webkit-transform: matrix(1, 0, 0.6, 1, 8, 0);
    -o-transform: matrix(1, 0, 0.6, 1, 8, 0);
    transform: matrix(1, 0, 0.6, 1, 8, 0);
    }

    # February 22, 2013 at 7:20 pm

    Hey good job! That is actually quite usable. Take care. :)

    # February 22, 2013 at 7:33 pm

    Nice one @Mottie.

    # February 22, 2013 at 7:47 pm

    Hmm, actually it would be easier to use and control by using skewx instead ([updated demo](http://jsfiddle.net/Mottie/dRQaw/511/)):

    #skewed span {
    display: inline-block;
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */
    -webkit-transform: skewx(20deg);
    -o-transform: skewx(20deg);
    transform: skewx(20deg);
    }

    # February 23, 2013 at 10:14 am

    This is where nth-line(n) would be really useful!

    # February 23, 2013 at 10:49 am

    This severely effects legibility. Why would you want to do this? By the way, you’re looking for an opposite of oblique, not italic.

    # February 24, 2013 at 1:34 pm

    please don’t do these horrible things to innocent typefaces.

    # February 24, 2013 at 4:00 pm

    Better question is why do you guys care what I do with one word on my site? Now you’ll say – “oh it’s only one word – ok then then”. Still why do you care what I do with my site?

    I’m sorry this just carries over to from things in my life that I experience and see. I can’t stand it when people have nothing better to do than stick their nose in my bussiness. To those people I say – you run YOUR life the way you want and I’ll run MINE the way I want. That includes everything from taking a shit upside down (god forbid) to italisizing text the oposite direction. If its not directly affecting you you should not care.

    # February 24, 2013 at 4:10 pm

    hey you do you, buddy. i just feel that typography matters more than most design choices, especially on a site where you expect users to, ya know, read.

    that being said, you’re right that doing things like this to a single word probably won’t effect much.

    # February 24, 2013 at 5:09 pm

    You shouldn’t do this. It’s counter intuitive and visually unappealing.

    # February 24, 2013 at 5:33 pm

    Before y’all tar and feather him, I just used this exact thing to un-italicize a cursive font that was naturally tilted. It’s still perfectly readable.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".