Search code examples
htmlcssitalic

How to italicize text backward?


I would like to italicize text backwards or the left the opposite way of this current text. Is this possible to do in HTML/CSS or even with Javascript/jQuery?


Solution

  • I think this might be what you're looking for? jsFiddle
    Play with the code a bit. Otherwise pretty sure it's impossible. You CAN do this in image editing software, such as Paintshop, etc.

    #skewed {
    font: 21px Impact, sans-serif;
    text-align: center;
    background: #ccc
    }
    #skewed {
     width:             350px;
     height:            140px;
    
     -moz-transform:    skew(-5deg, -5deg);
     -o-transform:      skew(-5deg, -5deg);
     -webkit-transform: skew(-5deg, -5deg);
     transform:         skew(-5deg, -5deg);
    }
    
    <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>
    
     <!--[if IE]>
     <style>
     /*
     * The following two rules are for IE only and
     * should be wrapped in conditional comments.
     * The -ms-filter rule should be on one line 
     * and always *before* the filter rule if
     * used in the same rule.
     */
    
    #skewed {
    
      /* IE8+ - must be on one line, unfortunately */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
     M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
     SizingMethod='auto expand')";
    
     /* IE6 and 7 */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=-0.08748866352592455,
            M21=-0.08748866352592455,
            M22=1,
            SizingMethod='auto expand');
    
    
    /*
     * To make the transform-origin be the middle of
     * the object.    Note: These numbers
     * are approximations.  For more accurate results,
     * use Internet Explorer with this tool.
     */
      margin-left: -9px; 
      margin-top: -18px;
    
    }
    </style>
    <![endif]-->​