treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Italicize font the oposite direct?

  • Some crazy way possible?

  • 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

  • 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.

  • I just updated that StackOverflow question with my answer... basically I used the skew matrix from the Mozilla docs and ended up with this demo:

    HTML

      <div id="skewed">
        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.
      </div>
    

    jQuery

    // html function requires jQuery 1.4+
    $('#skewed').html(function (i, h) {
      h = h.replace(/\s+/g, '\u00a0').split('');
      return '<span>' + h.join('</span><span>') + '</span>';
    });
    

    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);
    }
    
  • Hey good job! That is actually quite usable. Take care. :)

  • Hmm, actually it would be easier to use and control by using skewx instead (updated demo):

    #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);
    }
    
  • This is where nth-line(n) would be really useful!

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

  • please don't do these horrible things to innocent typefaces.

  • 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.

  • 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.

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

  • 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.

  • @cnwtx Majority of script faces are slanted. You could have just found an upright script. By the way, no one is ridiculing him, we are giving advice.

    @websitecodetutorials Why do you come here if you're just going to explode at those who give you relevant and professional advice? Also, you invited us into "your business" when you asked a question on this forum. What is clear to me is that even though it is your site, you don't care about UX, which is obviously important for the type of site you're running. Good luck with it.

  • I asked for a code solution not personal preferences. No biggy I'm just not a fan of it in forums. UX? User experience I presume. I'm not on my site for one. And two I speak my mind weather people like it or not. Some find that comforting while others prefer to be caudaled.

  • The short reason why I didn't was that I also needed both the normal slanted and italic slanted versions as well, and didn't want to have to download two different fonts.

  • You started a new thread with one line question. Without any explanation or introduction of the problem you are interested solving. And when people, who are answering, out of context, try to get some sense of what, why, etc., you become condescending and rude.

    We actually helped you solve the problem. Be thankful. Dirtbag.

  • I was thankful and showed my appreciation to the solver. It was only later I showed unappreciation for said comments. If you can't tell I'm not fond of being told what to do. I blame that on my dad.

    Truce. I don't want to argue anymore. Agree to disagree. :)

  • "Truce. I don't want to argue anymore. Agree to disagree. :)"

    Deal. :)